【SWELL】初心者にも分かりやすく解説！テーマカスタマイザーの使い方【サイト全体設定】編

この記事では有料WordPressテーマ「SWELL」での「テーマカスタマイザー」の使い方を初心者にもわかりやすく詳しく解説します。SWELLでは設定の多くをテーマカスタマイザーで行いますが今回は「サイト全体設定」を中心に解説します。

サイト全体設定では、カラーやフォント背景画像などサイト全体にかかわるデザイン設定やお知らせバーの設定などが行えます。またパンくずリスト、ページャー、スマホデザイン設定などSWELLならではの細かい設定が可能なので簡単にオリジナルなサイト設計が行えます。最後までチェックしてみてください。

【SWELL】テーマカスタマイザー「サイト全体設定」でできること

サイト全体のデザインを考えるときに基本カラーやフォントなど全体の見た目にかかわる設定は非常に重要です。SWELLのテーマカスタマイザーではサイト全体の設定が「サイト全体設定」からまとめて行えるようになっています。また、ページャーや目次など細かい部分の設定も可能でサイトテーマに沿ったオリジナルなサイト設計が可能となっています。

「サイト全体設定」へは、WordPressの、「外観」>「カスタマイズ」<「サイト全体設定」をクリックします。

基本カラーやフォントはサイト全体の特徴を決定する要素となります。見やすさを考慮したうえでオリジナリティーあふれる魅力的なサイト設計を心がけるようにしましょう。

基本カラー

テーマカスタマイザーの「サイト全体設定」>「基本カラー」をクリックします。

「基本カラー」では「メインカラー」「テキストカラー」「リンクカラー」「背景色」が設定できます。カラーはサイト全体を特徴づける要素となるため見やすさやサイトテーマに沿って決定してください。
「メインカラー」を設定すると以下の項目が設定した色に一括で設定されます。

「テキストカラー」を設定すると以下の項目が設定した色に一括で設定されます。

ヘッダーに設置したメニューのテキストは「テキストカラー」設定では変更されませんので注意してください。

「リンクカラー」を設定するとURLリンクのカラーが設定した色に一括で設定されます。

「背景色」を設定するとサイト全体の背景色が設定した色に一括で設定されます。

基本デザイン

テーマカスタマイザーの「サイト全体設定」>「基本デザイン」をクリックします。

■サイト全体の見た目

「全体の質感」では、サイト全体の見た目のカスタマイズを行えます。デフォルトでは、アイキャッチやページャーに影があり、アイキャッチは正方形で表示されます。

「全体をフラットにする」にチェックを入れるとアイキャッチやページャーに表示されていた影を消してフラットにすることが可能です。いわゆる「フラットデザイン」と言われる立体感を排除したシンプルなデザインにすることができます。

「全体に丸みをもたせる」にチェックを入れるとアイキャッチの角が丸くなり、全体的に柔らかい印象のサイトが構築できます。

「コンテンツの背景を白にする」では、記事エリアやサイドバーのウィジェットエリアを白抜きにするかを選択できます。背景色を白にしている場合、もともと全体が白なので変化が確認できない設定になります。

「オフ」を選択時には、サイト全体が選択した背景色で表示されます。

「オン」を選択時には、記事エリアとサイドバーのウィジェットエリアが白抜きされます。

「オン（メインエリアのみ）」を選択時には記事エリアのみが白抜きされ、サイドバーのウィジェットエリアは設定した背景色で表示されます。

「オン」「オン（メインエリアのみ）」を選択した際には、「どのページに適用するか」という項目が追加され、白抜き設定をどのページに設定するか選択できます。

それぞれの選択肢で白抜きが設定される画面をまとめると以下の通りとなります。

どのページに適用するか	説明
全てのページ	全てのページ設定。
投稿ページのみ	投稿ページのみに設定。
固定ページのみ	固定ページのみに設定。ただし「ホームページ設定」で「投稿ページ」に設定した固定ページは除く。
投稿・固定ページのみ	投稿ページと固定ページに設定。ただしトップページや「ホームページ設定」で「投稿ページ」に設定した固定ページは除く。
フロントページ以外	トップページ以外のページに設定。

「さらに、コンテンツを線で囲む」にチェックを入れると白抜きしたエリアを線で囲むことができます。
線は薄いので背景色を設定している場合、線が細くてわかりずらくなるので使用する背景色を調整してください。また、線の色を選択することはできません。

