SWELLのおすすめカスタマイズ法を解説【ぶろなび風デザイン】

そんな疑問にお答えします。

2020年8月下旬にサイトのトップページを変更したところ、「SWELLを導入したのですが、ぶろなび風のデザインカスタマイズを知りたいという」DMを頂きました。

とういう事で、今回はSWELLを当ぶろなび風にカスタマイズする方法を画像付きでご紹介します。

当ブログでは「ミニマリスト風で居心地のいいWebサイト」を目指しており、TOPページのデザイン、フォント、アイコンなど細かい部分のクオリティを大切にしています。

SWELLを使用している人なら簡単にできるので、当ブログのデザインを参考にしてみてください。
（アイコンの作り方も解説していますが、これは外部のWebサイトで作成しているため、誰でも簡単に作れますよ）

それでは早速ご紹介していきます。

SWELLとはどんなテーマなのか

最初に簡潔にSWELLについてご説明します。

1. 値段：17,600円（税込み）
2. 販売元：株式会社LOOS
3. 複数サイト使用：個人・法人問わずOK

WordPressテーマとしては若干高めな価格です。
しかし、SWELLにはその価格に見合うだけの価値があると思っています。

続いてSWELLの魅力を5つご紹介します。

1. ブロックエディタの使いやすさ
2. プラグインなしでサイト高速化を実装
3. カスタマイズ性の高さ
4. 使用サイトの制限一切無し
5. 広告タグ管理機能

メインとしてはこんなところです。

WordPressテーマとしては比較的新しく、今も常にアップデートされ続けています。
開発者さんと繋がれるコミュニティーも存在するので、不明点があったら何でも質問できますよ。

実際にSWELLを導入して使ってみた感想については、下記記事でまとめていますので導入を検討している方はチェックしてみてください。

次の章からは具体的なカスタマイズ方法を紹介していきますね。

カスタマイズその①：トップページ

最初にトップページのカスタマイズ方法について解説していきますね。

１：固定ページの作成

ぶろなびのトップページは、記事ページではなく固定ページにて作成しています。
（収益化をしているほとんどのブロガーさんはTopページに固定ページを採用しています）

固定ページをTopページに設定する

管理画面から『固定ページ』の『新規追加』をクリックし、固定ページを作成していきましょう。

全ての編集が終了したら、作成した固定ページを、ブログのTopページに使用するように設定すれば、Topページが固定ページになります。

固定ページをTOPページに設定する方法
『外観』⇒『カスタマイズ』⇒『WordPress設定』⇒『ホームページ設定』にて設定可能。

下画像のように「フロントページ」と表示されたら、Topページに設定完了です。

次からは、具体的なTopページの作成方法を紹介します。

新着記事

ぶろなびの固定ページのパーツは全て「ブログパーツ」で作成しており、それを固定ページに貼っているだけです。
理由としてはパーツごとに分けることで管理しやすくするためです。

この部分に関しては個人の差があると思いますので、管理しやすいようにアレンジしてみてくださいね。
今回は僕が使用している「ブログパーツ」を使用した作成方法で解説していきます。
※パーツごとに分けて管理しているだけで、固定ページでも作成方法は同じです

最新の記事のみ画像付き、２番目以降の記事はタイトルのみ表示しています

～やる事リスト～
①【カラムブロック】を左30/右70で表示
②左カラムには、【投稿リスト】の新着記事で、１記事のみカード型で表示
③右カラムには、【投稿リスト】の新着記事で、最新記事のみ除外して表示
④【カラムブロック】の上部にアイコン画像を設置

それではさっそく、ぶろなびTopページ上部にある、新着記事一覧のパーツを作成していきます。

まず、最初に「タイトル」を入力しましょう。
これはブロブパーツを管理するタイトルなので分かりやすい名前でOKです。

次に下画像のようにブロック選択から『カラムブロック』を選択します。

カラムを選択したら下画像のようになりますので左から２番目の『30/70』を選択します。

『30/70』カラムを選択したら、次は左側のブロックから『投稿リスト』を選択します。

『投稿リスト』を選択したら、下画像のように右側の項目を設定していきます。

次に右側も同じように投稿リストを設定していきましょう。

右側の『投稿リスト』を選択したら、下画像のように右側の項目を設定していきます。

これで形ができました。
次に最新の記事が両方の投稿リストでダブっているので右側から除外していきます。

Pickupタブで除外する投稿IDを設定

投稿リストの除外ID設定は毎回手動で行う必要があります。
自動で除外される機能が追加されることを切に願います（笑）

最後はカラムブロックをグループ化し、好きなスタイルを設定していきます。
当ぶろなびは「浮き出しスタイル」を使用しています。

そして、完成系がこちら。

いかがでしょう？
結構おしゃれじゃないですか？SWELLならこんなおしゃれなパーツが簡単に作れてしまいます！

これで新着記事のブログパーツができたので次はおすすめ記事を作っていきましょう。

おすすめ記事

おすすめ記事は4記事表示しています。

～やることリスト～
①【投稿リスト】の人気記事順で、読んで欲しい記事をID指定
②抜粋分の表示をPC80文字、SP40文字に設定

Pickupタブで表示する投稿IDを指定

『Pickup』の設定で、読んで欲しい記事を『投稿IDを直接入力』という欄に入力していきます。
投稿IDとは「記事一覧」に載っている、記事毎の識別IDのことです。

他の設定に関しては新着記事と同じです！

次からは人気のカテゴリ別記事を作成していきましょう。

人気のカテゴリー別記事

