WordPress OceanWPテーマのカスタマイズ・基本設定の全体のスタイルからページタイトルまで ～その２～
コンテンツ
OceanWPの続き
WordPressの海外製のテーマOceanWP（無料版）をインストールして試行錯誤した時の備忘録の２回目。
インストールからホームページ設定までは前回の記事を参照。
尚、OceanWPは設定項目が非常に多く、細かい設定ができるので複数の記事にまたがってしまっている。
今回は基本設定の中のから全体のスタイルからページタイトルまでの記事とする。
基本設定
ページ全体の色、タイトル、スクロールなどの基本的な動作についての設定を行う。
尚、初期設定ではメイン色がブルーで背景色が白に設定されていた。
これは前回の記事のセットアップウィザードにてテンプレートにブログを選択した事によりブログ向けの初期設定がされているのだと思われる。
全体のスタイル
メインの色や背景色を設定する。
|
スタイルの設定場所 |
スタイルの設定場所を指定する（のだと思われる）
の選択が可能でカスタムファイルを選択すると/var/www/wordpress/wp-content/uploads/oceanwp/にcustom-style.cssファイルが作成された 当方の知識不足もありカスタムファイルを指定する”意味・理由・メリット”はイマイチ分からなかった |
|
メイン色 |
色パレットでメイン色を指定する
メイン色の表示例
|
|
メイン色のホバー |
メニュー等にマウスオーバーした時の色を指定するのだと思われるが当方の環境ではどこに反映されるのかが分からなかった もしかしたら選択したテンプレートによっては反映されるのかも。。。 |
|
メインボーダーの色 |
色パレットでメインボーダーの色を指定する ※位置が分かりやすいようにデフォルトの色から変えている メインボーダーの色の表示例
|
|
背景色 |
色パレットで背景色を指定する 背景色の表示例
|
|
背景画像 |
上記の背景色の部分に画像を指定する事ができる 背景画像の設定例
|
|
リンク色 |
色パレットでリンク色を指定する ※位置が分かりやすいようにデフォルトの色から変えている リンク色の表示例
|
|
リンク色 ホバー |
色パレットでリンク色 ホバーを指定する 表示例は上記の”リンク色の表示例”を参照の事 |
一般設定
基本的なレイアウトやOGP（Open Graph Protocol）に関する設定を行う。
レイアウトスタイル
ページのレイアウトを以下の３種類から選択する。
- ワイド
- ボックス
- セパレート
選択したレイアウトにより設定可能な項目が異なる。
１．ワイド
|
メインコンテナーの幅 (px) |
メインコンテナの幅をピクセルで指定する |
|
コンテンツ幅 (%) |
コンテンツ幅を％で指定する |
|
サイドバー幅 (%) |
サイドバー幅を％で指定する |
２．ボックス
|
BOXED LAYOUT DROP-SHADOW |
チェックをするとボックスに影がつく |
|
Boxed Width (px) |
ボックスの幅をピクセルで指定する |
|
外側の背景 |
外側の背景色を色パレットで指定する |
|
内側の背景 |
内側の背景色を色パレットで指定する |
|
コンテンツ幅 (%) |
コンテンツ幅を％で指定する |
|
サイドバー幅 (%) |
サイドバー幅を％で指定する |
３．セパレート
|
外側の背景 |
外側の背景色を色パレットで指定する |
|
内側の背景 |
内側の背景色を色パレットで指定する |
|
コンテンツの余白 |
コンテンツの左右の余白をピクセルで指定する |
|
ウィジェットの余白 |
ウィジェットの左右の余白をピクセルで指定する |
|
メインコンテナーの幅 (px) |
メインコンテナの幅をピクセルで指定する |
|
コンテンツ幅 (%) |
コンテンツ幅を％で指定する |
|
サイドバー幅 (%) |
サイドバー幅を％で指定する |
３パターン共通
|
スキーママークアップを有効化 |
チェックをするとスキーマーマークアップ（検索エンジンに認識されやすくなるタグ）が有効になる |
固定ページ
固定ページのレイアウトを
- 右サイドバー
- 左サイドバー
- 全幅
- １００％全幅
- BOTH SIDEBARS
の５パターンから指定する。
１．右サイドバー
左にコンテンツ、右にサイドバーのパターン
|
Mobile Sidebar Order |
モバイル時にはサイドバーとコンテンツが縦に並ぶので、その時の並び順
|
|
コンテンツの上と下のパディングをピクセルで指定する それぞれ別の値を設定する事も可能だがクリップマークを押すと上下同じ値でパディングされる 片方に数値を入力するともう片方にも同じ値が設定される
|
２．左サイドバー
左にサイドバー、右にコンテンツのパターン
設定可能な項目は右サイドバーと同様
３．全幅
サイドバーを表示せずに全幅でコンテンツが表示されるパターン
全幅の場合の設定可能な項目はコンテンツのパディングのみ
４．１００％全幅
全幅から更に左右の隙間を無くしたパターン
１００％全幅の場合の設定可能な項目はコンテンツのパディングのみ
５．BOTH SIDEBARS
サイドバーを２つ表示するパターン。
下記の例はサイドバー、コンテンツ、サイドバーの例
|
両サイドバー: スタイル |
２つのサイドバーとコンテンツの並び順を下記の３パターンから指定する
|
|
両サイドバー: コンテンツ幅 (%) |
コンテンツ幅を％で指定する 下記のサイドバー幅と合わせて１００％になるように設定する |
|
両サイドバー: サイドバー幅 (%) |
サイドバー幅を％で指定する 上記のコンテンツ幅と合わせて１００％になるように設定する |
|
コンテンツのパディング (px) |
コンテンツの上と下のパディングをピクセルで指定する |
OGP
OGP（Open Graph Protocol）※に関する設定。
※SNS（Facebook、Google＋、etc）上でWEBの内容を画像やタイトル説明文付きで伝えるためのプロトコル。
タイトルやURL、概要、アイキャッチ画像、オブジェクトのタイプ等を指定する事より、シェアされた時にリッチに表示されてサイトへの誘引率が高まる。
|
OGP を有効化 |
こちらにチェックを入れて下記のTwitterユーザ名、FacebookページURL、Facebook App IDを指定するとOGPが有効になるのだと思うが検証できていない。 |
|
Twitter ユーザー名 |
Twitter ユーザー名 |
|
Facebook ページ URL |
Facebook ページ URL |
|
Facebook App ID |
Facebook App ID アプリIDについてはこちら |
ページタイトル
ページタイトルに関する設定を行う。
|
表示 |
ページタイトルを表示する端末の種類を制御できる
の４パターンから選択可能 ページタイトルは結構スペースをとるのでモバイルの時は非表示で良いのかも知れない 固定ページの場合
投稿ページの場合は記事のタイトルが非表示になるわけでは無い
|
|
見出しタグ |
ページタイトルの見出しタグを指定する H1～H6、div、span、pなどのタグが指定できるが残念ながら当方の環境では表示が変わらなかった Chromeのデバッグモードで確認した所、タグ自体は変更されているのだがタイポグラフィー＞見出しで設定したフォントや色が反映されない 下記のスタイルの設定とコンフリクションしているようにも思えるのだが解決策をご存知の方はコメントを頂けるとありがたいです
|
|
スタイル |
ページタイトルのスタイルを指定する
の５パターンが設定可能で選択したスタイルによって設定可能な項目が異なる デフォルト
中央寄せ
中央寄せ・ミニマル
背景画像
非表示
|
|
パディング (px) |
タイトルの上下のパディングをピクセルで指定する。 デフォルト、中央寄せ、中央寄せ・ミニマル、背景画像、非表示で指定可能 但し、非表示の時は指定をしても意味が無い |
|
背景色 |
タイトルの背景色をパレットから指定する
デフォルト、中央寄せ、中央寄せ・ミニマル、非表示で指定可能 但し、非表示の時は指定をしても意味が無い |
|
文字色 |
タイトルの文字色をパレットから指定する デフォルト、中央寄せ、中央寄せ・ミニマル、背景画像、非表示で指定可能 但し、非表示の時は指定をしても意味が無い |
|
画像 |
以下、背景画像を指定した時に設定可能な項目 画像ファイルを指定する |
|
タイトル / パンくずリストの位置 |
トップページ以外でのタイトル、パンくずリストの位置を左、中央、右から選択する 下記は中央の時の表示例
|
|
位置 |
画像の位置 デフォルト、左上、上 中央寄せ、右上、中央左、中央、中央右、左下、下 中央寄せ、右下から選択する 下記はコーヒーカップの画像を右上に表示した時の例
|
|
スクロールの有無 |
スクロールを選択するとページのスクロールと一緒に画像もスクロールされる 固定を選択すると画像は固定されてページだけがスクロールされる 固定を選択した時の表示例
2020年6月1日追記
項目のラベル名が”添付ファイル”になっているが”スクロールの有無”の間違いと思われる |
|
繰り返し |
画像の繰り返しの指定
から選択が可能 |
|
サイズ |
画像の表示サイズを指定する
から選択が可能 |
|
高さ (px) |
タイトルの高さをピクセルで指定する |
|
オーバーレイ不透明度 |
オーバーレイ色（下記参照）の不透明度 下記の例は
オーバーレイ色に不透明度を指定する事により、背景写真に薄っすらと色を付けることができる
|
|
オーバーレイ色 |
オーバーレイ色をパレットで指定する |
パンくずリスト
タイトルと一緒に表示されるパンくずリストの表示形式について指定する。
|
パンくずリストを有効化 |
チェックをするとパンくずリストが表示される |
||||
|
項目タイトルを表示 |
チェックをするとパンくずリストに項目タイトルが表示される
|
||||
|
位置 |
が選択可能 ”全体の右”を選択時の表示例
2020年6月9日 追記
以前は全体の右を選択すると右側に表示されたのだが現在はタイトルの下のまま変わらない |
||||
|
パンくずリスト区切り |
セパレーターが指定可能 ”＠”の時の表示例
|
||||
|
ホーム項目 |
ホームの表示方法
が選択可能
|
||||
|
ホームページの翻訳 |
前述のホーム項目が”テキスト”の時は任意の文字列に変更する事ができる ”ホームページ”を指定した時の例
|
||||
|
「４０４見つかりません」の翻訳 |
404 Not Foundになった時のパンくずリストに表示するメッセージ
|
||||
|
「検索結果」の翻訳 |
検索ボックスで検索結果表示の際にパンくずリストに表示される文字列 デフォルトは”Search results for”が設定されている ”検索結果”を設定した時の表示例
|
||||
|
投稿タクソノミー |
投稿記事ページを表示している時のホーム項目の次に表示されるパンくずリスト
が指定可能 カテゴリの時は記事のカテゴリ、タグの時は記事のタグ※、Blog Pageの時はブログ用の固定ページのタイトルが表示される ※複数のタグの場合は一番最初のタグが表示される（のだと思う） カテゴリーを選択した時の表示例
|
||||
|
商品タクソノミー |
項目名からして商品一覧を表示している時のパンくずリストと思われるが未検証 WooCommerce（eコマースプラグイン）をインストールした時に反映される項目なのだと思われる
が指定可能 |
||||
|
文字色 |
文字色をパレットから指定する 表示場所
|
||||
|
区切り色 |
区切り色をパレットから指定する |
||||
|
リンク色 |
リンク色をパレットから指定する |
||||
|
リンク色: ホバー |
リンクのホバー時の色をパレットから指定する |
つづく
長くなったの一旦終了。
基本設定ー＞トップへスクロール以降の記事はこちら。
とても参考になりました!!ありがとうございます!
参考になった様で良かったです😁
Ocean WPの設定の仕方を日本語で書いてあるサイトが少ないのでとても助かりました。
ありがとうございます！
momo さん
コメントありがとうございます。
確かに日本語で説明してるサイトは少ないですね。お役に立てたようで何よりです。