こんにちは、さくらこです!

WordPressテーマSWELLにある「ブログパーツ」ってどんなことに使うんですか?作り方や使い方を教えてください!
このような質問にお答えします。
SWELLにある『ブログパーツ』は、複数のページで使いまわしたい内容があるときに便利な機能です!
ホームページでもブログでも役立つので、SWELLを導入したらぜひ使ってみてください!
WordPressに「再利用ブロック」という似たような機能がありますが、違いや使い分けについても解説するので参考にしてくださいね!
ブログパーツの基本情報については、下記のSWELL公式ブログからご確認ください!


SWELLにあるブログパーツってなに?
まずはSWELLにある『ブログパーツ』について、どのようなものなのかご紹介したいと思います。
いろんな場所で使いまわせる便利な機能
SWELLのブログパーツとは、一言でいうと「作ったコンテンツをいろんな場所で使いまわせる便利な機能」です。
ブログパーツの機能で作ったものを、記事内やウィジェットなどいろんな場所で使うことができます。
ブログパーツはショートコードで呼び出せるのですが、1回作ってしまえばそのコードを貼るだけで、全く同じ内容を使いまわせるんです!



いちいち作る手間がなくなるので、ブログ執筆やサイト作成の時間短縮になりますよ!
SWELLのブログパーツのメリットは「効率がいいこと」
SWELLのブログパーツは、内容の変更があるときも1カ所の修正のみで済みます。
これはとくに、記事内でブログパーツを多用しているときに実感するメリットです!
ウィジェットに使ってるぐらいなら場所も把握できますが、記事内だとどのページで使ってるかなんて把握できないですよね。
それにもし把握できていたとしても、多用してるなら全てを修正するって途方に暮れます。
ですがブログパーツは1カ所の修正のみでOKなので、効率よく修正できるし、時間を無駄にすることもありません。



よく使う内容は後のことも考えると、ブログパーツを使っておくのがおすすめですよ!
SWELLのブログパーツの作り方と場所別の使い方
それではここから、SWELLのブログパーツを登録して使う方法を解説していきます。
ブログパーツの作り方


- 管理画面「ブログパーツ」→「新規追加」
ブログパーツはここから作ります。
作る内容については、使う場所によってもいろいろあるので、下記で具体例を入れながらご紹介していきます!
記事内
記事内でのブログパーツなら、たとえば下記のような内容に使うことができます。


みなさんもブログの中で、このようなプロフィールの挿入を見たことがあるんじゃないでしょうか?
プロフィールは、後々内容を変更することもあると思うので、ブログパーツの利用が最適なんです!
作り方と使い方は下記です。
作り方


今回はSWELLの「キャプションボックス」を使って作っています!
- 管理画面のブログパーツ部分の「新規追加」から、好きなものを作成
- 完成したら右上にある「公開」をクリックしてOK



タイトルは自分が分かるものであれば、なんでも大丈夫です!
記事内での使い方


- 記事内で使うときは、記事執筆画面の左メニューの中にある「ブログパーツ」を追加します。


- 「ブログパーツを選択」から先ほど作ったものを選ぶ
これだけで手順は完了です!!



今回はプロフィールでしたが、内容が固定のものであればなんでも使えますよ!
ウィジェット
次はウィジェット内でのブログパーツ利用です。
ウィジェットを利用すれば、下記の場所なんかに使えます。
- サイドバー
- フッター
- トップページ上部・下部
今回は、当ブログでもやっているように、サイドバーに「おすすめ記事」を入れていきたいと思います!



ちなみにサイドバーに入れると下記のように表示されますよ!


ここに入っている記事は私が選んだものですが、これを作っていきたいと思います!
作り方


同じように管理画面のブログパーツ「新規追加」から始めます。
- 作成画面になったら、左のメニューから「投稿リスト」を追加


- 右側のメニュー「Settings」から、好きな表示方法に設定


- 右側のメニュー「Pickup」から、投稿IDを入力



投稿IDは、管理画面「投稿一覧」の、各記事の右側に書いてありますよ!
ウィジェットでの使い方


- 管理画面「ブログパーツ」から、呼び出しコードをコピー


- 管理画面「外観」→ウィジェット


- 左側のウィジェット一覧から「カスタムHTML」を選択
- 右側の「共通サイドバー」の中に追加


- タイトルに好きな文字を入力
- 内容の中に先ほどコピーした呼び出しコードを貼り付ける
これで保存してから更新すると、サイドバーにピックアップした記事が表示されているかと思います!



今回はサイドバーに表示させましたが、記事内やフッターへの表示もありですよ!
メインビジュアル
ブログパーツは、なんとメインビジュアルでも使えるんです!



当ブログでもメインビジュアルにブログパーツを使っていますよ!


こんな感じで、一見1枚の画像を挿入してるように思うかもしれません。
ですが実は、「背景の画像・真ん中の画像・右側の文字」というように3構成で作ってるんです!
それではメインビジュアル用のブログパーツの作り方を解説していきます。
作り方


- ブログパーツの作成画面を開く
- 左のメニューから「カラム」を追加(3カラム)
- 真ん中に画像、右側に文字を追加
今回は真ん中と右側のカラムしか使っていませんが、お好きなように入れてくださいね!


今回の場合だと、スマホ時の縦並びになったときに、1番左の空白カラム(スマホ時は1番上にくる)が邪魔になります。
なのでPC用とスマホ用の内容を別々に分けて作り、スマホ時に上の空白がないようにしました!
- まずは最初に作ったものをカラムごと「複製」


- カラム全体を選択した状態で、ツールバーのメニューから、上のカラムを「PCのみ」・下のカラムを「スマホのみ」に設定



