【画像解説】SWELLのカスタマイズ設定を初心者がサクッと完了させる記事

こんな悩みを持つ方に、ぜひ読んでほしい記事です。

SWELL導入後の初期設定が完了したら、次はカスタマイズ設定でブログを整えていきましょう。

そのままよりも、設定して整えたほうがユーザビリティや信頼性がアップします。

迷わずサクサク設定できて、肝心の記事を早く書けるようになるので、ぜひ参考にしてみてください。

SWELLカスタマイズ設定を初心者にも分かりやすく解説

＼動画でじっくり見たい方はこちら／

まずはカスタマイズを開きましょう。

ここから下記のカスタマイズ設定ができます。

サクッと設定して、肝心なコンテンツ（記事）を書いていきましょう。

個人の裁量が大きいメニュー・ウィジェット・追加CSSの解説は省いています。

WordPress設定

WordPressの基本設定ができます。

サイト基本情報

サイトの基本的な情報を設定できます。

サイトのタイトル＆サブタイトル（つけなくてもいい）は、好みでOKです。

サイトアイコンは設定しておいたほうがいいので、ロゴなど分かりやすい画像を設定しましょう。

サイトアイコンを選択から画像（512×512の以上の正方形）を選びましょう。

対比は1：1（正方形）が好ましいですが、下記のように16：9などでもトリミングで切り抜けます。

ホームページ設定

ホームを「最新記事表示（デフォルト）」か「固定ページで作成したオリジナルページ」が設定できます。

特にこだわりがなければ、イジる必要のない部分です。

ブログっぽくないホームにしたいなら、固定ページで下記のように作ることも可能です。

サイト全体設定

サイト全体に影響を及ぼす部分の設定ができます。

基本カラー

各種カラーが変更できます。

肝心のコンテンツが見づらくなければ、好みでOKです。

基本デザイン

サイト全体のデザイン部分の設定ができます。

フォント設定に関して、僕は下記のようにしています。

他の項目は好みでOKです。

NO IMAGE画像

記事のアイキャッチを設定していない時に、代わりに表示させる画像です。

記事のアイキャッチを設定すれば、特にイジらなくてもいいです。

タイトルデザイン

サブコンテンツ（記事下の関連記事など）やサイドバー＆フッターウィジェットの、タイトルデザインを変更できます。

好みでOKです。

コンテンツヘッダー

記事タイトルの表示位置を下記のように「コンテンツ上」に設定している場合の、各種デザインを設定できます。

設定してないならイジる必要ありません。

設定していても好みでOKです。

お知らせバー

上部に設置できるお知らせバーの設定ができます。

アピールしたいメッセージやリンク先があれば利用しますが、特に無ければスルーでOKです。

パンくずリスト

今どの階層にいるのかが分かる、パンくずリストの位置などを設定できます。

好みでOKです。

ページャー

カテゴリーページなど記事数が多い場合、記事下に表示される数字の設定ができます。

好みでOKです。

スマホ開閉メニュー

スマホでメニューを開いた時の詳細設定ができます。

好みでOKです。

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

ページをスクロールすると出てくるボタンや、固定フッターメニューの設定ができます。

僕はユーザービリティを考えて、 目次とページトップ（画像右下の丸いアイコン2つ）を表示させています。

ちなみにFukulogでは 、スマホ用固定フッターメニューは表示していません。

ヘッダー追従でメニューが見れるようにしているので、上下で表示するのはくどいかなと思ったからです。

離脱率を考えると「ヘッダー追従」か「スマホ用フッターメニュー」どちらかは、表示させておいたほうがいいかなと思います。

ヘッダー設定

ヘッダー全般に関する設定ができます。

最低限設定しておいた方がいいのは「ヘッダーロゴとサイズ」「検索ボタンPC・SP表示」くらいでOKです。

検索ボタンは好みもありますが、表示されていた方がユーザビリティアップにつながると思います。

あとは好みでOKです。

フッター設定

フッター全般の設定ができます。

コピーライトのテキスト入力（例：西暦+ブログ名）はしておきましょう。

あとは好みでOKです。

サイドバー設定

サイドバー表示の有無を設定できます。

僕は記事に集中してもらいたいのと、スマホ閲覧が多いのでサイドバーの必要性を感じなくなり表示させていません。

