WordPress OceanWPテーマのカスタマイズ・基本設定の全体のスタイルからページタイトルまで～その２～

by souichirou · 公開済み 2019年6月10日 · 更新済み 2020年6月29日

OceanWPの続き

WordPressの海外製のテーマOceanWP（無料版）をインストールして試行錯誤した時の備忘録の２回目。

インストールからホームページ設定までは前回の記事を参照。

尚、OceanWPは設定項目が非常に多く、細かい設定ができるので複数の記事にまたがってしまっている。

今回は基本設定の中のから全体のスタイルからページタイトルまでの記事とする。

基本設定

ページ全体の色、タイトル、スクロールなどの基本的な動作についての設定を行う。

尚、初期設定ではメイン色がブルーで背景色が白に設定されていた。

これは前回の記事のセットアップウィザードにてテンプレートにブログを選択した事によりブログ向けの初期設定がされているのだと思われる。

全体のスタイル

メインの色や背景色を設定する。

スタイルの設定場所	スタイルの設定場所を指定する（のだと思われる） WP ヘッダーカスタムファイルの選択が可能でカスタムファイルを選択すると/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

モバイル時にはサイドバーとコンテンツが縦に並ぶので、その時の並び順

Content／Sidebar：コンテンツが上、サイドバーが下に表示される
Sidebar／Content：サイドバーが上、コンテンツが下に表示される

コンテンツのパディング (px)

コンテンツの上と下のパディングをピクセルで指定する

それぞれ別の値を設定する事も可能だがクリップマークを押すと上下同じ値でパディングされる

片方に数値を入力するともう片方にも同じ値が設定される

２．左サイドバー

左にサイドバー、右にコンテンツのパターン

設定可能な項目は右サイドバーと同様

３．全幅

サイドバーを表示せずに全幅でコンテンツが表示されるパターン

全幅の場合の設定可能な項目はコンテンツのパディングのみ

４．１００％全幅

全幅から更に左右の隙間を無くしたパターン

１００％全幅の場合の設定可能な項目はコンテンツのパディングのみ

５．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)	タイトルの高さをピクセルで指定する
オーバーレイ不透明度	オーバーレイ色（下記参照）の不透明度下記の例はオーバーレイ不透明度：０．３オーバーレイ色：#dd9933 背景画像：コーヒカップ画像を繰り返しで配置オーバーレイ色に不透明度を指定する事により、背景写真に薄っすらと色を付けることができる
オーバーレイ色	オーバーレイ色をパレットで指定する