MENU
カテゴリー
アーカイブ
くうか
整理収納・ゲーム・プログラミングが好きな40代専業主婦。小学生兄妹と夫の4人家族。
小さなおうちに引っ越して収納が減っちゃった!少しずつ物を減らしているゆるミニマリストでもあります。

こんな使い方してます!SWELLブログパーツの利用例

URLをコピーする
URLをコピーしました!

こんにちは、ゆるミニマリスト主婦のくうかです。

ワードプレステーマ「SWELL」を導入してから、日々記事を書いたりリライトしたり、見た目を調整したりすることがとってもラクになり楽しいです!

SWELLでは特にブログパーツが便利
使いまわしたいパーツを自分で作成することができ、それを自由に呼び出すことができます。

回遊性を高めるためや、この場所でこんなリンクを入れたいという希望がうまいこと実現できるので、当ブログでも多く利用しています。

くうか

この記事では、当ブログ内で利用しているブログパーツをいくつかご紹介していきます。

Contents

SWELLブログパーツの利用例

「ブログパーツ」とはSWELL独自のブロックで、似たような機能に標準の「再利用ブロック」がありますが、こちらは記事内のみで利用できるブロックであり、ブログパーツは記事内のほか、ウィジェットでも使えるところが大きな違いだと思います。

当ブログでは、ブログの回遊性を高めるためのパーツや、使いまわしたいパーツなどに使っています。

1. バナーリンクで解決!ピックアップバナーを記事下にも表示させたい

ブログのタイトル下に4つバナーを出しているところを『ピックアップバナー』といいます。

トップページのピックアップバナー

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

くうか

記事下にも出せたらいいのに…!
記事を読み終わったあとにバナーがあると、見てほしい記事をついでに見てくれる人もいるかもしれないし。

と思い、四苦八苦してみるもカスタマイザーでの設定はできなさそう…。

そこで見つけたのが『バナーリンク』
こちらを使えば記事下にもバナーを表示できるようになります!

バナーリンクとは

SWELLブロック内にあります。
画像の上にテキストを配置でき、画像自体をリンクにすることができます。

記事下に毎回表示させるには”ブログパーツ”で作成し、記事下ウィジェットから呼び出す必要があります。

はじめは便利そうな”カスタムバナー”を採用するつもりでしたが、ワードプレスのバージョンが上がってから挙動が不安定になってしまい、諦めてしまいました。
SWELL公式カスタムバナー使い方ページ

バナーリンクをブログパーツで使用する方法

STEP
ブログパーツを新規作成する

ブログパーツで新規作成を行う。

STEP
カラムブロックを入れて好きな個数に分ける

4コのマスを入れたいので、はじめは横並びカラムブロック3で作成し、

カラム3で作成

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

カラム4へ変更
STEP
各カラムにバナーリンクを挿入する

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

バナーリンク挿入

各項目の設定

バナーリンク設定
  • 画像設定(さらにタイトル・テキスト・リンク先URLも設定)
  • ブラー・影・丸みの効果、テキストカラー等の細かい設定

完成したら保存し、ブログパーツIDをコピーしておく。

STEP
入れたいウィジェット箇所にテキストとして挿入する

外観→ウィジェット。
私の場合は”関連記事下”ウィジェットに、「テキスト」を挿入。

ウィジェット設定

先程コピーしたブログパーツIDを貼り付けて、タイトルを決めて保存する。

これで関連記事の下にピックアップバナーが4つ並びます

記事下ピックアップバナー

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

くうか

フッターなどに配置しても良いと思います♪

2. タブブロックで解決!記事下にカテゴリー別記事を表示させたい

ピックアップバナーだけでは物足りないのか、さらに記事下に、カテゴリー別にいくつか記事を表示させたいと思っていた私。

ちょうどその頃SWELLのアップデートで「タブブロック」が追加されたということで、使ってみました。

STEP
ブログパーツを新規作成する

先程と同じく、ブログパーツで新規作成を行う。

STEP
タブブロックを追加する

SWELLブロックから「タブ」を追加する。

STEP
タブブロックを設定・投稿リストブロックを追加する

タブブロックのタブ部分に名称を入れたり、増やす場合は「+」で追加していく。
(あまり多いとモバイルでは2段表示になるので注意)

タブの中身にはSWELLブロック内の「投稿リスト」ブロックを追加

タブブロックに投稿リストを追加

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

該当カテゴリー設定

保存し、ブログパーツIDをコピーしておく。

STEP
入れたいウィジェット箇所にテキストとして挿入する

外観→ウィジェット。
私の場合は”関連記事下”ウィジェットに、「テキスト」を挿入。

先程コピーしたブログパーツIDを貼り付けて、タイトルを決めて保存する。

このように、ウィジェットで少し凝ったことをしたい場合にはブログパーツを利用すると、やりたいことがほぼ実現できます。

3. 記事の最後にブログ村へのリンク

記事の最後にこのようなリンクを貼っています

記事下のブログ村リンク

ブログパーツで、段落にメッセージ・カスタムHTMLブロックにリンクのhtmlを貼ります。

ショートコードでアイコンも付けたり。

ブログパーツ編集画面

出来上がったら、ウィジェットの”記事下部”にブログパーツIDを入れます。

リンクだけならウィジェットにhtmlをそのまま書けば良いけど、ちょっと装飾したいな…というところにはブログパーツが使えますね!

4. フッターに他サイトへのリンク

フッター2にランキングサイトへのリンク

フッター2にランキングサイトへのリンク

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

フッター3に他サイトへのリンク

フッター3に他サイトへのリンク

こちらのサブブログへのリンクは1番でも利用している「バナーリンク」ブロックを使用しています。

5. サイトのあいさつ文

トップページとサイトマップページに、このようなあいさつ文を入れています。

サイトのあいさつ文

ブログパーツにて、

サイトあいさつ文編集画面

「カラム」ブロックを2カラムで設置し、プロフィール画像とあいさつ文をそれぞれのカラムに入れています。

6. サイドバーのおすすめリンク

サイドバーにおすすめのリンクを表示させています。

サイドバーのリンク

こちらは「リスト」ブロックで自分でテキストにリンクを貼っています。

「投稿リスト」ブロックを多用すると重くなるかもしれない、と多少気にした結果こうなりました。

最後に

当ブログで利用しているブログパーツの例をご紹介しました。

ブログパーツを使えば、使いまわしもできるし、ウィジェットや記事内にも呼ぶことができます。

ブログパーツを記事内で呼び出す場合は、SWELLブロック内の「ブログパーツ」からです。

くうか

とても便利なので、色んな使い方ができることを覚えておくといいですね…!

当ブログのトップページのカスタマイズ記事も書いてます!

ぽちっとしていただけると嬉しいです

にほんブログ村 ライフスタイルブログ ミニマリストへ

フォロー待ってます

くうかんしんぷるライフ - にほんブログ村

楽天ROOMに愛用品を登録しています

楽天ROOM

ライフスタイルまとめメディアへ

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

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

ピックアップ記事

カテゴリー別の人気記事

コメント

コメントする

CAPTCHA


Contents
閉じる