人気カテゴリー別記事はカラムを使用し、左カラムに4記事、⇒カラムにリストでカテゴリー一覧にリンクしています

～やることリスト～
①【カラムブロック】を左70/右30で表示
②左カラムには、【投稿リスト】のランダムで、4記事のみカード型で表示
③右カラムには、H3見出しでタイトルを付け、リストでカテゴリーページにリンクを貼る

ここまで設定できたら、表示する項目のカテゴリーを設定していきます。
下画像のようにPickupから表示したいカテゴリーを選んでいきます。

Pickupタブで表示するカテゴリーを指定

左カラムの設定が終われば次は右カラムを作ります。
こちらは非常に簡単で、上部の文字はH3見出しでタイトルをつけ、その下にリストでカテゴリー毎にリンクを貼っているだけです。

そして、完成したのがこちら。

色んなサイトを参考にし、試行錯誤してみたんですがこれが結構おしゃれで気に入っています

運営レポート

これに関しては新着記事を同じ作りです。
表示している記事を運営レポートカテゴリーに指定しているだけです。

カテゴリーの指定は人気のカテゴリー別記事と同じようにPickupから設定できます。

また、今まで作成したブログパーツは下画像のように呼び出しコードで管理されています。
この呼び出しコードを固定ページに貼るだけで、固定ページは完成です。

下画像のように固定ページには各ブログパーツの呼び出しコードを記載しているだけです。

このように各パーツを別々に作った方が管理やしやすいのと、ブログパーツだと色んな記事に使用できるので、このやり方が気に入っています。

もちろん今まで解説したことを固定ページに直接作ってもOKですよ

２：ヘッダースライドショー

次は上部のスライドショーを設定していきます。

スライドショーの設定方法
『外観』⇒『カスタマイズ』⇒『トップページ』⇒『記事スライダー』にて設定可能

ちなみに記事スライダーは下画像の『ピックアップ対象』でカテゴリーやタグを指定することも可能です。

カテゴリーID・タグIDの確認方法
『投稿』⇒『カテゴリー』・『タグ』のIDから確認可能

ヘッダー部分に関してはピックアップバナーと迷ったんですが、現時点ではスライドショーにしています。
記事スライダーの方が過去の記事でも目に留まる可能性が高くなるかな？ということで今は記事スライダーにしています。

もしかしたら今後変更するかもしれませんが、その時には当記事も更新していきます！

カスタマイズその②：フォント・見出しデザイン

二つ目のカスタマイズはフォントです！

フォントはブログを見せるうえで非常に大切なファクターです。
ここは徹底的にこだわっていきたいですね。

フォントの種類

当ブログのフォントは「ヒラギノゴシック　＞　メイリオ」で統一しています。
SWELLでは次の4つのフォントが使用できますが、このフォントが一番見やすく、しっくりきたためです。

フォントの設定場所
『外観』⇒『カスタマイズ』⇒『サイト全体設定』⇒『基本デザイン』⇒『フォント設定』

SWELLで使用可能なフォント

①游ゴシック　⇒　すっきりと見やすい
②ヒラギノゴシック＞メイリオ　⇒見やすく、親しみやすい
③Noto Sans JP　⇒　②と似ており、若干文字が太くなる
④明朝体　⇒　筆で描いたようなきっちりしたイメージ

④の明朝体は筆で描いたみたいに固いイメージになるので、ブログにはあまりおすすめできないですね。

ブログで使用するなら①游ゴシックか②ヒラギノゴシック>メイリオがおすすめです。

フォントサイズ

続いてはフォントサイズについてです。
SWELLで指定できるフォントサイズは「記事本文」のフォントのみです。

残念ながらタイトル、Hタグのフォントサイズはカスタマイズできません

まあ、できなくてもとても見やすいので問題ありませんが（笑）

上記のように設定すれば反映されます。

モバイルをデバイス可変にしている理由は、スマホによって画面の大きさが違うためです。
画面の小さいスマホ（iPhoneSEなど）や画面の大きいスマホで、フォントサイズを固定してしまうと見え方が大きく変わってしまうためです。

そのため、当ブログではデバイスの画面の大きさによってフォントサイズを自動変更する設定にしています。

見出しのデザイン

続いて見出しのデザインです。

見出しの設定場所
『外観』⇒『カスタマイズ』⇒『投稿・固定ページ』⇒『コンテンツのデザイン』⇒『見出しのデザイン設定』

上記のように設定すればOKです。

見出しは極力シンプルにしたかったので、このデザインに行きつきました。
もっとオシャレにしたい方は、色と見出し2のデザインを変えることをおすすめします。

カスタマイズその③：アイコン画像

三つ目のカスタマイズはアイコン画像です。

上画像のようなアイコン画像は「canva」で作成しています。
無料で使うことができ、初心者でもおしゃれなアイコン画像を作ることが可能です。

アイコン画像のサイズ
ヘッダー画像：1600×360　Topページ画像：300×72

ヘッダー画像は文字ではなく、画像にすればいっきにおしゃれ感がでるのでおすすめです♪

canvaの使い方はサルワカさんの記事が分かりやすかったので、下記記事をご覧ください。

まとめ：居心地のいい感じを作るには細部にこだわるべし

今回はSWELLをぶろなび風にカスタマイズする方法について紹介しました。

TOPページ、フォント、アイコン画像の順番でお話してきましたが、細部にこだわることで「居心地のいい感じ」を表現することが可能です。

もし、本記事を読んでSWELLを導入してみたい方は下記記事をご覧ください。

SWELLを導入済みでカスタマイズ方法を知りたい方は下記記事をご覧ください。

今回はこれで以上です。

おわり。