WordPress OceanWPテーマのカスタマイズ・基本設定の全体のスタイルからページタイトルまで ~その2~ | そう備忘録

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

OceanWPの続き

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

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

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

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

今回の記事の範囲(全体のスタイル~ページタイトル)

基本設定

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

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

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

全体のスタイル

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

全体のスタイル 設定

スタイルの設定場所

スタイルの設定場所を指定する(のだと思われる)

  • WP ヘッダー
  • カスタムファイル

の選択が可能でカスタムファイルを選択すると/var/www/wordpress/wp-content/uploads/oceanwp/にcustom-style.cssファイルが作成された

当方の知識不足もありカスタムファイルを指定する”意味・理由・メリット”はイマイチ分からなかった

メイン色

色パレットでメイン色を指定する

色パレット

メイン色の表示例

メイン色の表示例

メイン色のホバー

メニュー等にマウスオーバーした時の色を指定するのだと思われるが当方の環境ではどこに反映されるのかが分からなかった

もしかしたら選択したテンプレートによっては反映されるのかも。。。

メインボーダーの色

色パレットでメインボーダーの色を指定する

※位置が分かりやすいようにデフォルトの色から変えている

メインボーダーの色の表示例

メインボーダーの色 表示例

背景色

色パレットで背景色を指定する

背景色の表示例

背景色の例

背景画像

上記の背景色の部分に画像を指定する事ができる

背景画像の設定例

背景画像設定例

リンク色

色パレットでリンク色を指定する

※位置が分かりやすいようにデフォルトの色から変えている

リンク色の表示例

リンク色の表示例

リンク色 ホバー

色パレットでリンク色 ホバーを指定する

表示例は上記の”リンク色の表示例”を参照の事

一般設定

基本的なレイアウトやOGP(Open Graph Protocol)に関する設定を行う。

レイアウトスタイル

ページのレイアウトを以下の3種類から選択する。

  1. ワイド
  2. ボックス
  3. セパレート

選択したレイアウトにより設定可能な項目が異なる。

1.ワイド

レイアウトスタイル ワイド

ワイド レイアウトスタイル

メインコンテナーの幅 (px)

メインコンテナの幅をピクセルで指定する

コンテンツ幅 (%)

コンテンツ幅を%で指定する

サイドバー幅 (%)

サイドバー幅を%で指定する

2.ボックス

レイアウトスタイル ボックス

ボックス レイアウトスタイル

BOXED LAYOUT DROP-SHADOW

チェックをするとボックスに影がつく

Boxed Width (px)

ボックスの幅をピクセルで指定する

外側の背景

外側の背景色を色パレットで指定する

内側の背景

内側の背景色を色パレットで指定する

コンテンツ幅 (%)

コンテンツ幅を%で指定する

サイドバー幅 (%)

サイドバー幅を%で指定する

3.セパレート

レイアウトスタイル セパレート

セパレート レイアウトスタイル

外側の背景

外側の背景色を色パレットで指定する

内側の背景

内側の背景色を色パレットで指定する

コンテンツの余白

コンテンツの左右の余白をピクセルで指定する

ウィジェットの余白

ウィジェットの左右の余白をピクセルで指定する

メインコンテナーの幅 (px)

メインコンテナの幅をピクセルで指定する

コンテンツ幅 (%)

コンテンツ幅を%で指定する

サイドバー幅 (%)

サイドバー幅を%で指定する

3パターン共通

スキーママークアップを有効化

チェックをするとスキーマーマークアップ(検索エンジンに認識されやすくなるタグ)が有効になる

固定ページ

固定ページのレイアウトを

  1. 右サイドバー
  2. 左サイドバー
  3. 全幅
  4. 100%全幅
  5. BOTH SIDEBARS

の5パターンから指定する。

1.右サイドバー

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

右サイドバーレイアウト

右サイドバー 固定ページレイアウト

Mobile Sidebar Order

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

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

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

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

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

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

コンテンツのパディング

2.左サイドバー

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

左サイドバーレイアウト

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

右サイドバー 設定項目

3.全幅

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

全幅 レイアウト

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

全幅 設定項目

4.100%全幅

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

100%全幅

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

100%全幅 設定項目

5.BOTH SIDEBARS

サイドバーを2つ表示するパターン。

下記の例はサイドバー、コンテンツ、サイドバーの例

BOTH SIDEBARS

固定ページ  BOTH SIDEBARS 設定

両サイドバー: スタイル

2つのサイドバーとコンテンツの並び順を下記の3パターンから指定する

  1. コンテンツ、サイドバー、サイドバー
  2. サイドバー、コンテンツ、サイドバー
  3. コンテンツ、サイドバー、サイドバー

両サイドバー: コンテンツ幅 (%)