■フォント設定

「フォント設定」ではサイト全体のフォント、文字サイズ、字間を設定できます。フォントはサイト全体の印象を決定付けるだけでなく、選択するフォントによりサイトスピードにも影響します。

「ベースとなるフォント」では次の4種類からフォントを選択できます。デフォルトでは「游ゴシック」が設定されています。

それぞれのフォントの違いを解説します。

フォント	特徴
游ゴシック	WindowsでもMacでも使用可能なウェブや印刷で美しく表示されるようにデザインされた角ゴシック体です。ビジネス用途など硬い雰囲気の文章に適しています。「游ゴシック」がない場合、Windowsでは「メイリオ」Macでは「ヒラギノ」が設定されます。
ヒラギノゴシック	Macに標準搭載されている角ゴシック体です。見やすく適度に文字間の余裕があり、長文でも読みやすいといった特徴があります。Windowsでは標準搭載されておらず使用できません。
メイリオ	Windowsに標準搭載されたフォントで見やすく、ディスプレイで見る際に優れた読みやすさが特徴です。Macでは標準搭載されておらず使用できません。
Noto Sans JP	GoogleとAdobeが共同開発したWebフォントです。美しく読みやすいフォントですが、使用するたびにWeb上からフォントをロードします。そのため、サイトの表示速度が遅くなる可能性があります。
明朝体（Noto Serif JP）	線の強弱や装飾があるWebフォントです。筆で書くような抑揚があり親しみやすい雰囲気が特徴です。Webフォントなので「Noto Sans JP」同様、フォントデータをダウンロードするためウェブページの表示に時間がかかるデメリットがあります。

サイト運営のテーマにもよりますが、フォントで迷ったら「游ゴシック」の選択をおすすめします。

「フォントサイズ（PC・Tab）」ではPCやタブレットで表示するフォントサイズを以下より選択できます。デフォルトでは「中（16px）」が設定されています。

「フォントサイズ（Mobile）」ではスマホで表示するフォントサイズを以下より選択できます。デフォルトでは「デバイス可変：中」が設定されています。

フォントサイズではそれぞれ「固定サイズ」「可変サイズ」を選択できます。

「字間（letter-spacing）」では文字と文字の間隔を調整できます。デフォルトでは「標準（normal）」が設定されています。

■コンテンツ幅の設定

「サイト幅」ではサイト全体の横幅を設定できます。デフォルトでは「1200」が設定されています。また「１カラム時の記事コンテンツ幅」では記事ごとの横幅を設定できます。デフォルトでは「900」が設定されています。

「１カラム時の記事コンテンツ幅」はサイドバーを非表示とした際に反映される設定となります。「サイト幅」を変更した際にはメインビジュアルとなる画像サイズを併せて確認するようにしてください。

■サブメニューの表示形式

「サブメニューをアコーディオン化する」にチェックを入れることで親子関係にあるメニュー表示をアコーディオン化することができます。サブメニューは、あらかじめWordPressの「外観」>「メニュー」から作成しておく必要があります。

アコーディオン化しない場合、サブメニューは階層型で表示されます。

アコーディオン化することで、下矢印をクリックすることでサブメニューの開閉を設定できます。

グローバルメニューのレイアウトによっては、階層型のサブメニューが表示されない場合があるので、必要に応じてアコーディオン化を検討してください。

■ページ背景

「ページ背景」ではサイト全体の背景をPCでは「ページ背景画像(PC)」から、スマホでは「ページ背景画像(SP)」から設定できます。画像を選択すると「画像サイズ(background-sizeの値)」「画像位置(X方向)」「画像位置(Y方向)」「その他の設定」の項目が追加で表示されます。

「ページ背景」を設定した際の追加項目のデフォルト設定は次の通りです。

追加項目	デフォルト設定
画像サイズ(background-sizeの値)	設定なし
画像位置(X方向)	左
画像位置(Y方向)	左
その他の設定	像ループを無効にしない（画像ループを無効にしない（チェックなし）
	固定表示しない（チェックなし）

「ページ背景(PC)」「ページ背景(SP)」項目で画像を選択するとサイト全体の背景画像として設定されます。今回は各設定の違いが分かりやすいようにサイトアイコンやプロフィール画像に最適な512px × 512px（アスペクト比1:1)の画像で解説していきます。

