【HABONE】テーマ 色とデザインに関する設定項目

【HABONE】テーマ 色とデザインに関する設定項目
このページについて
WordPressテーマ【HABONE】のテーマカスタマイザーの中で、サイトのデザインと色を設定する機能の一覧と設定方法について紹介します。
サブメニュー設定名簡易説明
ヘッダーとフッターサイトのタイトルとキャッチフレーズを表示
ヘッダーテキスト色
ヘッダーテキスト輪郭色
フッターの文字色
フッターのリンク文字色
ヘッダー背景色
ヘッダー背景を透明にする
フッター背景色
ヘッダー画像
ヘッダー下部境界線色
ヘッダー下部境界線色を透明にする
フッター上部境界線色
ヘッダーとフッターの幅を画面サイズに合わせる
ヘッダー画像の高さ(パソコン)
ヘッダー画像の高さ(モバイル)
モバイルでは非表示モバイル環境ではフッターウィジェットを非表示にします
フッターの列数
ヘッダーレイアウトグローバルナビを画像下へ移動
ヘッダーテキストを画像内へ表示
ヘッダー画像の設定
ヘッダー画像をスライド表示
スライド画像1
スライド画像2
スライド画像3
本文とサイドバー本文とサイドバーの背景色
本文とサイドバーの文字色
本文とサイドバーの境界線色
コンテンツの境界線幅
全幅ページテンプレートの境界線色
本文のリンク文字色
サイドバーのリンク文字色
リンクの下線を非表示(本文)
リンクの下線を非表示(サイドバー)
アーカイブ一覧の背景色
アーカイブ一覧の文字色
コメントフォームの枠線色
コメントフォームの背景色
コメントフォームの文字色
その他ロゴ
サイトのタイトル
サイトのキャッチフレーズ
サイトアイコン
背景色
背景画像
サイトデフォルト画像
フォントサイズ
フォントの種類
モバイルメニューとコメント送信ボタンの背景色
モバイルメニューとコメント送信ボタンの文字色
「トップへ戻る」「ホームへ戻る」ボタンの表示
「トップへ戻る」「ホームへ戻る」ボタンの背景色
「トップへ戻る」「ホームへ戻る」ボタンのアイコン色
装飾コンテンツの文字色
装飾コンテンツのリンク色
ブロック要素の調整機能を有効にする
Pタグの上下マージン
figureタグの上下マージン
リストタグの上下マージン
リスト(内容)タグの上下マージン
H2タグの上下マージン
H3タグの上下マージン
H4タグの上下マージン

ページ上部へ戻る▲

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

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

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

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

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

ヘッダー画像の高さ

フッターの列数

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

ページ上部へ戻る▲

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

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

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

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

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

ページ上部へ戻る▲

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

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

ページ上部へ戻る▲

その他に関する設定方法

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

サイトデフォルト画像

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

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

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

フォントサイズ

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

フォントの種類

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

装飾コンテンツの文字色

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

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

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

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

ページ上部へ戻る▲

ブロック要素の調整

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

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

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

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

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