コンテンツ幅を%で指定する

下記のサイドバー幅と合わせて100%になるように設定する

両サイドバー: サイドバー幅 (%)

サイドバー幅を%で指定する

上記のコンテンツ幅と合わせて100%になるように設定する

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

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

前述のコンテンツのパディングと同様

OGP

OGP(Open Graph Protocol)※に関する設定。

※SNS(Facebook、Google+、etc)上でWEBの内容を画像やタイトル説明文付きで伝えるためのプロトコル。

タイトルやURL、概要、アイキャッチ画像、オブジェクトのタイプ等を指定する事より、シェアされた時にリッチに表示されてサイトへの誘引率が高まる。

OGP設定

OGP を有効化

こちらにチェックを入れて下記のTwitterユーザ名、FacebookページURL、Facebook App IDを指定するとOGPが有効になるのだと思うが検証できていない。

Twitter ユーザー名

Twitter ユーザー名

Facebook ページ URL

Facebook ページ URL

Facebook App ID

Facebook App ID

アプリIDについてはこちら

ページタイトル

ページタイトルに関する設定を行う。

ページタイトル 設定

表示

ページタイトルを表示する端末の種類を制御できる

  1. 全ての端末で表示
  2. タブレットで非表示
  3. モバイルで非表示
  4. モバイルとタブレットで非表示

の4パターンから選択可能

ページタイトルは結構スペースをとるのでモバイルの時は非表示で良いのかも知れない

固定ページの場合

固定ページのページタイトル

投稿ページの場合は記事のタイトルが非表示になるわけでは無い

投稿ページのページタイトル

見出しタグ

ページタイトルの見出しタグを指定する

H1~H6、div、span、pなどのタグが指定できるが残念ながら当方の環境では表示が変わらなかった

Chromeのデバッグモードで確認した所、タグ自体は変更されているのだがタイポグラフィー>見出しで設定したフォントや色が反映されない

下記のスタイルの設定とコンフリクションしているようにも思えるのだが解決策をご存知の方はコメントを頂けるとありがたいです

見出しタグ

スタイル

ページタイトルのスタイルを指定する

  1. デフォルト
  2. 中央寄せ
  3. 中央寄せ・ミニマル
  4. 背景画像
  5. 非表示

の5パターンが設定可能で選択したスタイルによって設定可能な項目が異なる

デフォルト

タイトルスタイル デフォルト

中央寄せ

タイトルスタイル 中央寄せ

中央寄せ・ミニマル

タイトルスタイル 中央寄せ・ミニマル

背景画像

タイトルスタイル 背景画像

非表示

タイトルスタイル 非表示

パディング (px)

タイトルの上下のパディングをピクセルで指定する。

デフォルト、中央寄せ、中央寄せ・ミニマル、背景画像、非表示で指定可能

但し、非表示の時は指定をしても意味が無い

背景色

タイトルの背景色をパレットから指定する

タイトル背景色

デフォルト、中央寄せ、中央寄せ・ミニマル、非表示で指定可能

但し、非表示の時は指定をしても意味が無い

文字色

タイトルの文字色をパレットから指定する

デフォルト、中央寄せ、中央寄せ・ミニマル、背景画像、非表示で指定可能

但し、非表示の時は指定をしても意味が無い

画像

以下、背景画像を指定した時に設定可能な項目

画像ファイルを指定する

タイトル / パンくずリストの位置

トップページ以外でのタイトル、パンくずリストの位置を左、中央、右から選択する

下記は中央の時の表示例

タイトル、中央の表示例

位置

画像の位置

デフォルト、左上、上 中央寄せ、右上、中央左、中央、中央右、左下、下 中央寄せ、右下から選択する

下記はコーヒーカップの画像を右上に表示した時の例

画像 右上の表示例

スクロールの有無

スクロールを選択するとページのスクロールと一緒に画像もスクロールされる

固定を選択すると画像は固定されてページだけがスクロールされる

固定を選択した時の表示例

背景画像の固定の表示例

2020年6月1日追記

項目のラベル名が”添付ファイル”になっているが”スクロールの有無”の間違いと思われる

繰り返し

画像の繰り返しの指定

  • デフォルト
  • 繰り返しなし
  • 繰り返し
  • ヨコに繰り返し
  • タテに繰り返し

から選択が可能

サイズ

画像の表示サイズを指定する

  • デフォルト
  • 自動
  • カバー
  • 画像全体を表示

から選択が可能

高さ (px)

タイトルの高さをピクセルで指定する

オーバーレイ不透明度

オーバーレイ色(下記参照)の不透明度

下記の例は

  • オーバーレイ不透明度:0.3
  • オーバーレイ色:#dd9933
  • 背景画像:コーヒカップ画像を繰り返しで配置