以上で作成は完了です!次はメインビジュアルに表示させていきましょう!
メインビジュアルでの使い方


- 外観→カスタマイズ


- トップページ→メインビジュアルの項目へ移動
- 表示内容の「画像」にチェック
- 表示設定のメインビジュアルの高さを「コンテンツに応じる」



高さはお好きなものを選択していただいてOKです!


- スライド1に背景画像を追加
- ブログパーツIDに、ブログパーツの呼び出しコードを入力(数字の部分のみ)
これで保存して更新すると、背景画像の上に先ほど作ったブログパーツが表示されます!



背景画像とのバランスが少し難しいですが、いろいろアレンジできるので試してみてくださいね!
SWELLのブログパーツと再利用ブロックの違いと使い分け
SWELLのブログパーツとは別に、『再利用ブロック』というものがあります。
この2つは似ていますが、違いは下記です。
- ブログパーツ→どこでも使える、内容変更の場合は一括変更のみ
- 再利用ブロック→記事内のみで使える、内容の変更は記事ごとでも可
ブログパーツはウィジェットやメインビジュアルでも使えますが、再利用ブロックは記事内のみでしか使えません。



あとは、内容の変更があったときですが、少し具体例を入れて解説してみますね!
たとえば当ブログでもよく使っている、下記のような「この記事で分かること」の場合。
- あ
- い
- う
これは再利用ブロックで作っていますが、各記事に合わせて内容を変更したいものです。
ですがブログパーツで作って使うと、「あいう」の文字を変更するときに、一括変更しかないので全記事に反映されてしまうんですよね。



これじゃ記事内で成り立たない!
この内容はキャプションボックスとリストで作ってるので簡単ですが、記事を書く度に1から作るのは結構面倒です。
なのでこの場合は、記事ごとに内容を変更できる「再利用ブロック」を使うのが最適となります!
最初に書いたプロフィールのような、必ず全体的に情報を変更しないといけないものには向いていません。
反映が届かなくても、そんなに困らないものだけに利用してくださいね!
SWELLのブログパーツはホームページのフッターにも最適!
SWELLのブログパーツはホームページのフッターにも最適です。
トップページだけでなく、全体のページにフッターを表示させる場合はぜひ試してみてください!





今回はこんな感じで、フッターに表示させる店舗情報を作成していきます!
ブログパーツの作成


- ①管理しやすい名前をつける
- ②+を選択
- ③「フルワイド」をクリック



フルワイドが無ければ「すべて表示」から探してくださいね!


こちらがフルワイドを追加した状態です。
ここから、サイズや背景色を設定していきます!
背景サイズの設定


- 右側のバーの「ブロック」を選択
- コンテンツサイズを画像のように設定



サイズはお好きなものを選んでいただいて大丈夫です!
背景色の設定


- ①背景色を選択
- ②カラーツールのマークを選択
- ③カラーコードを入力
カラーコードは、クリックで直感的に選んでも、コードの直接入力でも大丈夫です。


テキストの入力


- 「見出し」の部分にタイトルを入力
- 右側の「ブロック」からテキストの色を変更
タイトルは「店舗情報」じゃなくても、お好きなもので大丈夫です!



たとえばサロンなら「サロン情報」「Shop Info」なんかもありますよ!
カラムを追加


- 「+」を選択
- 「カラム」を追加


- パターンは「50/50」を選択





「50/50」を選択すると、このように左右に分かれたカラムが追加されます!
左側のカラムの設定


- 左のカラムに必要なテキストを入力


- 店舗名やサービス名などを入れる場合は、ツールバーの「B」で太字に設定



店舗名などは、目立つように太字にするのがおすすめです!


- テキストを選択して、ツールバーから文字列を「中央寄せ」に変更
ご予約ボタン



今回はお問い合わせページへの誘導ですが、他にも電話番号やLINEを追加することもあります!


- 「SWELLボタン」を追加


- ボタンにテキストとページURLを入力



右側バーから、ボタンのサイズや色を変更できます!
右側のカラムの設定
今回右側のカラムには、Googleマップを表示させます。


- 「カスタムHTML」を追加





このような空白の枠が追加されます!
Googleマップのコードの調べ方


- Googleでご自身の店舗などの住所を検索
- 「地図」を開く


- 「共有」を選択


- 「地図を埋め込む」を選択
- 「HTMLをコピー」をクリック



HTMLコードの左側にあるプルダウンから、地図のサイズを変更することができます!


- コピーしたコードを「カスタムHTML」に貼り付ける
- 右上の「公開」をクリック



以上でブログパーツの作成は完了です。次はフッターウィジェットに、ブログパーツを呼び出しましょう!
フッターにブログパーツを呼び出す
作成したブログパーツをフッターに配置していきます。


- ブログパーツの一覧から「呼び出しコード」をコピー


- 管理画面「外観」→「ウィジェット」に移動


- 左側から「カスタムHTML」を探す
- 右側の「フッター直前」ウィジェットまで持っていく



ドラッグアンドドロップで持っていくか、プルダウンを開いて選択でも大丈夫です!


- 先ほどコピーした「呼び出しコード」を貼り付ける
- 保存をクリック



以上でブログパーツの設置は完了です。ページを更新して、表示されているか確認してください!





画像のように表示されていればOKです!お疲れさまでした!
SWELLのブログパーツを使って効率よくサイトを運営しよう
この記事では、SWELLのブログパーツの作り方や使い方について解説しました。
ブログパーツは使ってみると、とても便利で役立つ機能です。
ブログパーツを使えば、記事内では毎回作る手間が省けるし、ウィジェットやフッターでもアレンジの幅が広がります。
みなさんもぜひこの記事を参考に、ブログパーツを使いこなして効率よくサイトを運営してくださいね!