「保護中」のコンテンツは近日中に開放していきます

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

SWELL初心者向けのカスタマイズ設定
あなた

SWELLを購入したけど、カスタマイズ設定の項目が多くて分からない。ブログも始めたばかりの初心者だし、なにがどうなのか分かりやすく知りたい!

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

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

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

この記事で分かること
  • SWELLのカスタマイズ設定でできること
  • SWELLの各種カスタマイズ設定方法
  • 各種カスタマイズ設定時のポイント

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

この記事を書いた人
とおる
  • ブログ実績:エンタメ系ブログ最高150万PV超&当ブログ最高10万PV超。ブログ売却も含め1年で1ブログのみ8桁収益経験
  • 仕事:メインはWEBライター・ブログ運営・YouTube(1800人ほど)・Twitter運用代行も経験あり
  • 趣味:筋トレ・食べ歩き・映画鑑賞など
目次

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

\動画でじっくり見たい方はこちら/

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

SWELLカスタマイズ設定1
ダッシュボード→外観→カスタマイズ

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

SWELLカスタマイズ設定2

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

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

WordPress設定

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

SWELLのWordPress設定

サイト基本情報

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

SWELLサイト基本設定

サイトのタイトル&サブタイトル(つけなくてもいい)は、好みでOKです。

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

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

SWELLサイトアイコン設定

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

SWELLサイトアイコン切り抜き

ホームページ設定

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

SWELLホームページ設定

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

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

fukulogのトップページ

サイト全体設定

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

SWELLサイト全体設定

基本カラー

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

SWELL基本カラー設定

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

基本デザイン

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

SWELL基本デザイン設定

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

  • 游ゴシック(表示スピードが少し上がるらしい)
  • フォントサイズ可変:大(スマホからのアクセスが多いため)

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

NO IMAGE画像

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

SWELLのNOIMAGE画像設定

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

タイトルデザイン

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

SWELLタイトルデザイン設定

好みでOKです。

コンテンツヘッダー

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

SWELLコンテンツヘッダー設定

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

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

お知らせバー

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

SWELLお知らせバー設定
ヘッダーメニューの下がお知らせバー

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

パンくずリスト

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

SWELLパンくずリスト設定

好みでOKです。

ページャー

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

好みでOKです。

スマホ開閉メニュー

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

SWELLスマホ開閉メニュー設定

好みでOKです。

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

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

SWELL下部固定ボタン&メニュー

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

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

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

SWELLヘッダー追従設定

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

ヘッダー設定

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

SWELLヘッダー設定

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

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

SWELLヘッダー検索設定

あとは好みでOKです。

フッター設定

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

SWELLフッター設定

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

あとは好みでOKです。

サイドバー設定

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

SWELLサイドバー設定

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

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

トップページ設定

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

SWELLトップページ設定

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

メインビジュアル

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

SWELLメインビジュアル設定

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

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

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

記事スライダー

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

SWELL記事スライダー設定

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

これも好みでOKです。

ピックアップバナー

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

SWELLピックアップバナー設定

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

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

SWELLピックアップバナー下層設定



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

SWELLピックアップバナーメニュー設定

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

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

その他

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

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

投稿・固定ページ設定

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

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

タイトル

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

SWELLタイトル設定

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

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

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

アイキャッチ画像

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

SWELLアイキャッチ画像設定

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

コンテンツのデザイン

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

SWELLコンテンツのデザイン設定

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

SWELLテキストリンク設定

目次

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

SWELL目次設定

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

SNSシェアボタン

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

SWELLのSNSシェアボタン設定

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

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

SWELLのTwitter用の追加設定

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

記事下エリア

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

SWELL記事下エリア設定

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

SWELLアクションエリア

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

アーカイブページ

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

SWELLアーカイブページ設定

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

記事一覧リスト

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

SWELL記事一覧リスト設定

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

SWELL投稿情報の表示設定

SNS情報

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

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

SWELLのSNSアイコン



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

SWELLお問い合わせページリンク設定

高度な設定

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

SWELL高度な設定

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

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

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

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

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

今回のまとめ
  • 必要な部分だけサクッと設定する
  • デザインなど好みの要素が強い設定はハマりすぎない
  • 設定し終わったら記事を書く
サクッとやろう

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

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

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

SWELL初心者向けのカスタマイズ設定

この記事が気に入ったら
フォローしてね!

役に立ったらシェアしてね!

コメント

コメントする

目次