デフォルト設定では背景画像は画面全体を埋めるように繰り返し画像が表示されます。

「画像サイズ(background-sizeの値)」では、背景画像の画像サイズを以下の５つから選択できます。

画像サイズ(background-sizeの値)	説明
設定なし	元の画像サイズのまま表示。
横100%	横幅が100%となるように表示。
縦100%	縦幅が100%となるように表示。
contain	縦横比を保持したまま画像全体を表示。
cover	縦横比を保持したままページ全体に画像が広がって表示。

「横100%」に設定した場合、横幅が100％となるように画像サイズが調整されます。縦幅は記事の長さにより異なりますが繰り返し画像が表示されます。

「縦100%」に設定した場合、縦幅が100%となるように画像サイズが調整されます。縦幅に画像を調整するのでかなり拡大されて設定される可能性が高いです。

「contain」に設定した場合、縦横比を保持したまま画像全体を表示します。縦横比を保持したままなので、画像によっては、縦または横に余白が表示される可能性があります。

「cover」に設定した場合、縦横比を保持したままページ全体に画像が広がって表示されます。縦幅は記事の長さにより異なりますが繰り返し画像が表示されます。

「画像位置(X方向)」「画像位置(Y方向)」表示位置を指定できます。

「その他の設定」では、画像のループ有無と固定有無を設定できます。

「画像ループを無効にする」にチェックを入れると画像がルームで表示されなくなり「画像サイズ(background-sizeの値)」の設定によっては、余白が表示されます。

また、画像サイズの性質上、「画像サイズ(background-sizeの値)」を「縦100%」または「cover」と設定した場合、「画像ループを無効にする」のチェックによらず画像ループが無効化されます。

「固定表示する（スクロールで動かないようにする）」にチェックを入れるとスクロールを行っても画像が移動しない設定となります。

背景画像がスクロールのたびに切り替わると記事に集中できないということもあり、固定表示することをおすすめします。

NO IMAGE画像

テーマカスタマイザーの「サイト全体設定」>「NO IMAGE画像」をクリックします。

NO IMAGE画像を設定することでアイキャッチ画像を設定していない場合の画像を設定できます。

アイキャッチ画像の代わりとなるため、FacebookやX（旧Twitter）などで綺麗に表示させるサイズで作成する必要があります。おすすめはOGP画像で推奨している「1200px × 630px」（1.91：1）のサイズで作成することをおすすめします。

タイトルデザイン

テーマカスタマイザーの「サイト全体設定」>「タイトルデザイン」をクリックします。

「サブコンテンツのタイトルデザイン」では記事の下部にある「この記事を書いた人」のデザインを設定できます。デフォルトでは「左に縦線」が設定されています。

「サブコンテンツのタイトルデザイン」に「装飾なし」を選択した場合

「サブコンテンツのタイトルデザイン」に「下線」を選択した場合

「サブコンテンツのタイトルデザイン」に「左に縦線」を選択した場合

「サブコンテンツのタイトルデザイン」に「左右に横線」を選択した場合

■ウィジェットタイトル

「ウィジェットタイトル」ではサイドバーやフッタースタイルを設定できます。

「サイドバーのタイトルデザイン（PC）」ではPCで閲覧した場合のサイドバーのスタイルが設定可能です。デフォルトでは「下線」が設定されています。

「サイドバーのタイトルデザイン（PC）」に「下線」を選択した場合

「サイドバーのタイトルデザイン（PC）」に「左に縦線」を選択した場合

「サイドバーのタイトルデザイン（PC）」に「左右に横線」を選択した場合

「サイドバーのタイトルデザイン（PC）」に「塗り」を選択した場合

「サイドバーのタイトルデザイン（SP）」では、PCの設定に合わせるか、個別で設定するかを以下より選択可能です。デフォルトでは「- PC表示に合わせる -」が設定されています。

「フッターのタイトルデザイン」ではWordPressのウィジェット設定でフッターにウィジェットを設定している場合にデザインを設定可能です。デフォルトでは「下線」が設定されています。

「フッターのタイトルデザイン」に「装飾無し」を選択した場合

「フッターのタイトルデザイン」に「下線」を選択した場合

