ページ上部へ戻る▲

ヘッダーとフッターに関する設定方法

色については変更の度に右側プレビュー画面で変化を確認いただけますので、実際に操作を行ってみてください。

ヘッダー背景を透明にする

ヘッダー下部境界線色を透明にする

ヘッダーとフッターの幅を画面サイズに合わせる

ヘッダー画像の高さ

フッターの列数

フッター部分の列数を指定します。また、「モバイルでは非表示」を有効にすることで、パソコン表示時に入れたたくさんのフッター内情報がモバイル環境では表示されないようになり、モバイルフッターコンテンツの間延びを防ぐことができます。

ページ上部へ戻る▲

ヘッダーレイアウトに関する設定方法

この項目の設定により、サイトトップページのヘッダーについてテーマカスタマイザー上で以下のようなデザイン変更できます

• 固定画像（1枚固定の画像）を表示させる
• 固定画像の代わりに自動切換え（スライダー）画像を使う
• サイトタイトルとキャッチフレーズを画像の中へ表示させる（デフォルトは画像の上）
• グローバルメニューを画像（またはスライダー）の上、または下に表示（デフォルトは上）

画像スライダーについては、CWV(Core Web Vitals)への影響を考え、スライダー用のプログラム（Java Sctipt等）を使用せず、CSSのアニメーション効果のみで構成しています。

CSSで切り替えタイミングなどを指定していますので、スライド表示させる画像は3枚必要です（1.2枚では正常動作しません）

ページ上部へ戻る▲

本文とサイドバーに関する設定方法

色については変更の度に右側プレビュー画面で変化を確認いただけますので、実際に操作を行ってみてください。

ページ上部へ戻る▲

その他に関する設定方法

色については変更の度に右側プレビュー画面で変化を確認いただけますので、実際に操作を行ってみてください。

サイトデフォルト画像

OGPタグ、構造化データ、ヘッダーメタタグで、以下の場合に共通で使用する画像の設定をします。

1. トップページ・アーカイブページ
2. アイキャッチ画像のない固定ページ・投稿

ここで画像が未設定の場合、HABONEテーマのデフォルト画像が使用されます

フォントサイズ

サイト内の文字の大きさを指定します。本テーマではすべての文字列の表示に相対値を用いていますので、この値によって見出しその他すべての文字の大きさが比例して拡大縮小します。

フォントの種類

表示する文字の書体を設定します。

装飾コンテンツの文字色

本テーマの機能の１つである装飾コンテンツに対して、文字色の設定をします。

本文の背景色を暗くして、本文の文字色を明るくした場合に装飾コンテンツの文字が読みづらくならないようにします。

装飾コンテンツのリンク色

本文の背景色を暗くして、本文の文字色を明るくした場合に装飾コンテンツのリンク文字が読みづらくならないようにします。

ページ上部へ戻る▲

ブロック要素の調整

本テーマでは、転送量を減らす、ユーザーエージェントスタイルシート（ブラウザに付属しているデザイン）を有効活用するという観点から、できる限り固定的なデザイン要素を適用しないよう設計しています。

この項目では、「もう少し各ブロックの要素間に余裕（余白）」が欲しい場合のために、全投稿・固定ページへ一括して要素の上下マージン（余白）を設定できるようにしています。

ここで設定した内容は、デザインの崩れなどを防止するため、投稿及び固定ページの単独ページで、かつ、本文内のみ（投稿や固定ページ編集画面上で編集する範囲のみ）に適用されます。

また、ここで設定した内容はモバイル・パソコン両方のデザインに影響しますので、調整後は両方の環境で確認するようにしてください。

テーマカスタマイザー上で「機能を有効にする」のチェックを有効／無効にしても、即座に右側のプレビューには反映されません（このスイッチによってデザイン要素を出力するかどうかの判断をしているため）。チェックの入れ外し時には、一旦画面をリロードしていただくと反映されますのでご注意ください。