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

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

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

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

ワードプレスへ移行した理由の1つとして、”もっと回遊してもらえるブログにしたい”という思いがありました。

記事を読み終わったあとに、別の記事も読んでいってくれたら嬉しいな、なんて思っています。

SWELLを使い始めてみると、実際に直帰率も下がり、今まではアクセス数が低かったトップページが毎日アクセス数が1番多くなりました。

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

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

Contents

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を貼り付けて、タイトルを決めて保存する。

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

その他、ブログパーツを利用しているところ

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

ブログ村へのリンク

ブログ村へのリンクも毎記事入れたいので、ウィジェットの”記事下部”に入れています。

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

こちらのサブブログへのリンクはバナーリンクを利用して、楽天ROOMへのリンクとあわせてウィジェットのフッター3へ。

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

最後に

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

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

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

くうかのアイコン画像くうか

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

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

シンプルライフの参考になる記事をもっと読む(ブログ村)

読んだよ!のクリック嬉しいです…♪

にほんブログ村 にほんブログ村へ

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

カテゴリー別の人気記事

コメント

コメントする

CAPTCHA


Contents
閉じる