ホーム » 外観

外観

外観

サイトの色や、記事の並び方、画面の上下にある案内部分の形を変えます。

こんなときに使います

たとえば:記事を横並びカードで見せたい、案内欄を右側に置きたい。

テーマが出力する一覧や共通部分の見た目を変更します。Elementorなどで独自に作った部分には、その設定が優先される場合があります。

操作する画面の開き方

WordPress管理画面の「OptiB」を開き、管理パネルの「テーマ設定」→「外観」へ進みます。

実画面で確認

画面を見ながら確認する

外観の実際の設定画面
外観の設定欄。画像を押すと拡大できます。表示中の値は撮影時の例です。
  1. 「配色」でライト/ダークを選びます。
  2. 「記事一覧のレイアウト」で記事の並び方を選びます。
  3. サイドバー・ヘッダーを調整し、下のフッター設定へ進みます。

どこを開く?

WordPress管理画面で「OptiB」→テーマ設定の「外観」を開きます。WordPressの「外観」→「カスタマイズ」→「外観・機能」からも同じ設定を変更できます。

変更する手順

  1. 「外観」カードで、明るい配色か暗い配色かを選びます。
  2. 記事一覧を「リスト」「カード」「メーソンリー」から選びます。メーソンリーは、高さが違う記事をタイルのように詰めて並べる形です。
  3. サイドバー(本文の横の案内)の位置と、スクロールしても画面に残すかを選びます。
  4. ヘッダー(ページ上部)の形と、画面上部に固定するかを選びます。
  5. 「フッター」カードで、ページ最下部の形と色を選び、「保存」を押します。

色を変えられないとき

フッターの背景色は、背景の決め方を「色を指定」にすると入力できます。「テーマカラー」のままでは入力した色は使われません。文字色は別に設定できます。

できたか確かめる

公開ページをパソコンとスマホで開き、文字が読めることと、案内が本文を隠していないことを確認します。「リセット」は、まだ保存していない変更を取り消す操作です。

v2.8.0の外観とページ作り

カスタマイザーの「外観」の欄は「外観・機能」に変わり、ヘッダー設定は独立した欄になりました。ヘッダーを変更する場合は、その独立した欄を開きます。

固定ページのヒーロー帯

固定ページに背景画像付きのタイトルとパンくずリストを大きく表示できます。該当する設定で画像と表示を調整し、公開ページで文字の読みやすさを確認します。

ホームページ用パターン

ブロックエディターのパターンから、ヒーロー、特徴リスト、お問い合わせへの誘導、会社案内、トップページ一式の5種類を選んで配置できます。挿入後は文章・画像・リンク先を自分のサイトの内容へ変更し、保存前にプレビューします。

画面幅に合わせた設定

セクション・ボックス・カラムは画面幅ごとの設定に対応しました。背景は白・薄いグレー・任意の色を選べ、文字サイズと太さの設定も増えました。各ブロックの設定欄で調整し、パソコンとスマホで余白や文字がはみ出さないか確認します。

フォトフレームの影も単独で設定できます。ブロックエディターの本文の見た目と幅は公開ページに近づきましたが、公開側のプレビューも確認してください。

ここまでできたら完了

  • 変更した配色・記事一覧・ヘッダーなどが公開ページへ反映された
  • スマホでも本文やメニューが隠れず、文字が読みやすい