こんにちは、ゆるミニマリスト主婦のくうかです。
ワードプレステーマ「SWELL」を導入してから、日々記事を書いたりリライトしたり、見た目を調整したりすることがとってもラクになり楽しいです!
SWELLでは特にブログパーツが便利。
使いまわしたいパーツを自分で作成することができ、それを自由に呼び出すことができます。
回遊性を高めるためや、この場所でこんなリンクを入れたいという希望がうまいこと実現できるので、当ブログでも多く利用しています。

この記事では、当ブログ内で利用しているブログパーツをいくつかご紹介していきます。
SWELLブログパーツの利用例
「ブログパーツ」とはSWELL独自のブロックで、似たような機能に標準の「再利用ブロック」がありますが、こちらは記事内のみで利用できるブロックであり、ブログパーツは記事内のほか、ウィジェットでも使えるところが大きな違いだと思います。
当ブログでは、ブログの回遊性を高めるためのパーツや、使いまわしたいパーツなどに使っています。
1. バナーリンクで解決!ピックアップバナーを記事下にも表示させたい
ブログのタイトル下に4つバナーを出しているところを『ピックアップバナー』といいます。

気に入っているのですが、これがどうもブログのヘッダーにしか表示できなくて。

記事下にも出せたらいいのに…!
記事を読み終わったあとにバナーがあると、見てほしい記事をついでに見てくれる人もいるかもしれないし。
と思い、四苦八苦してみるもカスタマイザーでの設定はできなさそう…。
そこで見つけたのが『バナーリンク』。
こちらを使えば記事下にもバナーを表示できるようになります!
SWELLブロック内にあります。
画像の上にテキストを配置でき、画像自体をリンクにすることができます。
記事下に毎回表示させるには”ブログパーツ”で作成し、記事下ウィジェットから呼び出す必要があります。
バナーリンクをブログパーツで使用する方法
ブログパーツで新規作成を行う。
4コのマスを入れたいので、はじめは横並びカラムブロック3で作成し、

あとから編集画面でカラム数を4にする。(最初から4マスで作れない仕様のため)

SWELLブロックからバナーリンクを挿入

各項目の設定

- 画像設定(さらにタイトル・テキスト・リンク先URLも設定)
- ブラー・影・丸みの効果、テキストカラー等の細かい設定
完成したら保存し、ブログパーツIDをコピーしておく。
外観→ウィジェット。
私の場合は”関連記事下”ウィジェットに、「テキスト」を挿入。

先程コピーしたブログパーツIDを貼り付けて、タイトルを決めて保存する。
これで関連記事の下にピックアップバナーが4つ並びます

場所はご自分のお好みで。

フッターなどに配置しても良いと思います♪
2. タブブロックで解決!記事下にカテゴリー別記事を表示させたい
ピックアップバナーだけでは物足りないのか、さらに記事下に、カテゴリー別にいくつか記事を表示させたいと思っていた私。
ちょうどその頃SWELLのアップデートで「タブブロック」が追加されたということで、使ってみました。
先程と同じく、ブログパーツで新規作成を行う。
SWELLブロックから「タブ」を追加する。
タブブロックのタブ部分に名称を入れたり、増やす場合は「+」で追加していく。
(あまり多いとモバイルでは2段表示になるので注意)
タブの中身にはSWELLブロック内の「投稿リスト」ブロックを追加

カテゴリー別の人気記事を表示させたいので、該当カテゴリーに絞る設定をする

保存し、ブログパーツIDをコピーしておく。
外観→ウィジェット。
私の場合は”関連記事下”ウィジェットに、「テキスト」を挿入。
先程コピーしたブログパーツIDを貼り付けて、タイトルを決めて保存する。
3. 記事の最後にブログ村へのリンク
記事の最後にこのようなリンクを貼っています

ブログパーツで、段落にメッセージ・カスタムHTMLブロックにリンクのhtmlを貼ります。
ショートコードでアイコンも付けたり。

出来上がったら、ウィジェットの”記事下部”にブログパーツIDを入れます。
4. フッターに他サイトへのリンク
フッター2にランキングサイトへのリンク

フッター2にランキングサイトや楽天ROOMへのリンクを貼っています。
こちらは「SWELLボタン」ブロックを使用しています。
フッター3に他サイトへのリンク

こちらのサブブログへのリンクは1番でも利用している「バナーリンク」ブロックを使用しています。
5. サイトのあいさつ文
トップページとサイトマップページに、このようなあいさつ文を入れています。

ブログパーツにて、

「カラム」ブロックを2カラムで設置し、プロフィール画像とあいさつ文をそれぞれのカラムに入れています。
6. サイドバーのおすすめリンク
サイドバーにおすすめのリンクを表示させています。

こちらは「リスト」ブロックで自分でテキストにリンクを貼っています。
「投稿リスト」ブロックを多用すると重くなるかもしれない、と多少気にした結果こうなりました。
最後に
当ブログで利用しているブログパーツの例をご紹介しました。
ブログパーツを使えば、使いまわしもできるし、ウィジェットや記事内にも呼ぶことができます。

とても便利なので、色んな使い方ができることを覚えておくといいですね…!
当ブログのトップページのカスタマイズ記事も書いてます!
コメント