「フッターのタイトルデザイン」に「左右に横線」を選択した場合

「スマホメニュー内のタイトルデザイン」では、スマホメニュー画面のデザインを設定できます。デフォルトでは「塗り」が設定されています。

「スマホメニュー内のタイトルデザイン」に「下線」を選択した場合

「スマホメニュー内のタイトルデザイン」に「左に縦線」を選択した場合

「スマホメニュー内のタイトルデザイン」に「左右に横線」を選択した場合

「スマホメニュー内のタイトルデザイン」に「塗り」を選択した場合

コンテンツヘッダー

テーマカスタマイザーの「サイト全体設定」>「コンテンツヘッダー」をクリックします。

ここでの設定は、テーマカスタマイザーの「投稿・固定ページ」>「タイトル」より、「タイトルの表示位置」を「コンテンツ上」に設定している場合のみ有効となる設定です。

「タイトル背景用デフォルト画像」ではコンテンツ上のタイトルスペースに設定する背景画像を選択します。

「画像フィルター」では設定したタイトル背景用画像に加工を加えることができます。デフォルトでは「ドット」が設定されています。

設定した画像によってはタイトル文字が読みにくい場合があるので、背景画像を設定時には必ずチェックすることをおすすめします。

設定可能なフィルターは以下の通りです。

「画像フィルター」に「なし」を選択した場合

「画像フィルター」に「ブラー」を選択した場合

「画像フィルター」に「グレースケール」を選択した場合

「画像フィルター」に「ドット」を選択した場合

「画像フィルター」に「ブラシ」を選択した場合

「カラーオーバーレイの設定」ではタイトル背景画像に被せる色を選択できます。「画像フィルター」だけではタイトルの視認性が悪い場合など、設定することで改善することができます。

「オーバーレイカラーの不透明度」は設定したカラーオーバーレイの透過度を０から１の間で設定できます。デフォルトでは「0.2」が設定されています。

こちらの設定もタイトルの視認性改善に効果がある設定となります。

お知らせバー

テーマカスタマイザーの「サイト全体設定」>「お知らせバー」をクリックします。

「お知らせバー」とはサイト閲覧者に特に伝えたい重要な情報をアピールできる機能です。

期間限定情報や周知情報など一目でわかる機能となっています。

「お知らせバーの表示位置」では通知をどこに表示するか設定できます。「表示しない」を選択した場合、お知らせバーは表示されません。

「お知らせバーの表示位置」に「ヘッダー上部に表示」を選択した場合

「お知らせバーの表示位置」に「ヘッダー下部に表示」を選択した場合

■表示内容の設定

「お知らせバーの文字の大きさ」では表示する文字サイズを選択できます。デフォルトでは「普通」が設定されています。

「お知らせバーの文字の大きさ」に「小さく」を選択した場合

「お知らせバーの文字の大きさ」に「普通」を選択した場合

「お知らせバーの文字の大きさ」に「大きく」を選択した場合

「表示タイプ」ではお知らせバーにリンクを設定するか文字を右から左に流すかを選択できます。デフォルトでは「テキスト位置固定（バー全体がリンク）」が設定されています。

なお、リンクの設定と、テキストを流す設定は同時には設定できません。

「お知らせ内容」ではお知らせバーに表示するメッセージを設定します。

「リンク先のURL」では「表示タイプ」を「テキスト位置固定（バー全体がリンク）」「テキスト位置固定（ボタンを設置）」とした際のリンク先URLを指定できます。

「ボタンテキスト」では「表示タイプ」を「テキスト位置固定（ボタンを設置）」に設定した際に表示されるボタンのテキスト名を設定できます。

ボタンの色は基本カラーのメインカラーが設定されます。メインカラーを変更するには、テーマカスタマイザーの「サイト全体設定」>「基本カラー」から設定可能です。

また、ボタンの色のみを変更することも可能です。変更方法は「サイト全体設定」>「お知らせバー」>「■カラー設定」の「ボタン背景色」から設定できます。

■背景効果

「背景効果」では「グラデーション」「斜めストライプ」からお知らせバーの背景効果を設定可能です。デフォルトでは「なし」が設定されています。なお、「グラデーション」を設定するには、「グラデーション用の追加効果背景色」を設定しておく必要があります。

「背景効果」に「グラデーション」を選択した場合

