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

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

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

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

この記事の内容
  • SWELLブログパーツとは?再利用ブロックと違うの?
  • ブログパーツの使い方4選
  • さらに当ブログで使い回しているブログパーツを紹介!

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

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

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

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

くうか

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

Contents

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

「ブログパーツ」とはSWELL独自のブロックで、複数のページや場所で使い回したいコンテンツをあらかじめ登録しておくことで、自由に呼び出すことができます。

似たような機能にWordPress標準の「再利用ブロック」があります。

再利用ブロックは記事内のみで利用できることに対し、ブログパーツは、

  • 記事内
  • ウィジェット
  • カテゴリーページ
  • タグページ
  • CTA
  • メインビジュアル

にも使えるというところが大きな違いとなっています。

ブログパーツの基本的な使い方や機能は公式マニュアルに載っていますので、まずはご覧ください。

くうか

では実際はどのような場合に使うことができるのか、当ブログでの使用例を挙げていきます!

SWELLブログパーツ機能の使い方4選

WordPressのメニューから【ブログパーツ】→【新規追加】を選択し、作り始めます。

ブログパーツの新規追加
ブログパーツの新規追加

主に、

  1. カテゴリーページ
  2. CTA
  3. 記事下ウィジェット
  4. メインビジュアル

で利用するブログパーツの使い方を説明していきます。

1. カテゴリーページのヘッダーに配置する場合

カテゴリーページのヘッダーに、ブログパーツを設置できるようになっています。

私も使ってみた

カテゴリーページのヘッダー
カテゴリーページのヘッダー

カテゴリーを見てもらうにあたって、”まずはじめに読んで欲しい”と思う記事をアピールしてみました。

以下、簡単に作り方です。

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

ブログパーツの用途にチェック
ブログパーツの用途「カテゴリー用」にチェック

当ブログではカラムブロック(2カラム)に、「アイコン・サブカテゴリーリスト」と「読んでほしい記事」を配置しています。

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

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

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

くうか

1ページめだけの表示にする場合は、2ページ目以降は表示しないのチェックをしてね!

用途の「カテゴリー用」にチェックが入っていないと、ここで選択することができないのでお忘れなく!

くうか

カテゴリーごとにヘッダーの内容を変える場合は、カテゴリーの数だけブログパーツを作ることになりますので注意…!

2. CTAに配置する場合

記事下に配置できるCTAを、カテゴリーやタグごとに設置できるようになっています。

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

私も使ってみた

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

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

方法はいたって簡単。

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

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

当ブログでは、タブブロックに投稿リストを入れて、カテゴリーを絞った新着・人気記事を表示できるようにしました。

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

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

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

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

くうか

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

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

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

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

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

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

くうか

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

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

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

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

バナーリンクとは?

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

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

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

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

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

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

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

カラム3で作成

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

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

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

バナーリンク挿入

各項目の設定

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

【用途】にはチェックを入れなくてOK。

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

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

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

ウィジェット設定

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

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

記事下ピックアップバナー
画像古いです、すみません

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

くうか

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

4. メインビジュアルに使う場合

メインビジュアルにはもともとテキストやボタンは配置することができます。

しかしもっと他にも配置させたい、という場合にはブログパーツを使います。

私はメニューボタンを配置させたかったので使ってみました。

メインビジュアルにブログパーツ

リッチカラムブロックを使って左側に配置するように設定しています。

ブログパーツが完成したら、【外観】→【カスタマイズ】→【トップページ】→【メインビジュアル】の【ブログパーツID】項目にIDのみを設定します。

メインビジュアルのブログパーツID

詳しい設定方法はこちらの記事を参照してください。

使い回せるSWELLのブログパーツ

当ブログで他に作ってみたブログパーツの例を紹介します。

タブブロックでカテゴリー別に記事を表示する方法

カテゴリー別にいくつかの記事を表示させたい。

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

タブブロック(投稿リスト)
タブブロック(投稿リスト)
STEP
ブログパーツを新規作成する

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

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

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

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

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

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

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

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

該当カテゴリー設定

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

STEP
入れたい箇所に挿入する

今回は”関連記事下”ウィジェットに、「テキスト」を挿入。

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

ウィジェット以外で呼び出したい場合は、「ブログパーツ」ブロックから呼び出すことができます。

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

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

記事下のブログ村リンク

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

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

ブログパーツ編集画面

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

くうか

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

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

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

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

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

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

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

ブログランキングのボタン作成
ブログランキングのボタン作成
  1. ブログ村
  2. 人気ブログランキング
  3. 楽天ROOM

3つのボタンをSWELLボタンで作成。

SWELLボタン設定
SWELLボタン設定
SWELLボタン設定
  • リンク先:ブログ村バナーのリンク先と同じものを入れる
  • スタイル:アウトライン(お好みで)
  • ボタンサイズ:大
  • リンク設定:新しいタブ
  • アイコン設定:お好みのアイコンで
くうか

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

サイトのあいさつ文

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

サイトのあいさつ文

ブログパーツにて、

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

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

「リッチカラム」ブロックでも作ることができます。
カラム2列で配置後、各カラム幅をお好みで設定しましょう。

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

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

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

サイドバーのリンク

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

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

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

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

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

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

最後に

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

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

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

くうか

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

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

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

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

フォロー待ってます

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

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

楽天ROOM

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

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

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

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

\ おすすめのテーマ /

シンプルでスタイリッシュなデザインと高機能が備わったテーマ
快適すぎてびっくりしちゃうかも!?

この記事を書いた人

ゆるくミニマリストを目指している中1小5兄妹のママ。
整理収納アドバイザー2級、元システムエンジニア。
小さなおうちに引っ越して収納が減っちゃった!少しずつ物を減らしてシンプルな空間にしたいと思っています。

コメント

コメントする

CAPTCHA


目次
トップへ
Contents
閉じる