オーバーレイ色に不透明度を指定する事により、背景写真に薄っすらと色を付けることができる

オーバーレイ不透明度

オーバーレイ色

オーバーレイ色をパレットで指定する

パンくずリスト

タイトルと一緒に表示されるパンくずリストの表示形式について指定する。

無償版でこれほど細かくパンくずリストの表示形式を指定できるテーマは珍しいと思う
タイトルの下にパンくずリストを表示している例

パンくずリスト表示例

パンくずリスト設定

パンくずリストを有効化

チェックをするとパンくずリストが表示される

項目タイトルを表示

チェックをするとパンくずリストに項目タイトルが表示される

項目タイトル

位置

  • タイトルの下
  • 全体の右

が選択可能

”全体の右”を選択時の表示例

パンくずリスト 全体の右

2020年6月9日 追記

以前は全体の右を選択すると右側に表示されたのだが現在はタイトルの下のまま変わらない

パンくずリスト区切り

セパレーターが指定可能

”@”の時の表示例

セパレーターを@に変更した時の表示例

ホーム項目

ホームの表示方法

  • アイコン
  • テキスト

が選択可能

アイコン

アイコンの例

テキスト

テキストの例

ホームページの翻訳

前述のホーム項目が”テキスト”の時は任意の文字列に変更する事ができる

”ホームページ”を指定した時の例

ホームページを指定した場合

「404見つかりません」の翻訳

404 Not Foundになった時のパンくずリストに表示するメッセージ

404 not foundの時にパンくずリストに表示されるメッセージ

「検索結果」の翻訳

検索ボックスで検索結果表示の際にパンくずリストに表示される文字列

デフォルトは”Search results for”が設定されている

”検索結果”を設定した時の表示例

”検索結果”を設定した例

投稿タクソノミー

投稿記事ページを表示している時のホーム項目の次に表示されるパンくずリスト

  • なし
  • カテゴリ
  • タグ
  • Blog Page

が指定可能

カテゴリの時は記事のカテゴリ、タグの時は記事のタグ※、Blog Pageの時はブログ用の固定ページのタイトルが表示される

※複数のタグの場合は一番最初のタグが表示される(のだと思う)

カテゴリーを選択した時の表示例

WordPress-OceanWP-109

商品タクソノミー

項目名からして商品一覧を表示している時のパンくずリストと思われるが未検証

WooCommerce(eコマースプラグイン)をインストールした時に反映される項目なのだと思われる

  • なし
  • カテゴリー
  • タグ
  • Shop Page

が指定可能

文字色

文字色をパレットから指定する

表示場所

パンくずリスト 色の設定例

区切り色

区切り色をパレットから指定する

リンク色

リンク色をパレットから指定する

リンク色: ホバー

リンクのホバー時の色をパレットから指定する

つづく

長くなったの一旦終了。

基本設定ー>トップへスクロール以降の記事はこちら

souichirou

やった事を忘れない為の備忘録 同じような事をやりたい人の参考になればと思ってブログにしてます。 主にレゴ、AWS(Amazon Web Services)、WordPress、Deep Learning、RaspberryPiに関するブログを書いています。 仕事では工場に協働ロボットの導入や中小企業へのAI/IoT導入のアドバイザーをやっています。 2019年7月にJDLA(一般社団法人 日本デイープラーニング協会)Deep Learning for GENERALに合格しました。 質問は記事一番下にあるコメントかメニュー上部の問い合わせからお願いします。

おすすめ

6件のフィードバック

  1. 匿名 より:

    とても参考になりました!!ありがとうございます!

  2. momo より:

    Ocean WPの設定の仕方を日本語で書いてあるサイトが少ないのでとても助かりました。
    ありがとうございます!

    • souichirou より:

      momo さん
      コメントありがとうございます。
      確かに日本語で説明してるサイトは少ないですね。お役に立てたようで何よりです。

  3. 匿名希望 より:

    ただ説明するだけでなく、これを選ぶとこんな表示の仕方になるとかこの部分とかといった感じに具体的なのでとても参考になります。
    用語の意味もわからない初心者の私にとって、非常にありがたいサイトとなってます。ありがとうございます。
    説明を見落としていたらすみませんなんですが、TOPページのみヘッダーを変えるということはできますか?

    • souichirou より:

      コメントありがとうございます。
      残念ながらOceanWPの標準的な機能では出来なそうですね。
      もしphpを書けるのであれば方法はありそうです。「WordPress トップページと固定ページでheaderやfooterを変える」辺りで検索すると幾つか方法が出てきますね。

質問やコメントや励ましの言葉などを残す

名前、メール、サイト欄は任意です。
またメールアドレスは公開されません。