「背景効果」に「斜めストライプ」を選択した場合

■カラー設定

「カラー設定」ではお知らせバーの文字色、ボタン背景色、お知らせバー背景色をそれぞれ設定可能です。

パンくずリスト

テーマカスタマイザーの「サイト全体設定」>「パンくずリスト」をクリックします。

パンくずリストとは、サイトを訪れたユーザーがサイト内のどこにいるのかを分かりやすく表示する「道しるべ」のような機能です。

「パンくずリストの位置」ではパンくずリストの表示位置を設定できます。

「パンくずリストの位置」に「ページ上部」を選択した場合

記事タイトルを「コンテンツ上」「コンテンツ内」とした場合に表示位置が異なります。

記事タイトルの位置は、テーマカスタマイザーの「投稿・固定ページ」>「タイトル」より、「タイトルの表示位置」にて設定可能です。

「パンくずリストの位置」に「ページ下部」を選択した場合

「「ホーム」の文字列」では、トップページを表す「ホーム」の表示文字を変更することが可能です。

「その他の設定」ではパンくずリストの「投稿ページ」の表示有無や背景効果の有無を設定できます。

「カテゴリー・タグの親に「投稿ページ」をセット」にチェックを入れると、ホームページの表示設定で「投稿ページ」に設定した記事をパンくずリストに表示することが可能です。

この設定は、テーマカスタマイザーの「WordPress設定」>「ホームページ設定」の「投稿ページ」に固定ページを設定している場合のみ有効となります。

「パンくずリストの背景効果を無くす」にチェックを入れると、パンくずリスト表示エリアの背景色がサイト基本カラーの背景色と同じになります。

例外として、「パンくずリストの背景効果を無くす」にチェックを入れていない場合でも以下設定時には、パンくずリストの背景効果がオフになります。

ページャー

テーマカスタマイザーの「サイト全体設定」>「ページャー」をクリックします。

ページャーとは、記事一覧の下部に表示される、ページ送り用のボタンのことを言います。

「ページャの形」「ページャのデザイン」を選択でき、組み合わせにより４パターンを設定できます。デフォルトでは「ページャの形」は「四角」が、「ページャのデザイン」では「背景グレー」がそれぞれ設定されています。

「ページャの形」に「四角」、「ページャのデザイン」に「背景グレー」を選択した場合

「ページャの形」に「四角」、「ページャのデザイン」に「枠線付き」を選択した場合

「ページャの形」に「丸」、「ページャのデザイン」に「背景グレー」を選択した場合

「ページャの形」に「丸」、「ページャのデザイン」に「枠線付き」を選択した場合

スマホ開閉メニュー

テーマカスタマイザーの「サイト全体設定」>「スマホ開閉メニュー」をクリックします。

ここでは、スマホでサイトを閲覧した際に使用する開閉メニューのカスタマイズが可能です。

■カラー設定

「文字色」では開閉メニュー内の文字色を変更できます。デフォルトでは黒（#333）が設定されています。また「背景色」では開閉メニュー内の背景色を変更できます。デフォルトでは白（#fdfdfd）が設定されています。

「背景の不透明度」では開閉メニューの背景色を透明にし後ろに隠れているサイトを見せることができます。不透明度の数値を下げることで背景が透過していきます。デフォルトでは「1」（まったく透明にしない）が設定されています。

不透明度の数値は 0 から 1 の間で小数点第一までの間で設定できます。

「メニュー展開時のオーバーレイカラー」では開閉メニューを開いた際のサイトの色を変更できます。デフォルトでは黒（#000000）が設定されています。

「カラー設定」で背景色の透過設定を行った際に、開閉メニューの文字が見えづらい際に、「メニュー展開時のオーバーレイカラー」で調整することも可能です。

「メニュー展開時のオーバーレイカラーの不透明度」では、「メニュー展開時のオーバーレイカラー」で設定した背景色の透明度を設定できます。不透明度の数値を下げることで背景が透過していきます。デフォルトでは「0.6」が設定されています。

不透明度に「1」を設定すると、まったく透過されなくなります。「カラー設定」で背景色の透過設定を行った際に、開閉メニューの文字が見えづらい場合に、「メニュー展開時のオーバーレイカラーの不透明度」で調整することが可能です。

■表示設定

