こんにちは、ゆるミニマリスト主婦のくうかです。
- SWELLブログパーツとは？再利用ブロックと違うの？
- ブログパーツの使い方４選
- さらに当ブログで使い回しているブログパーツを紹介！
WordPressテーマ「SWELL」を使っているなら、ぜひとも覚えておきたい機能がブログパーツ。
とっても便利なんですよ！
使い回したいパーツを自分で作成することができ、それを自由に呼び出すことができます。
回遊率を高めるためや、この場所でこんなリンクを入れたいという希望がうまいこと実現できるので、当ブログでも多く利用しています。
くうかこの記事では、当ブログ内で利用しているブログパーツをいくつかご紹介していくので、参考になったら嬉しいです！
SWELLのブログパーツとは？再利用ブロックとの違い
「ブログパーツ」とはSWELL独自のブロックで、複数のページや場所で使い回したいコンテンツをあらかじめ登録しておくことで、自由に呼び出すことができます。
似たような機能にWordPress標準の「再利用ブロック」があります。
再利用ブロックは記事内のみで利用できることに対し、ブログパーツは、
- 記事内
- ウィジェット
- カテゴリーページ
- タグページ
- CTA
- メインビジュアル
にも使えるというところが大きな違いとなっています。
ブログパーツの基本的な使い方や機能は公式マニュアルに載っていますので、まずはご覧ください。
くうかでは実際はどのような場合に使うことができるのか、当ブログでの使用例を挙げていきます！
SWELLブログパーツ機能の使い方４選
WordPressのメニューから【ブログパーツ】→【新規追加】を選択し、作り始めます。
主に、
- カテゴリーページ
- CTA
- 記事下ウィジェット
- メインビジュアル
で利用するブログパーツの使い方を説明していきます。
1. カテゴリーページのヘッダーに配置する場合
カテゴリーページのヘッダーに、ブログパーツを設置できるようになっています。
私も使ってみた
カテゴリーを見てもらうにあたって、”まずはじめに読んで欲しい”と思う記事をアピールしてみました。
以下、簡単に作り方です。
ブログパーツを好きなように作成し、設定項目にある「用途」の「カテゴリー用」にチェックし、保存します。
そしてカテゴリー（またはタグ）編集ページにて、
先ほど作成したブログパーツを選択すれば完了です！
くうか１ページめだけの表示にする場合は、２ページ目以降は表示しないのチェックをしてね！
くうかカテゴリーごとにヘッダーの内容を変える場合は、カテゴリーの数だけブログパーツを作ることになりますので注意…！
2. CTAに配置する場合
記事下に配置できるCTAを、カテゴリーやタグごとに設置できるようになっています。
私も使ってみた
このように記事下に、該当カテゴリー内の「新着／人気記事」を表示することもできました。
方法はいたって簡単。
ブログパーツを好きなように作成し、設定項目にある「用途」の「CTA」にチェックし、保存します。
そしてカテゴリー（またはタグ）編集ページにて、
先ほど作成したブログパーツを選択すれば完了です！
くうかカテゴリーごとに全然違うパーツを作ってもいいですね！
広告へ促すのも良いかも。
3. 記事下にピックアップバナーを表示させたい場合
ブログのヘッダー下にバナーが４つ並んでいる部分を「ピックアップバナー」といいます。
特に読んでほしいページをリンクさせることによって、読者にアピールすることができます。
アクセスも上がるので気に入っているのですが、これがどうもブログのヘッダーにしか表示できなくて。
くうか記事下にも出せたらいいのに…！
記事を読み終わったあとにバナーがあると、見てほしい記事をついでに見てくれる人もいるかもしれないし。
と思い、四苦八苦してみるもカスタマイザーでの設定はできなさそう…。
そこで思いついたのが「バナーリンク」＋「ブログパーツ」。
記事下にバナーを毎回表示させるには”ブログパーツ”で作成し、記事下ウィジェットから呼び出す必要があります。
SWELLブロック内にあります。
画像の上にテキストを配置でき、画像自体をリンクにすることができます。
記事下にバナーリンクを４つ並べる方法
ブログパーツで新規作成を行う。
４コのマスを入れたいので、はじめは横並びカラムブロック３で作成し、
あとから編集画面でカラム数を４にする。（最初から４マスで作れない仕様のため）
SWELLブロックからバナーリンクを挿入
各項目の設定
- 画像設定（さらにタイトル・テキスト・リンク先URLも設定）
- ブラー・影・丸みの効果、テキストカラー等の細かい設定
完成したら保存し、ブログパーツIDをコピーしておく。
外観→ウィジェット。
私の場合は”関連記事下”ウィジェットに、「テキスト」を挿入。
先程コピーしたブログパーツIDを貼り付けて、タイトルを決めて保存する。
これで関連記事の下にピックアップバナーが４つ並びます
場所はご自分のお好みで。
くうかフッターなどに配置しても良いと思います♪
4. メインビジュアルに使う場合
メインビジュアルにはもともとテキストやボタンは配置することができます。
しかしもっと他にも配置させたい、という場合にはブログパーツを使います。
私はメニューボタンを配置させたかったので使ってみました。
リッチカラムブロックを使って左側に配置するように設定しています。
ブログパーツが完成したら、【外観】→【カスタマイズ】→【トップページ】→【メインビジュアル】の【ブログパーツID】項目にIDのみを設定します。
詳しい設定方法はこちらの記事を参照してください。
使い回せるSWELLのブログパーツ
当ブログで他に作ってみたブログパーツの例を紹介します。
タブブロックでカテゴリー別に記事を表示する方法
カテゴリー別にいくつかの記事を表示させたい。
そんな時、SWELLのアップデートで「タブブロック」が追加されたということで、使ってみました。
ブログパーツで新規作成を行う。
SWELLブロックから「タブ」を追加する。
タブブロックのタブ部分に名称を入れたり、増やす場合は「＋」で追加していく。
（あまり多いとモバイルでは２段表示になるので注意）
タブの中身にはSWELLブロック内の「投稿リスト」ブロックを追加
カテゴリー別の人気記事を表示させたいので、該当カテゴリーに絞る設定をする
保存し、ブログパーツIDをコピーしておく。
今回は”関連記事下”ウィジェットに、「テキスト」を挿入。
先程コピーしたブログパーツIDを貼り付けて、タイトルを決めて保存する。
ウィジェット以外で呼び出したい場合は、「ブログパーツ」ブロックから呼び出すことができます。
記事の最後にブログ村へリンクを貼る
記事の最後にこのようなリンクを貼っています
ブログパーツで、段落にメッセージ・カスタムHTMLブロックにリンクのhtmlを貼ります。
ショートコードでアイコンも付けたり。
出来上がったら、ウィジェットの”記事下部”にブログパーツIDを入れます。
くうかリンクだけならウィジェットにhtmlをそのまま書けば良いけど、ちょっと装飾したいな…というところにはブログパーツが使えますね！
フッターに他サイトへのリンク
フッター２にランキングサイトへのリンク
フッター２にランキングサイトや楽天ROOMへのリンクを貼っています。
こちらは「SWELLボタン」ブロックを使用。
ウィジェット内に直接ボタンを配置することはできないので、ブログパーツを使いました。
- ブログ村
- 人気ブログランキング
- 楽天ROOM
３つのボタンをSWELLボタンで作成。
- リンク先：ブログ村バナーのリンク先と同じものを入れる
- スタイル：アウトライン（お好みで）
- ボタンサイズ：大
- リンク設定：新しいタブ
- アイコン設定：お好みのアイコンで
くうかボタンサイズに「大」を選択すると、ボタンサイズが揃いますよ♪
サイトのあいさつ文
トップページに、このようなあいさつ文を入れています。
ブログパーツにて、
「カラム」ブロックを２カラム（30/70）で設置し、プロフィール画像とあいさつ文をそれぞれのカラムに入れています。
トップページ以外にも使えるかもしれないと思い、ブログパーツで作成しておきました。
サイドバーのおすすめ記事リスト
サイドバーにおすすめの記事をリスト表示させています。
こちらは「リスト」ブロックで、テキストに記事へのリンクを貼っています。
「投稿リスト」ブロックを多用すると重くなるかもしれない、と多少気にした結果こうなりました。
実はこのブログパーツはかなり使いまわしています！笑
下記画像はサイトマップでの使用例です。
くうかまとめ記事をリストで作っておくとこんな使い方もできて便利ですね！
最後に
当ブログで利用しているSWELLブログパーツの使い方の例をご紹介しました。
ブログパーツを使えば、使い回しもできるし、ウィジェットや記事内にも呼ぶことができます。
くうかとても便利なので、色んな使い方ができることを覚えておくといいですね…！
SWELLのカスタマイズ記事も書いてます！
コメント