次回から『ぶろなび』と検索ください。

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

悩んでいる人

現在、SWELLを購入して、サイトデザインをカスタマイズしています。
ぶろなび風のカスタマイズ方法を教えてください。

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

この記事の内容
  • SWELLとはどんなテーマなのか?
  • カスタマイズその①:トップページ
  • カスタマイズその②:フォント
  • カスタマイズその③::アイコン画像の作り方

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

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

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

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

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

目次

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

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

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

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

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

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

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

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

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

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

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

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

カスタマイズその1:トップページ

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

1:固定ページの作成

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

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

固定ページを新規作成します
固定ページにて作成

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

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

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

作成した固定ページをTopページに設定する
固定ページをTopページに設定する

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

フロントページと表示されていれば設定完了です
フロントページと表示されていればOK

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

新着記事

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

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

Topページの新着記事一覧を作っていきます。

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

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

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

ブログパーツの新規追加を選択
ブログパーツを作成していきます

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

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

ブロックの選択からカラムを選択します

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

カラムを選択したら30/70を選びます

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

左側のブロックから投稿リストを選択思案す

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

設定項目
  • 表示文字数:1
  • レイアウトを選択:カード型
  • 投稿の表示基準:新着順
  • 最大カラム:全て1列
  • 抜粋文の文字数:PC120文字、SP40文字
右側の項目を設定していきます

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

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

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

設定項目
  • 表示文字数:4
  • レイアウトを選択:テキスト型
  • 投稿の表示基準:新着順
  • 抜粋文の文字数:両方0
  • MOREリンクの表示テキスト:READ MORE
赤枠の箇所をこの通り設定します

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

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

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

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

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

新着記事

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

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

おすすめ記事

次はおすすめ記事一覧を作っていきます。

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

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

設定項目
  • 表示する投稿数:4
  • レイアウトを選択:リスト型(左右交互)
  • 投稿の表示順序:人気順
  • 抜粋文の文字数:PC80文字、SP40文字

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

Pickup設定

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

投稿ID解説

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

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

人気のカテゴリー別記事

カテゴリー記事一覧を作っていきます

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

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

左側カラムの設定項目
  • 表示する投稿数:4
  • レイアウトを選択:カード型
  • 投稿の表示順序:ランダム
  • 最大カラム:2列
  • 抜粋文の文字数:0文字

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

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

Pickupからカテゴリーを選択していきます

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

右カラムの上部はH3見出し、その下はリストでカテゴリーページにリンクを貼っています

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

カテゴリー別記事

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

運営レポート

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

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

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

ブログパーツを作ると呼び出しコードが作られます

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

固定ページに呼び出しコードを張り付けるだけで完了です

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

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

2:ヘッダースライドショー

スライドショーの設定

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

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

記事スライダーの設定項目
  • 並び順:ランダム
  • タイトルや日付などの表示位置:画像の上に被せる
  • カテゴリー表示位置:サムネイル画像の上
  • 公開日・更新日:表示
  • スライダーの枚数設定:PC5、SP2
  • スライドの速度:1500
  • スライドが切り替わる感覚:5000
  • 上下の余白量:小
  • 左右の幅:フルワイド

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

記事スライダーのピックアップ対象も指定可能

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

カテゴリーID、タグIDの確認方法

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

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

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

カスタマイズその2:フォントと見出しデザイン

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

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

フォントの種類

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

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

SWELLで使用可能なフォント

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

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

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

フォントサイズ

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

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

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

フォント設定
設定項目
  • フォント:ヒラギノゴシック>メイリオ
  • フォントサイズ(PC・Tab):中16px
  • フォントサイズ(Mobile):デバイス可変中

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

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

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

見出しのデザイン

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

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

見出しのデザイン設定
設定項目
  • 見出しのキーカラー:規定値
  • 見出し2のデザイン:左に縦線
  • 見出し3のデザイン:2色の下線(メイン・グレー)
  • 見出し4のデザイン:左に縦線

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

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

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

カスタマイズ3つめ:アイコン画像

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

canvaで作ったアイコン

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

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

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

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

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

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

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

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

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

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

今回はこれで以上です。

おわり。

よかったらシェアしてね!

コメント

コメント一覧 (3件)

  • はじめまして、イケダさん

    僕はノブと申します。
    コクーンからSWELLに移行しまして、悪戦苦闘しながらカスタム方法を
    ググっていたところ、イケダさんのサイトにたどり着きました。

    イケダさんにわかりやすく解説していただき、なんとか僕のサイトもカスタムすることが
    できました。
    図解豊富で解説もわかりやすくて、本当に助かりました。
    ありがとうございます。

    またこれからもお邪魔させて頂きます。

    • ノブさん、初めまして。
      僕の記事がお役に立てたようで何よりです!
      サイトを拝見致しましたが、素敵なサイトに仕上がりましたね!

      僕もまだまだなので一緒に頑張っていきましょう。

  • お久しぶりです、イケダさん

    先日は被リンクして頂きまして、ありがとうございました。
    僕のサイトでも「リンク先」でイケダさんの「ぶろなびを」紹介させて頂きました。
    https://nobu1200su4.com/nobu-link/

    ちなみに「ぶろなび」でSEOを勉強させてもらっています。
    わかりやすくて優しい文章なので、読んでいても疲れません。
    大変助かっています、ありがとうございます。

    またお邪魔させて頂きますね。
    今後ともよろしくお願いいたします。

コメントする

CAPTCHA


目次
閉じる