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

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

ブログパーツの使い方いろいろ
URLをコピーする
URLをコピーしました!

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

WordPressテーマ「SWELL」を使っているなら、ぜひとも覚えておきたい機能がブログパーツ

とっても便利なんですよ!

使い回したいパーツを自分で作成することができ、それを自由に呼び出すことができます。

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

くうか

この記事では、当ブログ内で利用しているブログパーツをいくつかご紹介していくので、参考になったら嬉しいです!

Contents

SWELLブログパーツと再利用ブロックの違い

「ブログパーツ」とはSWELL独自のブロックで、似たような機能にWordPress標準の「再利用ブロック」があります。

再利用ブロックは記事内のみで利用できることに対し、ブログパーツは記事内のほか、ウィジェットでも使えるというところが大きな違いとなっています。

ブログパーツの詳しい機能は公式マニュアルをご覧ください。

くうか

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

ブログパーツで回遊率を高めたい

主に記事下へ配置して他の記事も読んでいってくれたら…という希望で作ってみました。

1. ピックアップバナーを記事下にも表示させたい

ブログのヘッダー下にバナーが4つ並んでいる部分を「ピックアップバナー」といいます。

ピックアップバナー
ピックアップバナー

特に読んでほしいページをリンクさせることによって、読者にアピールすることができます。

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

くうか

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

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

そこで思いついたのが「バナーリンク」+「ブログパーツ」

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

バナーリンクとは?

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

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

記事下にバナーリンクを4つ並べる方法

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. ブログパーツでカテゴリーごとのCTAを設定する

SWELLのアップデートにて、記事下に配置できるCTAをカテゴリーやタグごとに設置できるようになりました。

CTA…読者を次の行動に促すというような意味。

私も使ってみた

カテゴリーごとのCTA
カテゴリーごとに新着/人気記事の表示

このように記事下に、該当カテゴリー内の「新着/人気記事」を表示することもできました。

方法はいたって簡単。

ブログパーツを好きなように作成し、設定項目にある「用途」を「CTA]にチェックし、保存します。

ブログパーツのCTAにチェック
ブログパーツのCTAにチェック

そしてカテゴリー(またはタグ)編集ページにて、

作成したブログパーツを設定
作成したブログパーツを設定

先ほど作成したブログパーツを選択すれば完了です!

CTAにチェックが入っていないと、ここで選択することができないのでお忘れなく!

くうか

カテゴリーごとに全然違うパーツを作ってもいいですね!
広告へ促すのも良いかも。

使い回せるブログパーツ

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

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

記事下のブログ村リンク

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

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

ブログパーツ編集画面

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

くうか

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

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

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

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

フッター2にランキングサイトや楽天ROOMへのリンクを貼っています。

こちらは「SWELLボタン」ブロックを使用。

ウィジェット内に直接ボタンを配置することはできないので、ブログパーツを使いました。

くうか

ボタンサイズに「大」を選択すると、ボタンサイズが揃いますよ♪

3. サイトのあいさつ文

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

サイトのあいさつ文

ブログパーツにて、

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

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

トップページ以外にも使えるかもしれないと思い、ブログパーツで作成しておきました。

4. サイドバーのおすすめ記事リスト

サイドバーにおすすめの記事をリスト表示させています。

サイドバーのリンク

こちらは「リスト」ブロックで、テキストに記事へのリンクを貼っています。

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

実はこのブログパーツはかなり使いまわしています!笑

下記画像はサイトマップでの使用例です。

リスト活用例
各項目ごとにまとめてリンク集が作れて便利
くうか

まとめ記事をリストで作っておくとこんな使い方もできて便利ですね!

最後に

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

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

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

くうか

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

SWELLのカスタマイズ記事も書いてます!

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

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

フォロー待ってます

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

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

楽天ROOM

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

ブログパーツの使い方いろいろ

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

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

関連キーワード #SWELL #ワードプレス #はてなブログ

コメント

コメントする

CAPTCHA


Contents
閉じる