何が正解というわけでもないので、自身の考えで設定してみてください。

トップページ設定

トップページ上部のコンテンツ部分の設定ができます。

それぞれ解説していきます。

メインビジュアル

トップに画像や動画などを設定できます。

メインビジュアルでは、SWELL公式サイトのような「なんだか凄いぞ」って感じる演出も可能です。

僕も以前は画像を設定していましたが、必要性を感じなくなり今は設定していません。

デザインにこだわる公式サイトやジャンルであれば、設定するのはありかなと思います。

記事スライダー

トップにスライダー形式で記事を表示できます。

スライダースピード・表示数・デザインなど細かく設定できますが、僕は必要性を感じないのでスライダー自体設定していません。

これも好みでOKです。

ピックアップバナー

トップや記事上部に、アピールしたいコンテンツを表示できます。

トップのみならず、投稿ページへの表示も可能な便利機能なのでオススメ。

一番下のトップページ以外の下層ページにも表示するにチェックを入れれば、全てのページに表示されます。

メニュー設定でピックアップしたいコンテンツを選択し「ピックアップバナー」を選択していれば表示されます。

僕は特に読んでもらいたい記事を設定しています。

デザインやレイアウトは好みでOKです。

その他

メインビジュアルや記事スライダーの下にコンテンツを設定している場合、余白幅を設定できます。

設定していても、こだわりがなければ特にイジる必要はないです。

投稿・固定ページ設定

投稿＆固定ページの詳細設定ができます。

それぞれ解説していきます。

タイトル

タイトルの位置やデザイン、表示する情報などを設定できます。

タイトルの表示位置をコンテンツ上にすると、下記のように目立つ感じになります。

あとは好みですが、個人的に更新日の表示は必要だと思っています。

公開日だけだと、更新してもユーザーに新しい情報だと伝わりづらいからです。

アイキャッチ画像

アイキャッチ画像の表示の有無を設定できます。

一般的に固定ページは必要なく、投稿ページのみ表示すればOKです。

コンテンツのデザイン

見出し・太字・テキストリンクの設定ができます。

基本的に好みでOKですが、テキストリンクにアンダーラインを入れたほうが分かりやすいかなと思います。

目次

目次のデザインや表示範囲、広告位置の設定ができます。

デザインは好みで変更し、あとは特にイジる必要はありません。

SNSシェアボタン

SNSシェアボタンの種類や表示位置、Twitterでシェアされた時のハッシュタグなどの設定ができます。

とりあえず、全てのシェアボタンにチェックでOKです。

ツイッター用の追加設定は、ハッシュタグをブログ名にして、via設定に自分のTwitterIDを入れています。

こうした、かゆいところに手が届く設定、さすがSWELLです。

記事下エリア

記事下エリアの様々な設定ができます。

SNSアクションエリアは、自身の運営しているSNSを関連付けすれば、下記のように専用エリアが出ます。

ここは設定をオススメしますが、あとは好みでOKです。

アーカイブページ

アーカイブページ（主にカテゴリー）のタイトルやデザイン設定ができます。

ここは特に設定する必要ないので、好みでOKです。

記事一覧リスト

記事一覧（カテゴリーページなど）の詳細設定ができます。

ここも好みですが、投稿情報の表示設定は「更新日を表示する」にもチェックを入れるのをオススメします。

SNS情報

各種SNSリンクなどを設定できます。

設定するとヘッダー上部、ウィジェットの「SNSリンク」を設定している部分にアイコンが出ます。

運営しているSNSリンクを入力するのと、下部にある「お問い合わせページ」リンクも入力しておきましょう。

高度な設定

headタグやbodyタグ内に、コードを入力することができます。

普段はイジる必要ありません。

FontAwesomeのアイコンを使用したいときは、headにコードを入力する必要があります。

詳細は下記の公式サイトで解説されていますので、必要な方は参考にしてください。

参考記事：SWELLで「Font Awesome」のアイコンを使う方法

サクッとSWELLのカスタマイズ設定を完了させよう

必要な部分以外の設定は、サクッとおこなうのがポイントです。

特にブログ初心者にありがちなのが「デザインにこだわり過ぎる」こと。

こだわりすぎてもSEO効果は薄いので、サクッと終わらせてメインの記事を書いていきましょう。