「メインメニュー上に表示するタイトル」では開閉メニューに記載されるテキストを変更できます。デフォルトでは「MENU」と記載されています。

「サブメニューをアコーディオン化」に書かれている通り、PCとスマホ別々の設定は行えず、「サイト全体設定」 > 「基本デザイン」 < 「■サブメニューの表示形式」より「サブメニューをアコーディオン化する」にチェックを入れることで、設定変更が行えます。

下部固定ボタン・メニュー

テーマカスタマイザーの「サイト全体設定」>「下部固定ボタン・メニュー」をクリックします。

■右下固定ボタン

「目次ボタンの表示設定」では、目次がある記事に対して右下に目次ボタンを表示するか指定できます。デフォルトでは「非表示」が設定されています。

スマホ表示の場合、「■スマホ用固定フッターメニューの設定」で、「目次メニューを表示する」にチェックを入れた場合、表示されませんので注意してください。

「目次ボタンの表示設定」に「表示する（四角形）」を選択した場合

「目次ボタンの表示設定」に「表示する（円形）」を選択した場合

「目次ボタン下のテキスト」では設置した目次ボタンにテキストを設定することができます。

文字の入力制限はありませんが、四角形か円形で表示できる文字数が異なります。

「ページトップボタンの表示設定」では記事トップへ遷移するボタンを表示するか指定できます。デフォルトでは「表示する（円形）」が設定されています。

スマホ表示の場合、「■スマホ用固定フッターメニューの設定」で、「ページトップボタンを表示する」にチェックを入れた場合、表示されませんので注意してください。

「ページトップボタンの表示設定」に「表示する（四角形）」を選択した場合

「ページトップボタンの表示設定」に「表示する（円形）」を選択した場合

「ページトップボタン下のテキスト」では設置したページトップボタンにテキストを設定することができます。

文字の入力制限はありませんが、四角形か円形で表示できる文字数が異なります。

■スマホ用固定フッターメニューの設定

ここでは、スマホで記事を閲覧した際に表示される固定フッターメニューをカスタマイズできます。前提としてWordPressの「外観」＞「メニュー」にて「固定フッターメニュー」が設定される必要があります。

「特殊メニューボタンの表示設定では、スマホ用固定フッターに「メニュー開閉ボタン」「検索ボタン」「ページトップボタン」「目次ボタン」を表示するか設定できます。デフォルトでは、「メニュー開閉ボタンを表示する」のみチェックが入っています。

「メニュー開閉ボタンを表示する」にチェックを入れた場合

「検索ボタンを表示する」にチェックを入れた場合

「ページトップボタンを表示する」にチェックを入れた場合

「目次メニューを表示する」にチェックを入れた場合

「開閉メニューのラベルテキスト」ではメニュー開閉ボタンの表示テキストを変更できます。文字の入力制限はありませんが、表示できる文字数を超えるとレイアウトが崩れますので注意して下さい。

「検索ボタンのラベルテキスト」では検索ボタンの表示テキストを変更できます。文字の入力制限はありませんが、表示できる文字数を超えるとレイアウトが崩れますので注意して下さい。

「ページトップのラベルテキスト」ではページトップボタンの表示テキストを変更できます。文字の入力制限はありませんが、表示できる文字数を超えるとレイアウトが崩れますので注意して下さい。

「目次メニューのラベルテキスト」では目次メニューの表示テキストを変更できます。文字の入力制限はありませんが、表示できる文字数を超えるとレイアウトが崩れますので注意して下さい。

「固定フッターメニューの背景色」では、固定フッターメニューの背景色を設定できます。デフォルトでは白（#fff）が設定されています。

「固定フッターメニューの文字色」では、固定フッターメニューの文字色を設定できます。デフォルトでは黒（#333）が設定されています。

「固定フッターメニューの背景不透明度」では固定フッターメニューの背景色を透明にし後ろに隠れているサイトを見せることができます。不透明度の数値を下げることで背景が透過していきます。デフォルトでは「0.9」が設定されています。

まとめ

SWELLテーマカスタマイザーの「サイト全体設定」について解説しました。
ここでは設定できる項目が多岐にわたり、それぞれの設定がサイトのオリジナリティを決定づける要素となります。

各設定を行うと、どのような表示になるのかできる限り詳しく記載しました。
今回の記事がサイト運営の手助けになれば幸いです。