SWELLの外観 > カスタイマイズの全項目をまとめました。
SWELL: 2.13.0
文字検索などで、目当ての機能を探してみてください。
目次
カスタマイズメニュー一覧
| メニュー名 | 機能の説明 |
|---|---|
| サイト全体設定 | フォントやカラー、ローディングアニメーションなど、サイト全体に影響する基本設定が行えます。 |
| ヘッダー | サイト上部（ロゴ、キャッチフレーズ、ヘッダーメニューなど）のデザインと表示設定を変更できます。 |
| フッター | サイト下部に表示されるフッターの構成やウィジェットの数・内容を設定します。 |
| サイドバー | サイドバーの表示・非表示や、どのページで表示するかなどの設定が行えます。 |
| トップページ | トップページ専用のレイアウトやコンテンツの表示設定が可能です。 |
| 投稿・固定ページ | 投稿・固定ページのデザインや、見出し・目次の表示方法などを設定します。 |
| アーカイブページ | カテゴリー・タグ・日付などのアーカイブページのレイアウトや表示形式をカスタマイズします。 |
| 記事一覧リスト | 投稿一覧やウィジェットで表示される記事リストのスタイルを変更します。 |
| SNS情報 | シェアボタンやフォローボタンの設定、SNSアカウントのリンクを設定できます。 |
| 高度な設定 | 表示条件付き設定やテーマ固有の詳細な挙動を制御できます。 |
| メニュー | ナビゲーションメニューの編集や位置の設定が可能です。 |
| ウィジェット | サイドバーやフッターなど、各ウィジェットエリアに表示する内容を設定できます。 |
| 追加 CSS | 独自のCSSを記述して、テーマのスタイルを柔軟にカスタマイズできます。 |
それでは、それぞれの中の項目を見ていきます。
WordPress設定
1. サイト基本情報
サイトの基本的な情報を設定するセクションです。
| 設定項目 | 内容 |
|---|---|
| サイトのタイトル | ブラウザのタイトルバーや検索エンジンに表示されるサイト名を設定します。 |
| キャッチフレーズ | サイトの簡単な説明文。テーマによってはヘッダーなどに表示されます。 |
| サイトアイコン | ファビコン（ブラウザタブやスマホのブックマークなどで表示されるアイコン）を設定します。サイズは 512×512px 以上の正方形が推奨されます。 |
2. ホームページ設定
トップページに何を表示するかを指定します。
| 設定項目 | 内容 |
|---|---|
| ホームページの表示 | トップページに「最新の投稿」または「固定ページ」を表示するか選択します。 |
| ホームページ | 表示する固定ページを選択します（上記で「固定ページ」を選んだ場合）。 |
| 投稿ページ | ブログ記事一覧として表示するページを選びます。通常は「ブログ」などのページを指定します。 |
サイト全体設定
基本カラー
サイトの配色を一括で指定できます。
| 設定項目 | 説明 |
|---|---|
| メインカラー | サイト全体のアクセントカラー（リンクやボタンなど）を指定します。 |
| テキストカラー | 通常の本文などの文字色を設定します。 |
| リンクカラー | リンク文字の色を個別に設定可能です。 |
| 背景色 | サイト全体の背景色を変更します。 |
基本デザイン
サイトの見た目を細かく調整できます。
■ サイト全体の見た目
| 設定項目 | 説明 |
|---|---|
| 全体の質感 | フラット化（立体感をなくす）や丸みの有無を設定します。 |
| コンテンツ背景を白にする | サイト内の各セクション背景を白で統一するかどうかを選べます。 |
■ フォント設定
| 設定項目 | 説明 |
|---|---|
| ベースフォント | サイト全体で使う基本フォントを選択できます（例：游ゴシックなど）。 |
| フォントサイズ（PC／モバイル） | 端末ごとにフォントサイズを調整可能。 |
| 字間（letter-spacing） | 文字間のスペースを標準・広めなどから選べます。 |
1. ベースとなるフォント（loos_customizer[body_font_family]）
サイト全体に適用される基本フォントを選択できます。フォントは主に日本語環境に適したものが揃っています。
| 選択肢の値 | 表示名 | 説明 |
|---|---|---|
yugo | 游ゴシック | Windows・Mac両方で視認性が良く、Webフォント非依存で高速表示可能。 |
hirago | ヒラギノゴシック > メイリオ | Macではヒラギノ、Windowsではメイリオが適用される優先設定。 |
notosans | Noto Sans JP | Googleが提供するモダンな日本語Webフォント。可読性が高くデザイン性も良好。 |
serif | 明朝体（Noto Serif JP） | 上品で落ち着いた印象を与える明朝体フォント。読み物中心のサイトに最適。 |
2. フォントサイズ（PC・タブ）
| 設定キー | loos_customizer[post_font_size_pc] |
|---|---|
| 説明 | PCおよびタブレット閲覧時に使用する本文のフォントサイズを指定します。 |
| 値 | 表示名 | 説明 |
|---|---|---|
14px | 極小(14px) | コンパクトな文字サイズ。情報量を多く見せたい場合に。 |
15px | 小(15px) | やや小さめの標準。 |
16px | 中(16px) | 推奨される標準サイズ。視認性とバランス良好。 |
17px | 大(17px) | 見やすさを重視する場合に。 |
18px | 極大(18px) | 高齢者向けサイトや読み物に適した大きさ。 |
3. フォントサイズ（スマホ）
| 設定キー | loos_customizer[post_font_size_sp] |
|---|---|
| 説明 | スマートフォン閲覧時の本文フォントサイズを、固定またはデバイス幅に応じた相対値で指定します。 |
| 値 | 表示名 | 説明 |
|---|---|---|
14px | 固定サイズ: 小 | 固定表示の小さめ文字。 |
15px | 固定サイズ: 中 | 一般的なスマホ文字サイズ。 |
16px | 固定サイズ: 大 | やや大きめの文字。 |
3.8vw | デバイス可変: 小 | 画面幅に対して小さめに反映される相対サイズ。 |
4vw | デバイス可変: 中 | 推奨設定。デバイスに応じて最適化。 |
4.2vw | デバイス可変: 大 | 相対的に大きなサイズで、可読性重視。 |
4. 文字間（字間 / letter-spacing）
| 設定キー | loos_customizer[site_letter_space] |
|---|---|
| 説明 | サイト全体における文字と文字の間隔（字間）を調整します。 |
| 値 | 表示名 | 説明 |
|---|---|---|
normal | 標準 (normal) | デフォルトの間隔で最も一般的。 |
.025em | 0.025em | わずかに広げることで読みやすさが向上。 |
.05em | 0.05em | 見出しやデザイン重視の場面で効果的。 |
.1em | 0.1em | 大きめの間隔で高級感や余裕のある印象に。 |
■ コンテンツ幅の設定
| 設定項目 | 説明 |
|---|---|
| サイト幅 | サイト全体の最大横幅（px）を指定します。 |
| 1カラム時のコンテンツ幅 | サイドバーなしのページでの横幅を指定します。 |
■ サブメニューの表示形式
| 設定項目 | 説明 |
|---|---|
| アコーディオン化 | サブメニューを開閉式にするオプションです。 |
■ ページ背景
| 設定項目 | 説明 |
|---|---|
| ページ背景画像（PC・SP） | ページ全体の背景画像をデバイス別に設定可能です。 |
NO IMAGE画像
| 設定項目 | 説明 |
|---|---|
| NO IMAGE画像 | アイキャッチ画像が未設定の記事に代替表示される画像を指定できます。推奨サイズは横幅1600px以上です。 |
タイトルデザイン
記事下のサブコンテンツやウィジェットのタイトル装飾を設定できます。
| 設定項目 | 説明 |
|---|---|
| サブコンテンツのタイトルデザイン | 「装飾なし」「下線」「縦線」などの装飾を選べます。 |
| サイドバー・フッター・スマホメニューのタイトル | 各エリアにおけるタイトルの装飾スタイルを個別に設定可能です。 |
コンテンツヘッダー
投稿や固定ページなどで、タイトルの表示位置を「コンテンツ上」に設定した場合の背景エリアを調整できます。
| 設定項目 | 説明 |
|---|---|
| タイトル背景用デフォルト画像 | アイキャッチが未設定の場合に使われる背景画像です。 |
| 画像フィルター | 背景画像に適用するエフェクト（ドット、グレースケール、ブラーなど）を選べます。 |
| カラーオーバーレイ | 背景画像に重ねる色の設定と透明度（opacity）を指定できます。 |
お知らせバー
画面上部に表示できるお知らせ用のバーを設定します。
| 設定項目 | 説明 |
|---|---|
| 表示位置 | 「非表示」「ヘッダー上部」「ヘッダー下部」から選択可能。 |
| 表示内容 | テキスト、リンク先URL、表示スタイル（流れるテキストやボタン付き）を設定。 |
| 背景効果 | 背景にグラデーションやストライプなどの視覚効果を加えられます。 |
| カラー設定 | バーの文字色・背景色を個別に設定できます。 |
パンくずリスト
ユーザーの現在位置を示すパンくずナビゲーションを設定します。
| 設定項目 | 説明 |
|---|---|
| パンくずの表示位置 | ページ上部または下部に表示するかを選べます。 |
| 「ホーム」の表記 | 最上位リンクの表記を自由に変更可能です。 |
| 背景効果の無効化 | デザインの背景効果（ぼかしやオーバーレイなど）を無効化できます。 |
ページャー
投稿一覧やアーカイブページ下部にある「ページ送り」ナビゲーションのデザインを変更します。
| 設定項目 | 説明 |
|---|---|
| ページャーの形 | ボタンの形状を「四角」または「丸」から選択。 |
| ページャーのデザイン | ボタンデザインを「枠線付き」または「背景グレー」から選べます。 |
スマホ開閉メニュー
スマートフォン表示時に使われる「ハンバーガーメニュー」のデザインや挙動を設定します。
| 設定項目 | 説明 |
|---|---|
| カラー設定（文字色・背景色・透明度） | メニューの開閉時に表示される背景や文字の色、透明度を指定します。 |
| オーバーレイカラー | メニュー展開時に画面全体にかかる暗い背景色とその透明度を設定できます。 |
| 表示設定 | メニューのタイトル名を変更したり、サブメニューをアコーディオン式にするか選べます。 |
下部固定ボタン・メニュー
モバイル向けに画面下部へ固定表示されるメニューやボタンを設定します。
■ 右下固定ボタン
| 設定項目 | 説明 |
|---|---|
| 目次ボタンの表示設定 | 「目次」があるページでのみ表示されます（非表示／表示）。 |
| ページトップボタン | 「トップへ戻る」ボタンの表示有無や形（円形など）を選択可能。 |
| 各ボタン下に表示するテキスト | ボタンの下に表示される補助ラベルを設定できます。 |
■ スマホ用固定フッターメニュー
| 設定項目 | 説明 |
|---|---|
| 固定フッターメニュー | モバイル下部に常時表示するナビゲーションバー。表示するボタンを選べます。 |
| ボタンラベルテキスト | 「メニュー」「検索」「トップへ」「目次」などのボタン名を自由に設定可能。 |
| カラー設定 | 固定フッターの背景色・文字色、背景の不透明度を指定できます。 |
ヘッダー設定
1. カラー設定
| 項目名 | 説明 |
|---|---|
| ヘッダー背景色 | ヘッダー全体の背景色を設定します。 |
| ヘッダー文字色 | ナビゲーションやロゴ周辺の文字色を設定します。 |
2. ヘッダーロゴの設定
| 項目名 | 説明 |
|---|---|
| ロゴ画像の設定 | サイトのロゴ画像をアップロードします。 |
| ロゴ画像サイズ | 表示するデバイス（PC・SP）ごとにロゴ画像の高さ（px）を指定できます。 |
3. レイアウト・デザイン設定
| 項目名 | 説明 |
|---|---|
| ヘッダーのレイアウト（PC） | ロゴとナビの配置を指定（例：ロゴの横にナビ） |
| ヘッダーのレイアウト（SP） | スマホ表示時のレイアウトを選択（例：ロゴ中央・メニュー左） |
| ヘッダー境界線 | 境界線の有無（影、線など）を選択可能 |
ヘッダーのレイアウト（PC）
| 表示名 | 解説 |
|---|---|
| ヘッダーナビをロゴの横に（右寄せ） | ロゴの右側にナビゲーションが横並びで表示され、右寄せになります。標準的な構成。 |
| ヘッダーナビをロゴの横に（左寄せ） | ロゴの左側にナビゲーションが横並びで表示され、左寄せになります。 |
| ヘッダーナビを下に | ロゴの下にナビゲーションが縦に表示されます（縦並び）。 |
| ヘッダーナビを上に | ナビゲーションをロゴの上に配置します。 |
ヘッダーのレイアウト（SP）
| 表示名 | 解説 |
|---|---|
| ロゴ：左 / メニュー：右 | よくあるスマホ構成。左にロゴ、右にハンバーガーメニュー。 |
| ロゴ：中央 / メニュー：右 | ロゴを中央にし、メニューは右に。バランス重視。 |
| ロゴ：中央 / メニュー：左 | ロゴを中央にし、メニューを左に。逆配置にしたいときに。 |
ヘッダー境界線
| 表示名 | 解説 |
|---|---|
| なし | ヘッダーと本文の境界線なし。 |
| 線 | 境界に細い線を表示。 |
| 影 | 境界に影を付けて立体感を出す（推奨設定）。 |
4. トップページでの特別設定
| 項目名 | 説明 |
|---|---|
| ヘッダーの背景を透明にするかどうか | トップページ限定でヘッダーを透過させるかどうかを設定できます。 |
ヘッダー背景の透明化
| 表示名 | 解説 |
|---|---|
| しない | 通常の背景色で表示。 |
| する（文字色：白） | 背景を透明にし、文字色は白に自動切替。 |
| する（文字色：黒） | 背景を透明にし、文字色は黒に自動切替。 |
※背景画像やメインビジュアルと重ねたい時に使います。
5. ヘッダーの追従設定
| 項目名 | 説明 |
|---|---|
| PC / SPでヘッダーを追従させる | スクロール時にヘッダーを固定表示するかを選択します。 |
6. ヘッダーバー設定（※PCのみ表示）
| 項目名 | 説明 |
|---|---|
| 背景色 / 文字色 | ヘッダーバーの配色設定（設定しない場合はメインカラーが適用） |
| 表示設定 | SNSアイコンの表示有無、ボーダー表示の有無を切り替えられます。 |
7. キャッチフレーズ設定
| 項目名 | 説明 |
|---|---|
| 表示位置 | ロゴの近くに表示など、位置を選べます。 |
| 表示有無 | 任意のキャッチフレーズ文を表示するかどうか。 |
表示位置の設定
| 表示名 | 解説 |
|---|---|
| 表示しない | キャッチフレーズを非表示に。 |
| ヘッダーバーに表示 | ヘッダーバー部分にキャッチフレーズを配置。 |
| ヘッダーロゴの近くに表示 | ロゴのそば（上下など）に表示（推奨）。 |
8. ヘッダーメニュー（グローバルナビ）設定
| 項目名 | 説明 |
|---|---|
| マウスホバーエフェクト | ホバー時の下線アニメーション（中央からなど）を選べます。 |
| ホバー時のラインの色 | メインカラー・テキストカラーから選択可能。 |
| ヘッダーメニューの背景色 | 背景の有無と色を指定可能（縦並び時などに有効） |
| サブメニューの背景色 | サブメニュー部分の背景色を設定します。 |
マウスホバーエフェクト
loos_customizer[headmenu_effect]
| 表示名 | 解説 |
|---|---|
| ラインの出現（中央から） | ホバー時に下線が中央から左右に伸びて出現。 |
| ラインの出現（左から） | 左側から下線が伸びて出現。 |
| ブロックの出現 | 背景色付きのボックス風に強調表示。 |
| 背景グレー | 背景色がグレーに変わる。落ち着いた印象。 |
| 背景明るく | 背景がホワイト寄りに。明るいデザインに。 |
9. ヘッダーメニュー（SP）設定
| 項目名 | 説明 |
|---|---|
| ループ設定 | メニューが画面下まで届かない場合などに、ループするか設定可能。 |
10. 検索ボタン設定
| 項目名 | 説明 |
|---|---|
| PC表示位置 | ヘッダーバーのアイコン内など、位置を選択可能。 |
| SP表示位置 | 「カスタムボタンにセット」など配置先を指定可能。 |
PCでの表示位置
| 表示名 | 解説 |
|---|---|
| 表示しない | 検索アイコンを表示しない。 |
| ヘッダーバー内のアイコンリストに表示 | PC表示のヘッダー上部（SNSアイコン等と並列）に設置。 |
| ヘッダーメニューに表示 | グローバルナビと一緒に検索アイコンを表示。 |
スマホでの表示位置
| 表示名 | 解説 |
|---|---|
| 表示しない | スマホでは非表示。 |
| カスタムボタンにセット | 任意のボタンに検索機能を割り当てます。 |
11. メニューボタン設定（SP）
| 項目名 | 説明 |
|---|---|
| アイコン下のテキスト | スマホで表示されるボタンにテキストを追加表示できます。 |
| 背景色 | メニューボタン背景色を指定可能。 |
12. カスタムボタン設定
| 項目名 | 説明 |
|---|---|
| アイコンクラス名 | 表示したいアイコンのクラスを指定（例：icon-search） |
| テキスト表示 | カスタムボタンのテキストを設定できます。 |
| 背景色 | ボタン背景色を指定可能。 |
| リンク先URL | 任意のリンク先を設定できます（検索ボタンと兼用不可）。 |
フッター設定
1. カラー設定
| 項目 | 説明 |
|---|---|
| フッター背景色 | サイト最下部にあるフッターエリア全体の背景色を設定します。 |
| フッター文字色 | フッター内に表示されるテキストやリンクの文字色を設定します。 |
| ウィジェットエリアの背景色 | フッターに配置したウィジェットの背景色を個別に指定できます。 |
| ウィジェットエリアの文字色 | ウィジェット内の文字やリンクなどの文字色を変更可能です。 |
2. コピーライト設定
| 項目 | 説明 |
|---|---|
| コピーライトのテキスト | フッターの最下部に表示する著作権表示のテキストを任意に変更できます。会社名や年号など自由記述。例：© 2024 MOTOKI合同会社 |
3. その他の設定
| 項目 | 説明 |
|---|---|
| 「フッター」と「フッター直前ウィジェット」の間の余白をなくす | 通常あるスペースをゼロにし、デザインをよりタイトに見せるための設定。 |
| フッターにSNSアイコンリストを表示する | フッター内にTwitterやInstagramなどのSNSアイコンを表示できます（SNS情報を別途設定しておく必要あり）。 |
サイドバー設定
サイドバーを表示するかどうか
各ページ種別ごとに、サイドバーを表示するか否かを選択できます。
| チェック項目 | 説明 |
|---|---|
| トップページにサイドバーを表示する | ホームページ（トップページ）にサイドバーを表示します。 |
| 投稿ページにサイドバーを表示する | 各投稿（ブログ記事など）にサイドバーを表示します。通常はここを有効にします。 |
| 固定ページにサイドバーを表示する | 会社概要などの静的ページにもサイドバーを表示可能です。 |
| アーカイブページにサイドバーを表示する | カテゴリー一覧・タグ一覧ページなど、アーカイブページにサイドバーを表示します。 |
サイドバーの位置
| 選択肢 | 説明 |
|---|---|
| 左 | サイドバーをコンテンツの左側に配置します。視線誘導が必要なレイアウトに有効です。 |
| 右（初期値） | 一般的な右側配置で、読みやすさとナビゲーションのバランスを保ちます。 |
トップページ設定
メインビジュアル
1. メインビジュアルの表示内容
| 選択肢 | 説明 |
|---|---|
| 表示しない | メインビジュアルを非表示にします。 |
| 画像 | 静止画像または画像スライダーを表示（画像が複数ある場合は自動スライドに）。 |
| 動画 | 背景に動画（MP4など）を表示。訴求力の高いビジュアルに。 |
2. 表示設定（画像/動画共通）
| 項目名 | 説明 |
|---|---|
| 周りに余白をつける | ビジュアル上下に余白を追加します。 |
| Scrollボタンを表示する | 下方向のスクロール誘導ボタンを表示します。 |
| メインビジュアルの高さ | 「数値で指定」「auto」などで、デバイス別に高さを設定できます。例：PC 624px、SP auto。 |
| ボタンの丸み | ビジュアル上のリンクボタンの角を「なし／少し丸める／丸める」から選べます。 |
| フィルター処理 | グレースケールやぼかしなど、ビジュアルに装飾効果を加えることができます。 |
| オーバーレイカラー | メインビジュアルに重ねる半透明の色を設定します。背景画像を暗くしたい時などに有効。 |
| 不透明度（opacity） | 0〜1 の間で透明度を指定。例：0.5で50%の透明度。 |
3. 各スライドの設定（画像が複数枚ある場合）
基本情報
| 項目名 | 説明 |
|---|---|
| スライド画像（PC/SP） | デバイスごとに異なる画像を指定可能。 |
| メインテキスト / サブテキスト | スライド画像上に表示する大見出し・補足説明。 |
| ブログパーツID | 既存のブログパーツを挿入可能。 |
| alt属性値 | SEO・アクセシビリティ対応のための代替テキスト。 |
| リンク先URL / ボタンテキスト | スライドにボタンリンクを設定可能（例：「詳しくはこちら」など）。 |
| テキストの位置 | 「左／中央／右」からテキストの配置位置を設定。 |
スタイリング
| 項目名 | 説明 |
|---|---|
| テキストカラー | テキストの文字色を指定。 |
| テキストシャドウカラー | 読みにくい背景に影を追加することで視認性を向上。 |
| ボタンカラー | 表示するボタンの背景色。 |
| ボタンタイプ | ボタンのデザイン。「白抜き」「ボーダー」から選択可能。 |
記事スライダー設定
1. 記事スライダーを設置するかどうか
| 項目 | 説明 |
|---|---|
| 設置しない / 設置する | 記事スライダーの表示有無を切り替えます。スライダーを使う場合は「設置する」を選択。 |
2. 記事のピックアップ方法
| 項目 | 説明 |
|---|---|
| ピックアップ対象 | 「カテゴリー」または「タグ」から絞ってスライド記事を選出可能。 |
| ピックアップ対象のID | 特定のカテゴリIDやタグIDを直接指定できます。未入力時は全記事から抽出。 |
| 並び順 | 表示順の選択。例：ランダム、最新順、古い順など（※ランダムが初期値）。 |
3. 記事の表示設定
| 項目 | 説明 |
|---|---|
| タイトルや日付などの表示位置 | 画像の下／画像の上／非表示など。 |
| カテゴリー表示位置 | タイトルの上下どちらに表示するか。 |
| 日付の表示設定 | 公開日、更新日の表示有無を選択可能。 |
| 著者の表示設定 | 投稿者名の表示を有効／無効にします。 |
4. スライド設定
| 項目 | 説明 |
|---|---|
| スライダーの枚数（PC / SP） | 一度に表示する記事カードの数（例：PC=3枚、SP=2枚など）。 |
| スライドのアニメーション速度 | アニメーションのスピード（ミリ秒）。例：1500 = 1.5秒。 |
| スライドの切り替わる間隔 | 自動で次のスライドに切り替わるまでの時間（ミリ秒）。例：5000 = 5秒。 |
| その他の表示設定 | 矢印ナビ、ページネーション、スライド間の余白などを選択可能。 |
5. その他の表示設定
| 項目 | 説明 |
|---|---|
| スライダーエリアのタイトル | 任意の見出しを設定できます（例：「注目の記事」など）。空白の場合は非表示。 |
| 上下の余白量 | スライダー周辺の余白サイズ（なし／小／中／大）。 |
| 左右の幅（PC時のみ有効） | 「フルワイド（全幅）」または「コンテナ幅」など選べます。 |
| スライダーエリアの文字色 | 画像上に文字を重ねる場合は白が推奨。 |
| 背景色 | スライダー全体の背景色を指定可能。 |
| 背景画像 | スライダー背景に画像を設定できます（例：パターン画像など）。 |
| 透明度 | 背景画像の透過度を 0〜1 の数値で指定（1 = 不透明、0.5 = 半透明）。 |
ピックアップバナー設定
トップページで「注目のリンク」や「おすすめサービス」などを視覚的に紹介するバナーエリアを設定できます。
バナーレイアウト
| 項目名 | 説明 |
|---|---|
| PCレイアウト | 固定幅 3列／4列／5列などから選択可能（例：固定幅 4列）。 |
| SPレイアウト | モバイルでの表示行数（例：固定幅 2列）を選択します。レスポンシブ対応。 |
バナーデザイン
| 項目名 | 説明 |
|---|---|
| バナータイトルのデザイン | 表示位置を「左上／中央／非表示」などから選べます。 |
| 内側に白線をつける | バナー画像の周囲に白い枠線を表示して強調する効果があります。 |
| バナー画像を少し暗くする | 画像にオーバーレイをかけ、テキストの視認性を高めるためのオプション。 |
その他の設定
| 項目名 | 説明 |
|---|---|
| トップページ以外の下層ページにも表示する | チェックを入れると、バナーが下層ページにも共通表示されます。 |
| Lazyloadを強制オフにする | SWELLのLazyload設定に関係なく、ここで使用する画像のみ即時読み込み（表示遅延なし）にできます。 |
その他
コンテンツ上の余白量
| 選択肢 | 説明 |
|---|---|
| なし | メインビジュアルや記事スライダー直下の余白をゼロにして密接なレイアウトに。 |
| 狭め | やや余白を持たせて詰まった印象に。 |
| 標準 | SWELL推奨の標準余白。 |
| 広め | 余白をしっかり取ってゆったりした印象に。 |
この設定は、「メインビジュアル／記事スライダー」と、その下のコンテンツの境界感に影響します。
投稿・固定ページ設定
タイトル設定
投稿ページ
| 項目 | 説明 |
|---|---|
| タイトルの表示位置 | 「コンテンツ上」または「コンテンツ内」を選択できます。 |
| タイトル横に表示する日付 | 公開日／更新日のどちらを表示するか設定。PC／SPで表示の有無を個別指定できます。 |
| タイトル下に表示する情報 | カテゴリー、タグ、カスタム投稿のタクソノミー、公開日、更新日、著者などの表示項目を細かく制御可能です。 |
固定ページ
| 項目 | 説明 |
|---|---|
| タイトルの表示位置 | 投稿と同様に「コンテンツ上」または「コンテンツ内」。 |
| コンテンツ内タイトルデザイン | 「装飾なし」「左に縦線」「下線」など装飾スタイルを選択できます。 |
PR表記設定
| 項目 | 説明 |
|---|---|
| PR表記の自動挿入 | 投稿・固定ページそれぞれに、広告・アフィリエイト記事であることを明記するPR表記を自動挿入するか設定可能。 |
| 表示タイプ | 小サイズ（テキストのみ）／大サイズ（文付き）を選べます。 |
| 表示するテキスト | 「広告」「当ページのリンクには広告が含まれています」など、任意の文言を設定可能。 |
アイキャッチ画像設定
| 項目 | 説明 |
|---|---|
| 本文の始めにアイキャッチ画像を表示 | 投稿／固定ページごとに本文冒頭にアイキャッチ画像を自動表示するか設定できます。 |
| 代替画像の表示 | アイキャッチ未設定時に「NO IMAGE画像」を代替表示するかどうか。 |
コンテンツのデザイン
見出しのデザイン設定
| 項目 | 説明 |
|---|---|
| 見出しのキーカラー | h2〜h4などの見出し装飾に使われる基本カラーを設定します。 |
| 見出し2のデザイン | 「帯」「下線」など視認性の高い装飾スタイル。 |
| 見出し3・4のデザイン | 「左に縦線」や「装飾なし」など。階層ごとの差別化が可能。 |
セクション見出しのデザイン
| 項目 | 説明 |
|---|---|
| セクション見出しキーカラー | 特定のパーツやセクションで使う見出し色を設定可能。 |
| デザイン | 「装飾なし」「下線」など、セクション用にカスタマイズ。 |
その他
| 項目 | 説明 |
|---|---|
| 太字に点線をつける | 太字強調時に視覚的な補足として点線を追加（pタグ直下のみ有効）。 |
| テキストリンクにアンダーライン | 通常のリンクに下線を加えて視認性向上。 |
目次の設定
| 項目 | 説明 |
|---|---|
| 表示設定 | 投稿・固定ページごとに目次の表示をON/OFFできます。 |
| 目次のタイトル | 「目次」など任意のタイトルを設定可能。 |
| デザイン | 「上下ボーダー」など装飾のスタイルを選べます。 |
| リストタグ | <ol>（番号付き）または <ul>（記号付き）を選択可能。 |
| 擬似要素の色 | リストの数字・ドットのカラー設定。 |
| 階層レベル | h2～h4など、どの見出しタグまで抽出するかを選択可能。 |
| 表示条件 | 指定した見出し数以上で目次を表示、最大表示数を超えると省略など詳細設定可。 |
| トグルボタン | 「もっと見る」「折りたたむ」などの開閉ボタンの文言も変更可。 |
| 広告設定 | 目次の前／後に広告コードを表示可能。目次がなくても広告を表示するか選べます。 |
SNSシェアボタン
| 項目 | 説明 |
|---|---|
| 表示位置 | 記事上部／記事下部／画面端固定から選択可能。 |
| 表示するSNS | Facebook, X（旧Twitter）, はてブ, Pocket, Pinterest, LINE から選択可。 |
| デザイン | ボタンの見た目（ブロック・ラウンドなど）やURLコピーの表示方法を設定。 |
| シェアメッセージ | 記事下シェアボタン上部に表示される文言（例：「よかったらシェアしてね！」） |
| X（Twitter）専用設定 | ハッシュタグ、via設定（@ユーザー名）などを個別に設定できます。 |
記事下エリア
SNSアクションエリア
| 項目 | 説明 |
|---|---|
| 表示ボタン | フォローボタンや「いいね」ボタンを表示可能。SNSごとに選択可。 |
前後記事リンク
| 項目 | 説明 |
|---|---|
| 表示設定 | 前後の記事リンクを表示／非表示にできます。 |
| サムネイル表示 | リンクにアイキャッチ画像を添えるかどうか。 |
| 同カテゴリー記事 | 同じカテゴリ内での前後記事リンクに限定するか選択可能。 |
| デザイン | 「シンプル」「カード型」などを選べます。 |
著者情報エリア
| 項目 | 説明 |
|---|---|
| 表示設定 | 著者情報の表示／著者ページへのリンクなどを設定可能。 |
| タイトル | 「この記事を書いた人」など任意のタイトルを設定できます。 |
関連記事エリア
| 項目 | 説明 |
|---|---|
| 表示設定 | 関連記事の表示ON/OFF、公開日・更新日表示の有無も調整可能。 |
| タイトル・レイアウト | 「関連記事」という見出しや、表示形式（カード型など）を設定。 |
| 並び順・取得方法 | 「新着順／人気順」などで並び替え、カテゴリ・タグ単位で取得元を選択可能。 |
コメントエリア
| 項目 | 説明 |
|---|---|
| 表示設定 | コメント欄のON/OFFやタイトル（例：「コメント」）を設定できます。 |
アーカイブページ設定
アーカイブページとは、カテゴリー・タグ・カスタムタクソノミーなどの一覧ページのことです。
タイトル設定
| 項目 | 説明 |
|---|---|
| 表示位置 | タイトルを「コンテンツ内」に表示するかどうかを選べます。※タームアーカイブ（カテゴリーページなど）のみ有効。 |
| コンテンツ内タイトルデザイン | 表示位置が「コンテンツ内」の場合に適用される装飾スタイルを選択可能（例：装飾なし／下線／左に縦線 など）。 |
| タームナビゲーション | 親ターム・子ターム間の階層ナビゲーションを表示するかどうか。 特に「カテゴリーページ」で有効にすると、上位カテゴリへの導線を自動表示できます。 |
記事一覧リスト設定
ブログトップや固定ページ内で表示される記事一覧のレイアウト・デザイン・情報表示を細かく調整できます。
リストのレイアウト設定
| 項目 | 説明 |
|---|---|
| リストレイアウト（PC / SP） | 「カード型」「リスト型」「サムネイル型」などを選択可能。 |
| 最大カラム数（PC / Mobile） | 1〜3カラム（モバイルは最大2カラム）で表示可能。横並びの数を調整できます。 |
| 「READ MORE」のテキスト | 「続きを読む」ボタンの文言を任意の内容に変更可能。 |
投稿情報の表示設定
| 項目 | 説明 |
|---|---|
| タイトルを隠す | サムネイル型レイアウトのとき、タイトル非表示にできます。 |
| 公開日・更新日・著者 | 表示する投稿情報を選択できます。 |
| 抜粋文の文字数（PC / SP） | 記事の概要文を表示するか、表示する場合は文字数を指定可能。 |
カテゴリーの表示設定
| 項目 | 説明 |
|---|---|
| 表示位置 | カード上部／タイトル下など（レイアウトにより制限あり）。 |
| 親子カテゴリの優先順位 | 「子カテゴリを優先して表示」などを選択可能。 |
| アーカイブでの表示設定 | 該当カテゴリを含む場合は優先的に表示されるよう制御できます。 |
サムネイル画像の比率設定
| 項目 | 説明 |
|---|---|
| カード型 / リスト型 / サムネイル型 | 各リスト形式ごとに「ワイド(16:9)」「黄金比」など比率を指定可能。 |
| ブログ型 / ブログカード型 | 内部リンクカードや投稿型でも画像比率を調整可能。 |
マウスホバー時の設定
| 項目 | 説明 |
|---|---|
| グラデーション色1・2 | マウスホバー時に画像上へ重ねるグラデーションカラーを左右で指定可能。 |
タブ切り替え設定（トップページ）
| 項目 | 説明 |
|---|---|
| 表示タブの追加 | 「新着記事」「人気記事」のタブを上部に追加。 |
| タームタブのID指定 | カテゴリーやタグのIDをカンマ区切りで指定可能。 |
| 表示名変更 | 「新着記事」「人気記事」など任意の名称に変更できます。 |
| タブデザイン | 「標準」「グレーボックス」「下線」から選択可能。 |
タブ切り替え設定（その他ページ）
| 項目 | 説明 |
|---|---|
| タームアーカイブ / 著者ページ | 各ページでも人気記事タブを追加可能。 |
投稿一覧から除外するカテゴリ・タグ
| 項目 | 説明 |
|---|---|
| 除外カテゴリ・タグのID | 新着記事・人気記事・一覧表示から特定カテゴリ・タグを除外できます。複数指定はカンマ区切り。 |
SNS情報
ここでは、各種SNSや外部サービスのページURLを設定することで、サイト内にSNSリンクボタンやフォローリンクを表示できます。
SNSリンク設定
| 項目名 | 内容・使用用途 |
|---|---|
| FacebookページURL | FacebookプロフィールやページURLを入力。 |
| X（旧Twitter）ページURL | TwitterアカウントのURLを入力。 |
| InstagramページURL | インスタグラムのプロフィールURL。 |
| TikTokページURL | TikTokアカウントのURL。 |
| 楽天ROOMページURL | 楽天ROOMの自分のページURL。 |
| LINEページURL | LINE公式アカウントのページURL。 |
| PinterestページURL | PinterestプロフィールURL。 |
| GitHubページURL | 開発者向けGitHubページのURL。 |
| YouTubeページURL | チャンネルまたはYouTube個人ページ。 |
| Amazon欲しいものリストURL | 商品紹介などに使うAmazonのリストURL。 |
| FeedlyページURL | ブログ購読者向けFeedlyのURL。 |
| RSSページURL | RSSフィード（例：https://サイトURL/feed）を手動で指定。 |
| お問い合わせページURL | お問い合わせページ（例：/contact）のURLを登録。 |
高度な設定
このセクションでは、HTMLの特定タグに対して直接コードを挿入することができます。アクセス解析タグ、フォントプリロード、JS処理など、柔軟なカスタマイズが可能です。
<head> タグ終了直前に出力するコード
| 用途 |
|---|
| SEO、フォント、CSS、OGPなどの追加に活用 |
| 例）プリロードタグ、Google Fonts、メタタグ、構造化データ など |
<body> タグ開始直後に出力するコード
| 用途 |
|---|
| 画面表示後すぐに処理させたい JavaScript やトラッキングコードの設置に使用。 |
| Google タグマネージャーやファーストビュー効果の設定などに最適。 |
<body> タグ終了直前に出力するコード
| 用途 |
|---|
| ページ読み込み後に実行するスクリプト（例：クリックイベント、トラッキング等）を記載可能。 |
注意事項
- 記述ミスがあるとサイト全体のレイアウトが崩れる可能性があります。必ず確認・バックアップのうえで実行しましょう。
- SWELLはセキュリティ面でも配慮されているため、無制限なコード挿入ではありませんが、ここを使うことで拡張性が高まります。
メニュー設定
グローバルナビゲーション・フッターメニュー・スマホ用開閉メニューなどの表示位置や内容を設定できます。
ポイント：
- WordPressの「外観 → メニュー」と連動
- 固定フッターメニューはスマホ専用で、表示位置やアイコン・ラベルを調整可能
ウィジェット設定
サイドバー、記事下、フッターなどに配置できるブロック・ウィジェットエリアを設定します。
ポイント：
- 「投稿ページ用サイドバー」や「フッターウィジェット」などエリアごとに内容を出し分け可能
- ブロックウィジェット対応で柔軟にコンテンツ配置可能
追加CSS
テーマのスタイルに対して、追加のCSSコードを直接書き込むエリアです。
ポイント：
- 子テーマを触らずに一時的なカスタマイズが可能
- メディアクエリやクラス指定など、細かな見た目調整に便利
