![](https://pasokon-kasegu.com/wp-content/uploads/2021/04/gimon.png)
SWELLを購入したけど、カスタマイズ設定の項目が多くて分からない。ブログも始めたばかりの初心者だし、なにがどうなのか分かりやすく知りたい!
こんな悩みを持つ方に、ぜひ読んでほしい記事です。
SWELL導入後の初期設定が完了したら、次はカスタマイズ設定でブログを整えていきましょう。
そのままよりも、設定して整えたほうがユーザビリティや信頼性がアップします。
- SWELLのカスタマイズ設定でできること
- SWELLの各種カスタマイズ設定方法
- 各種カスタマイズ設定時のポイント
迷わずサクサク設定できて、肝心の記事を早く書けるようになるので、ぜひ参考にしてみてください。
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35.png)
- ブログ実績:エンタメ系ブログ最高150万PV超&当ブログ最高10万PV超。
- 仕事:メインはWEBライター・ブログ運営・YouTube(1800人ほど)・Twitter運用代行も経験あり
- 趣味:筋トレ・食べ歩き・映画鑑賞など
SWELLカスタマイズ設定を初心者にも分かりやすく解説
\動画でじっくり見たい方はこちら/
まずはカスタマイズを開きましょう。
![SWELLカスタマイズ設定1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/3af31578bcbf89d3d4f1479b8651b94a.png)
![SWELLカスタマイズ設定1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/3af31578bcbf89d3d4f1479b8651b94a.png)
ここから下記のカスタマイズ設定ができます。
![SWELLカスタマイズ設定2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/edc6c2e410b7f081a59bb1885b793084.png)
![SWELLカスタマイズ設定2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/edc6c2e410b7f081a59bb1885b793084.png)
サクッと設定して、肝心なコンテンツ(記事)を書いていきましょう。
WordPress設定
WordPressの基本設定ができます。
![SWELLのWordPress設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/d3c6686487fd90ee17afb5b049d3277a.png)
![SWELLのWordPress設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/d3c6686487fd90ee17afb5b049d3277a.png)
サイト基本情報
サイトの基本的な情報を設定できます。
![SWELLサイト基本設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/4f0f58a36b63c3e38573b3b3de3a16d5.png)
![SWELLサイト基本設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/4f0f58a36b63c3e38573b3b3de3a16d5.png)
サイトのタイトル&サブタイトル(つけなくてもいい)は、好みでOKです。
サイトアイコンは設定しておいたほうがいいので、ロゴなど分かりやすい画像を設定しましょう。
サイトアイコンを選択から画像(512×512の以上の正方形)を選びましょう。
![SWELLサイトアイコン設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/3bf36d943fbfc690e15a21285df69083.png)
![SWELLサイトアイコン設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/3bf36d943fbfc690e15a21285df69083.png)
対比は1:1(正方形)が好ましいですが、下記のように16:9などでもトリミングで切り抜けます。
![SWELLサイトアイコン切り抜き](https://pasokon-kasegu.com/wp-content/uploads/2021/08/d39bcd81feedfc65a5a9e45f509fd81c.png)
![SWELLサイトアイコン切り抜き](https://pasokon-kasegu.com/wp-content/uploads/2021/08/d39bcd81feedfc65a5a9e45f509fd81c.png)
ホームページ設定
ホームを「最新記事表示(デフォルト)」か「固定ページで作成したオリジナルページ」が設定できます。
![SWELLホームページ設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/2a36eda31035b3cc63d31a0ab8c5e88e.png)
![SWELLホームページ設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/2a36eda31035b3cc63d31a0ab8c5e88e.png)
特にこだわりがなければ、イジる必要のない部分です。
ブログっぽくないホームにしたいなら、固定ページで下記のように作ることも可能です。
![fukulogのトップページ](https://pasokon-kasegu.com/wp-content/uploads/2021/08/cce6b555db31dc82b9c13d729cc6bc68.png)
![fukulogのトップページ](https://pasokon-kasegu.com/wp-content/uploads/2021/08/cce6b555db31dc82b9c13d729cc6bc68.png)
サイト全体設定
サイト全体に影響を及ぼす部分の設定ができます。
![SWELLサイト全体設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/d655735d1ae59dcb5e091b2509bd5b6b.png)
![SWELLサイト全体設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/d655735d1ae59dcb5e091b2509bd5b6b.png)
基本カラー
各種カラーが変更できます。
![SWELL基本カラー設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/6a244a8ee6a844d39fde91f8568e0d4e.png)
![SWELL基本カラー設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/6a244a8ee6a844d39fde91f8568e0d4e.png)
肝心のコンテンツが見づらくなければ、好みでOKです。
基本デザイン
サイト全体のデザイン部分の設定ができます。
![SWELL基本デザイン設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/fd784d16e7151d203bcb75a414a20ed1.png)
![SWELL基本デザイン設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/fd784d16e7151d203bcb75a414a20ed1.png)
フォント設定に関して、僕は下記のようにしています。
- 游ゴシック(表示スピードが少し上がるらしい)
- フォントサイズ可変:大(スマホからのアクセスが多いため)
他の項目は好みでOKです。
NO IMAGE画像
記事のアイキャッチを設定していない時に、代わりに表示させる画像です。
![SWELLのNOIMAGE画像設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/975bdac5b6e5d7618002db4b3e1662e4.png)
![SWELLのNOIMAGE画像設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/975bdac5b6e5d7618002db4b3e1662e4.png)
記事のアイキャッチを設定すれば、特にイジらなくてもいいです。
タイトルデザイン
サブコンテンツ(記事下の関連記事など)やサイドバー&フッターウィジェットの、タイトルデザインを変更できます。
![SWELLタイトルデザイン設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/4d7430705efe6a356c75c33cd97ac417.png)
![SWELLタイトルデザイン設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/4d7430705efe6a356c75c33cd97ac417.png)
好みでOKです。
コンテンツヘッダー
記事タイトルの表示位置を下記のように「コンテンツ上」に設定している場合の、各種デザインを設定できます。
![SWELLコンテンツヘッダー設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/9e93c75b6d5a1486d57c66dde9d81d48.png)
![SWELLコンテンツヘッダー設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/9e93c75b6d5a1486d57c66dde9d81d48.png)
設定してないならイジる必要ありません。
設定していても好みでOKです。
お知らせバー
上部に設置できるお知らせバーの設定ができます。
![SWELLお知らせバー設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/a077ff651be26dbe92b2bbc0db7e127f.png)
![SWELLお知らせバー設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/a077ff651be26dbe92b2bbc0db7e127f.png)
アピールしたいメッセージやリンク先があれば利用しますが、特に無ければスルーでOKです。
パンくずリスト
今どの階層にいるのかが分かる、パンくずリストの位置などを設定できます。
![SWELLパンくずリスト設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/e3d0fbe0753408aee8bb4fc37364d1e1.png)
![SWELLパンくずリスト設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/e3d0fbe0753408aee8bb4fc37364d1e1.png)
好みでOKです。
ページャー
カテゴリーページなど記事数が多い場合、記事下に表示される数字の設定ができます。
![](https://pasokon-kasegu.com/wp-content/uploads/2021/08/90f64f064b1dd8f67cab40ccc79f2705.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2021/08/90f64f064b1dd8f67cab40ccc79f2705.png)
好みでOKです。
スマホ開閉メニュー
スマホでメニューを開いた時の詳細設定ができます。
![SWELLスマホ開閉メニュー設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/02f9a28ba827ccc12f654b91f6ef88d2.png)
![SWELLスマホ開閉メニュー設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/02f9a28ba827ccc12f654b91f6ef88d2.png)
好みでOKです。
下部固定ボタン&メニュー
ページをスクロールすると出てくるボタンや、固定フッターメニューの設定ができます。
![SWELL下部固定ボタン&メニュー](https://pasokon-kasegu.com/wp-content/uploads/2021/08/8d8cd99e5abd642265fe55a25a28cf66.png)
![SWELL下部固定ボタン&メニュー](https://pasokon-kasegu.com/wp-content/uploads/2021/08/8d8cd99e5abd642265fe55a25a28cf66.png)
僕はユーザービリティを考えて、 目次とページトップ(画像右下の丸いアイコン2つ)を表示させています。
ちなみにFukulogでは 、スマホ用固定フッターメニューは表示していません。
ヘッダー追従でメニューが見れるようにしているので、上下で表示するのはくどいかなと思ったからです。
![SWELLヘッダー追従設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/9077380aeba6088d81de65fc8fa9e877.png)
![SWELLヘッダー追従設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/9077380aeba6088d81de65fc8fa9e877.png)
離脱率を考えると「ヘッダー追従」か「スマホ用フッターメニュー」どちらかは、表示させておいたほうがいいかなと思います。
ヘッダー設定
ヘッダー全般に関する設定ができます。
![SWELLヘッダー設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/4bb870efbbca64901a5d6a82369ac1c8.png)
![SWELLヘッダー設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/4bb870efbbca64901a5d6a82369ac1c8.png)
最低限設定しておいた方がいいのは「ヘッダーロゴとサイズ」「検索ボタンPC・SP表示」くらいでOKです。
検索ボタンは好みもありますが、表示されていた方がユーザビリティアップにつながると思います。
![SWELLヘッダー検索設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/db5de6d4c92540a0dafb95f3f2bd7db7.png)
![SWELLヘッダー検索設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/db5de6d4c92540a0dafb95f3f2bd7db7.png)
あとは好みでOKです。
フッター設定
フッター全般の設定ができます。
![SWELLフッター設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/4e8c82d12b3a44d8d68c8ca3c01ad301.png)
![SWELLフッター設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/4e8c82d12b3a44d8d68c8ca3c01ad301.png)
コピーライトのテキスト入力(例:西暦+ブログ名)はしておきましょう。
あとは好みでOKです。
サイドバー設定
サイドバー表示の有無を設定できます。
![SWELLサイドバー設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/abc6c3c646219e613af91ee83582498c.png)
![SWELLサイドバー設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/abc6c3c646219e613af91ee83582498c.png)
僕は記事に集中してもらいたいのと、スマホ閲覧が多いのでサイドバーの必要性を感じなくなり表示させていません。
何が正解というわけでもないので、自身の考えで設定してみてください。
トップページ設定
トップページ上部のコンテンツ部分の設定ができます。
![SWELLトップページ設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/4c9c66c3be5179a0b4934eaec7eb9566.png)
![SWELLトップページ設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/4c9c66c3be5179a0b4934eaec7eb9566.png)
それぞれ解説していきます。
メインビジュアル
トップに画像や動画などを設定できます。
![SWELLメインビジュアル設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/a24f7a7c36648963ea3aa22bf5bbc1d7.png)
![SWELLメインビジュアル設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/a24f7a7c36648963ea3aa22bf5bbc1d7.png)
メインビジュアルでは、SWELL公式サイトのような「なんだか凄いぞ」って感じる演出も可能です。
僕も以前は画像を設定していましたが、必要性を感じなくなり今は設定していません。
デザインにこだわる公式サイトやジャンルであれば、設定するのはありかなと思います。
記事スライダー
トップにスライダー形式で記事を表示できます。
![SWELL記事スライダー設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/9378313ab783491ee9969b46cfdca562.png)
![SWELL記事スライダー設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/9378313ab783491ee9969b46cfdca562.png)
スライダースピード・表示数・デザインなど細かく設定できますが、僕は必要性を感じないのでスライダー自体設定していません。
これも好みでOKです。
ピックアップバナー
トップや記事上部に、アピールしたいコンテンツを表示できます。
![SWELLピックアップバナー設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/01027fba5fb3dc5ef3fed526723c8387.png)
![SWELLピックアップバナー設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/01027fba5fb3dc5ef3fed526723c8387.png)
トップのみならず、投稿ページへの表示も可能な便利機能なのでオススメ。
一番下のトップページ以外の下層ページにも表示するにチェックを入れれば、全てのページに表示されます。
![SWELLピックアップバナー下層設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/1a7e8b43f0605fbd28be02656ae01d67.png)
![SWELLピックアップバナー下層設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/1a7e8b43f0605fbd28be02656ae01d67.png)
メニュー設定でピックアップしたいコンテンツを選択し「ピックアップバナー」を選択していれば表示されます。
![SWELLピックアップバナーメニュー設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/50d43a12d14f04b7ac6826508270e0fa.png)
![SWELLピックアップバナーメニュー設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/50d43a12d14f04b7ac6826508270e0fa.png)
僕は特に読んでもらいたい記事を設定しています。
デザインやレイアウトは好みでOKです。
その他
メインビジュアルや記事スライダーの下にコンテンツを設定している場合、余白幅を設定できます。
![](https://pasokon-kasegu.com/wp-content/uploads/2021/08/5fa89032868b00cc9e8786df59c90cf3.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2021/08/5fa89032868b00cc9e8786df59c90cf3.png)
設定していても、こだわりがなければ特にイジる必要はないです。
投稿・固定ページ設定
投稿&固定ページの詳細設定ができます。
![](https://pasokon-kasegu.com/wp-content/uploads/2021/08/4d08e49cf7ff25b239cece0f32b56408.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2021/08/4d08e49cf7ff25b239cece0f32b56408.png)
それぞれ解説していきます。
タイトル
タイトルの位置やデザイン、表示する情報などを設定できます。
![SWELLタイトル設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/df59be82b9af5b6e3501c88107137038.png)
![SWELLタイトル設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/df59be82b9af5b6e3501c88107137038.png)
タイトルの表示位置をコンテンツ上にすると、下記のように目立つ感じになります。
![](https://pasokon-kasegu.com/wp-content/uploads/2021/08/d86ee74b41f5991bc50294d9bfab0927.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2021/08/d86ee74b41f5991bc50294d9bfab0927.png)
あとは好みですが、個人的に更新日の表示は必要だと思っています。
公開日だけだと、更新してもユーザーに新しい情報だと伝わりづらいからです。
アイキャッチ画像
アイキャッチ画像の表示の有無を設定できます。
![SWELLアイキャッチ画像設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/dcbfbc009463a945c5cc741b10808cc4.png)
![SWELLアイキャッチ画像設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/dcbfbc009463a945c5cc741b10808cc4.png)
一般的に固定ページは必要なく、投稿ページのみ表示すればOKです。
コンテンツのデザイン
見出し・太字・テキストリンクの設定ができます。
![SWELLコンテンツのデザイン設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/557a848cd01fb8e7fd77639ed3d4758b.png)
![SWELLコンテンツのデザイン設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/557a848cd01fb8e7fd77639ed3d4758b.png)
基本的に好みでOKですが、テキストリンクにアンダーラインを入れたほうが分かりやすいかなと思います。
![SWELLテキストリンク設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/ec4d6e22c726fa37d2a742c6e796c5f6.png)
![SWELLテキストリンク設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/ec4d6e22c726fa37d2a742c6e796c5f6.png)
目次
目次のデザインや表示範囲、広告位置の設定ができます。
![SWELL目次設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/be7d31ac4e8b1611dc396be607d50dce.png)
![SWELL目次設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/be7d31ac4e8b1611dc396be607d50dce.png)
デザインは好みで変更し、あとは特にイジる必要はありません。
SNSシェアボタン
SNSシェアボタンの種類や表示位置、Twitterでシェアされた時のハッシュタグなどの設定ができます。
![SWELLのSNSシェアボタン設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/544714f00409f2632af74dd85d5e0bb3.png)
![SWELLのSNSシェアボタン設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/544714f00409f2632af74dd85d5e0bb3.png)
とりあえず、全てのシェアボタンにチェックでOKです。
ツイッター用の追加設定は、ハッシュタグをブログ名にして、via設定に自分のTwitterIDを入れています。
![SWELLのTwitter用の追加設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/1b86d43b8545c510319801f6913be832.png)
![SWELLのTwitter用の追加設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/1b86d43b8545c510319801f6913be832.png)
こうした、かゆいところに手が届く設定、さすがSWELLです。
記事下エリア
記事下エリアの様々な設定ができます。
![SWELL記事下エリア設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/bd7f1bc5336df6a511589841fa88983b.png)
![SWELL記事下エリア設定](https://pasokon-kasegu.com/wp-content/uploads/2021/08/bd7f1bc5336df6a511589841fa88983b.png)
SNSアクションエリアは、自身の運営しているSNSを関連付けすれば、下記のように専用エリアが出ます。
![SWELLアクションエリア](https://pasokon-kasegu.com/wp-content/uploads/2021/08/bd7f1bc5336df6a511589841fa88983b-edited.png)
![SWELLアクションエリア](https://pasokon-kasegu.com/wp-content/uploads/2021/08/bd7f1bc5336df6a511589841fa88983b-edited.png)
ここは設定をオススメしますが、あとは好みでOKです。
アーカイブページ
アーカイブページ(主にカテゴリー)のタイトルやデザイン設定ができます。
![SWELLアーカイブページ設定](https://pasokon-kasegu.com/wp-content/uploads/2021/07/79f79377a41d536e33817d9b0eb7a5c9.png)
![SWELLアーカイブページ設定](https://pasokon-kasegu.com/wp-content/uploads/2021/07/79f79377a41d536e33817d9b0eb7a5c9.png)
ここは特に設定する必要ないので、好みでOKです。
記事一覧リスト
記事一覧(カテゴリーページなど)の詳細設定ができます。
![SWELL記事一覧リスト設定](https://pasokon-kasegu.com/wp-content/uploads/2021/07/d6ddcf37e9974cc2a1ae60cfc81e06b3.png)
![SWELL記事一覧リスト設定](https://pasokon-kasegu.com/wp-content/uploads/2021/07/d6ddcf37e9974cc2a1ae60cfc81e06b3.png)
ここも好みですが、投稿情報の表示設定は「更新日を表示する」にもチェックを入れるのをオススメします。
![SWELL投稿情報の表示設定](https://pasokon-kasegu.com/wp-content/uploads/2021/07/a2eea62962d06f400eba9869cb6af45e.png)
![SWELL投稿情報の表示設定](https://pasokon-kasegu.com/wp-content/uploads/2021/07/a2eea62962d06f400eba9869cb6af45e.png)
SNS情報
各種SNSリンクなどを設定できます。
設定するとヘッダー上部、ウィジェットの「SNSリンク」を設定している部分にアイコンが出ます。
![SWELLのSNSアイコン](https://pasokon-kasegu.com/wp-content/uploads/2021/07/fb3e76e5a17e808daeae39809880fd5c.png)
![SWELLのSNSアイコン](https://pasokon-kasegu.com/wp-content/uploads/2021/07/fb3e76e5a17e808daeae39809880fd5c.png)
運営しているSNSリンクを入力するのと、下部にある「お問い合わせページ」リンクも入力しておきましょう。
![SWELLお問い合わせページリンク設定](https://pasokon-kasegu.com/wp-content/uploads/2021/07/1d6003c0dddd7e454eaa70370758f117.png)
![SWELLお問い合わせページリンク設定](https://pasokon-kasegu.com/wp-content/uploads/2021/07/1d6003c0dddd7e454eaa70370758f117.png)
高度な設定
headタグやbodyタグ内に、コードを入力することができます。
![SWELL高度な設定](https://pasokon-kasegu.com/wp-content/uploads/2021/07/7b9a43c0e8ea518be2aa8f2199602f3a.png)
![SWELL高度な設定](https://pasokon-kasegu.com/wp-content/uploads/2021/07/7b9a43c0e8ea518be2aa8f2199602f3a.png)
普段はイジる必要ありません。
FontAwesomeのアイコンを使用したいときは、headにコードを入力する必要があります。
詳細は下記の公式サイトで解説されていますので、必要な方は参考にしてください。
サクッとSWELLのカスタマイズ設定を完了させよう
必要な部分以外の設定は、サクッとおこなうのがポイントです。
特にブログ初心者にありがちなのが「デザインにこだわり過ぎる」こと。
こだわりすぎてもSEO効果は薄いので、サクッと終わらせてメインの記事を書いていきましょう。
コメント