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

こんにちは、SWELL愛用２年を超えたくうかです。

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

とっても便利なんです！

使い回したいブロックの組み合わせを、パーツとして登録し、それをあらゆる場面で呼び出すことができます。

便利すぎるので、当ブログでも多く利用しています。

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

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

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

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

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

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

ブログパーツの基本的な使い方や機能は、公式マニュアルに載っていますので、基本を知りたい場合はご一読ください。

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

ブログパーツは主にこれらの使い方をしています。

使い方	概要	用途のチェック
①通常記事内	記事内どこでも呼び出せる	どれでも
②ウィジェット	ウィジェット内に呼び出せる	どれでも
③カテゴリー（タグ） ヘッダー	カテゴリー（タグ）のヘッダーを装飾できる	カテゴリー用 またはタグ用
④CTA	CTAに表示させたい場合に使用	CTA
⑤メインビジュアル	サイトのファーストビューに表示できる	どれでも
⑥ブロックパターン	編集可能なブロックの組み合わせ	ブロックパターン

ご自分に必要な使い道を選択してくださいね。

---

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

1. 記事内によく呼び出す場合

記事を書いていく上でよく使うブロックの組み合わせを、あらかじめ登録しておきます。

例：SWELLの広告

このようなパーツを作りました。

用途：なし

用途のチェックは、なしでもありでも記事内で呼び出すことが可能です。

使い方

記事内で【ブログパーツ】ブロックから呼び出す。

パーツの一覧から選択。

2. ウィジェットに配置する場合

サイドバーやフッターといったウィジェットに装飾したい場合に、ブログパーツを使います。

例：フッター２（中央）にランキングサイトへのリンク

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

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

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

1. ブログ村
2. 人気ブログランキング
3. 楽天ROOM

３つのボタンを【SWELLボタン】で作成。アイコンはお好みで付けてください。

使い方

内容を保存し、ブログパーツIDを呼び出しコードごとコピーしておく。

【外観】→【ウィジェット】→【フッター（PC）２】にテキストを追加。

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

3. カテゴリー（タグ）ページに配置する場合

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

例：とあるカテゴリーページのヘッダー

カテゴリーページには、そのカテゴリーの概要やサブカテゴリーを表示させ、あとに記事一覧の表示がくるようにしています。

「ミニマリストカテゴリーすべての記事」という部分までがブログパーツです。

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

1. カテゴリーの画像を追加する（角丸）
2. 【リッチカラム】ブロックを追加する
3. 「サブカテゴリーリスト」や「読んでほしい記事」をカラム内に配置する
4. 設定項目にある「用途」の「カテゴリー用」にチェックし、保存する

タグの場合は「タグ用」にチェック。

使い方

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

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

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

4. CTAに配置する場合

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

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

例：SWELLの広告

①で作った広告と見た目同じなのですが、こちらにも使っています。

記事下に、該当カテゴリーに関連する広告を表示したいと思い作りました。

1. ブログパーツを新規作成
2. 段落・広告タグ・SWELLボタンを配置
3. 設定項目にある「用途」の「CTA」にチェックし、保存

使い方

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

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

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

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

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

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

私は、メニューや画像リンクを配置させたかったので使ってみました。

リッチカラムブロックを使って左側にメニュー、右側にサイトマップへのリンクを配置するように設定しています。

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

メインビジュアルの詳しい設定方法はこちらの記事を参照してください。

6. ブロックパターンとして使う場合

よく使うブロックの組み合わせをパターンとして登録しておくことで、記事内にいつでも呼び出せることができます。

他の用途との大きな違いは、「呼び出したあとに編集できる」ことです。

私は記事の冒頭に、このようなブロックパターンを使っています。

以下のように枠組みだけ作っておくだけで、

呼び出した後に、内容をリストに追加していくことができます。

用途は「ブロックパターン」を選択してください。

もっと使い道あり！SWELLのブログパーツ

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

ボックスメニューブロックを使い回す

【ボックスメニュー】ブロックをブログパーツに登録しておき、使い回しています。

私の場合はカテゴリーのリンクを、ボックスメニューで作りました。

• サイトマップ
• スマホ開閉メニュー（ウィジェット）

以上の２箇所で呼び出しています。

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

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

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

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

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

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

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

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

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

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

• サイドバー
• トップページ
• サイトマップ

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

まとめ：SWELLのブログパーツは高機能で進化中

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

1. 通常記事内
2. ウィジェット
3. カテゴリー（タグ）ページのヘッダー
4. CTA
5. メインビジュアル
6. ブロックパターン

ブログパーツを使えば、少し頭を抱えてしまいそうなことでも実現できたりします。

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