【WordPress】SWELLのサイト基本設定!カスタマイザーから一発簡単!

本記事はSWELLのカスタマイザーからできる設定を記事にしています。

SWELLでは、ほとんどの項目をカスタマイザーで設定することが出来ます。

設定項目が多いため、カスタマイザーで迷子になる場合も多いです。

カスタマイザー迷子にならないよう、一つ一つ設定していきましょう!

画像

サイトの基本設定

サイトの基本設定から設定できる項目は3つです。

【Wordpress】SWELL:サイトタイトル

サイトのタイトルです。

検索されやすく、何のサイトなのかわかりやすい名前がいいと言われています。

キャッチフレーズ

サブタイトルのようなものです。

デフォルトでは「Just another WordPress site」になっています。

タイトルの補足のようなものを使いましょう。

また、サブタイトルの必要がない方は文字列を消せば非表示になります。

サイトアイコン

スマートフォンのアイコンや、ブラウザのタグに表示される画像です。

画像

NO IMAGE画像

記事にアイキャッチがない場合の画像です。

swellのデフォルトのno image画像はきれいですが、サイトにオリジナルを出すためにも変更しましょう。

記事全てにアイキャッチ画像を設定するなら不要です。

タイトル背景用デフォルト画像

少しわかりづらい設定項目です。

カスタマイザーには、

投稿ページのタイトル背景画像で「アイキャッチ画像」よりも優先させたい画像がある場合に設定してください。

と記載してあります。

これは記事を書く投稿画面の【swell設定】のhyouji上書き設定にある【タイトル背景画像】と【タイトル位置】に関係しています。

画像

通常では、こんな感じでアイキャッチの上に表示されるタイトルを更に上、に表示されるよう設定することができます。

タイトル背景用デフォルト画像を使用したデモ

この設定も、常にアイキャッチ画像を使用して通常通りに表示させるのであれば、設定する必要はありません。

目次

カラー設定

SWELLのカスタマイザーのカラー設定は全部で14箇所設定できます。

メインカラー

メインカラーで設定した色が反映される場所
  • 見出し全般
  • サイドバーのウイジェットの見出し
  • 検索ボタン
  • ぱんくず
  • ページの進む戻るボタン
  • コメント送信ボタン

などで反映されます。

cssで色を変更するのも可能です。

テキストカラー

サイト全体のテキストの色です。

背景色と被らないように設定しましょう。

リンク色

リンクが貼ってあるテキストの色です。

通常のテキストと同じ色を設定してしまうと、どこがリンクなのかわかりません。

テキストと差をつける色を設定する必要があります。

背景色

ヘッダーエリア、ピックアップコンテンツから下のサイト全体の背景色の設定です。

ヘッダーエリアとピックアップコンテンツエリアは別に指定しなければなりません。

特に分ける必要あったのかはわかりませんが、当サイトではピックアップコンテンツエリアと背景色は同一の色で設定しています。

画像

ヘッダー背景色

ヘッダーの背景色です。
画像

ヘッダー文字色

ヘッダーの文字色です。

ヘッダーの背景色と被らないように設定する必要があります。

ヘッダーバー背景色

ヘッダーバーとは、ヘッダーの上のキャッチフレーズやSNSのアイコンが載る場所です。

ヘッダーと合わせて、最初に閲覧者が見る玄関のようなものなので、きれいに整えたいところです。

ヘッダーバー文字色

ヘッダーバーのテキスト色になります。

SNSのアイコンもこのテキスト色が反映されます。

スマホメニュー文字色

スマホメニューは、スマートフォンで閲覧する際、横からスライド表示されるメニューを指します。

画像

このメニューの文字色がスマホメニュー文字色になります。

スマホメニュー背景色

スマホメニューの背景色です。

スマホメニュー背景の不透明度

スマホメニューの背景色をどのくらい透過率を設定できます。

0~1まで0.1ずつ10段階で設定できます。

スマホメニュー展開時に被せる色

このカラー設定が若干わかりづらいのですが、スマホメニューを出したときにサイト側に被せる色を設定できます。

スマホメニュー展開時に被せる色の不透明度

スマホメニュー展開時に被せた色の透過具合の設定です。

フッター背景色

フッターの背景色です。

フッター文字色

フッターの文字色です。

背景色と被らないように設定する必要があります。

【Wordpress】SWELL:デザイン・レイアウト

サイトの質感

「フラット」または「立体」を選べます。

ヘッダーエリア、サムネイル画像ボタンなどに影をつけるかどうかの設定になっています。

立体時は影が付き、奥行きが感じられます。

コンテンツの独立設定

背景と記事コンテンツを分けるかどうかの設定です。

「オン」「オフ」「オン(メインコンテンツのみ)」と「コンテンツを線で囲む」という設定ができます。

当サイトでは「オン(メインコンテンツのみ)」に設定してあります。

オフにすれば、コンテンツに背景色が適用されます。

パンくずリストの位置

パンくずリストの位置を「ページ上部」または「ページ下部」から設定できます。

ページ上部の場合、記事コンテンツのヘッダーの下に位置し、ページ下部であれば、フッターの上に位置されます。

ページ上部

画像

ページ下部

画像

また、「パンくずリストの背景効果を無くす」のチェックを外すと、背景にグレー味がかかります。

サイトの質感を立体設定している場合、内側に影がかかる効果が出ます。

サイドバーの設定

「トップページにサイドバーを表示する」「投稿ページにサイドバーを表示する」「固定ページにサイドバーを表示する」「アーカイブページにサイドバーを表示する」設定ができます。

それぞれ、読んで字のごとく、サイドバーの表示設定です。

サイドバーの見出しデザイン

「下線」「横線」「塗り」の3種類から設定できます。

カラーはメインカラーが主体となります。

ページャーの設定

ページャーとは、数字で表示されたりといったページを切り替えるエリアを言います。
画像

ページャーの形を丸か四角、ページャーのデザインで枠線付きか背景をグレーにするかの合計4パターンから設定できます。

フォント設定

ベースとなるフォントの設定です。

游ゴシック、ヒラギノゴシック>メイリオ、Noto SansJP、明朝体から選ぶことが出来ます。

後はフォントサイズを選ぶことが出来ます。

そんなに迷うところではないと思います。

今記事のまとめ

今回は、

  • サイト基本設定
  • カラー設定
  • デザイン・レイアウト設定

について記事にしました。

Swellはカスタマイザー内で、ほぼ設定が完了するため、そんなに迷うことはないかと思います。


ボタンをちょっと改造しました!
\おしゃれなサイトを作ろう/

よかったらシェアしてね!
目次
閉じる