こんにちは、さくらこです！
女の子WordPressテーマSWELLにある「ブログパーツ」ってどんなことに使うんですか？作り方や使い方を教えてください！
このような質問にお答えします。
SWELLにある『ブログパーツ』は、複数のページで使いまわしたい内容があるときに便利な機能です！
ホームページでもブログでも役立つので、SWELLを導入したらぜひ使ってみてください！
WordPressに「再利用ブロック」という似たような機能がありますが、違いや使い分けについても解説するので参考にしてくださいね！
ブログパーツの基本情報については、下記のSWELL公式ブログからご確認ください！
SWELLにあるブログパーツってなに？
まずはSWELLにある『ブログパーツ』について、どのようなものなのかご紹介したいと思います。
いろんな場所で使いまわせる便利な機能
SWELLのブログパーツとは、一言でいうと「作ったコンテンツをいろんな場所で使いまわせる便利な機能」です。
ブログパーツの機能で作ったものを、記事内やウィジェットなどいろんな場所で使うことができます。
ブログパーツはショートコードで呼び出せるのですが、１回作ってしまえばそのコードを貼るだけで、全く同じ内容を使いまわせるんです！
さくらこいちいち作る手間がなくなるので、ブログ執筆やサイト作成の時間短縮になりますよ！
SWELLのブログパーツのメリットは「効率がいいこと」
SWELLのブログパーツは、内容の変更があるときも１カ所の修正のみで済みます。
これはとくに、記事内でブログパーツを多用しているときに実感するメリットです！
ウィジェットに使ってるぐらいなら場所も把握できますが、記事内だとどのページで使ってるかなんて把握できないですよね。
それにもし把握できていたとしても、多用してるなら全てを修正するって途方に暮れます。
ですがブログパーツは１カ所の修正のみでOKなので、効率よく修正できるし、時間を無駄にすることもありません。
さくらこよく使う内容は後のことも考えると、ブログパーツを使っておくのがおすすめですよ！
SWELLのブログパーツの作り方と場所別の使い方
それではここから、SWELLのブログパーツを登録して使う方法を解説していきます。
ブログパーツの作り方
- 管理画面「ブログパーツ」→「新規追加」
ブログパーツはここから作ります。
作る内容については、使う場所によってもいろいろあるので、下記で具体例を入れながらご紹介していきます！
記事内
記事内でのブログパーツなら、たとえば下記のような内容に使うことができます。
みなさんもブログの中で、このようなプロフィールの挿入を見たことがあるんじゃないでしょうか？
プロフィールは、後々内容を変更することもあると思うので、ブログパーツの利用が最適なんです！
作り方と使い方は下記です。
作り方
今回はSWELLの「キャプションボックス」を使って作っています！
- 管理画面のブログパーツ部分の「新規追加」から、好きなものを作成
- 完成したら右上にある「公開」をクリックしてOK
さくらこタイトルは自分が分かるものであれば、なんでも大丈夫です！
記事内での使い方
- 記事内で使うときは、記事執筆画面の左メニューの中にある「ブログパーツ」を追加します。
- 「ブログパーツを選択」から先ほど作ったものを選ぶ
これだけで手順は完了です！！
さくらこ今回はプロフィールでしたが、内容が固定のものであればなんでも使えますよ！
ウィジェット
次はウィジェット内でのブログパーツ利用です。
ウィジェットを利用すれば、下記の場所なんかに使えます。
- サイドバー
- フッター
- トップページ上部・下部
今回は、当ブログでもやっているように、サイドバーに「おすすめ記事」を入れていきたいと思います！
さくらこちなみにサイドバーに入れると下記のように表示されますよ！
ここに入っている記事は私が選んだものですが、これを作っていきたいと思います！
作り方
同じように管理画面のブログパーツ「新規追加」から始めます。
- 作成画面になったら、左のメニューから「投稿リスト」を追加
- 右側のメニュー「Settings」から、好きな表示方法に設定
- 右側のメニュー「Pickup」から、投稿IDを入力
さくらこ投稿IDは、管理画面「投稿一覧」の、各記事の右側に書いてありますよ！
ウィジェットでの使い方
- 管理画面「ブログパーツ」から、呼び出しコードをコピー
- 管理画面「外観」→ウィジェット
- 左側のウィジェット一覧から「カスタムHTML」を選択
- 右側の「共通サイドバー」の中に追加
- タイトルに好きな文字を入力
- 内容の中に先ほどコピーした呼び出しコードを貼り付ける
これで保存してから更新すると、サイドバーにピックアップした記事が表示されているかと思います！
さくらこ今回はサイドバーに表示させましたが、記事内やフッターへの表示もありですよ！
メインビジュアル
ブログパーツは、なんとメインビジュアルでも使えるんです！
さくらこ当ブログでもメインビジュアルにブログパーツを使っていますよ！
こんな感じで、一見１枚の画像を挿入してるように思うかもしれません。
ですが実は、「背景の画像・真ん中の画像・右側の文字」というように３構成で作ってるんです！
それではメインビジュアル用のブログパーツの作り方を解説していきます。
作り方
- ブログパーツの作成画面を開く
- 左のメニューから「カラム」を追加(３カラム)
- 真ん中に画像、右側に文字を追加
今回は真ん中と右側のカラムしか使っていませんが、お好きなように入れてくださいね！
今回の場合だと、スマホ時の縦並びになったときに、１番左の空白カラム(スマホ時は１番上にくる)が邪魔になります。
なのでPC用とスマホ用の内容を別々に分けて作り、スマホ時に上の空白がないようにしました！
- まずは最初に作ったものをカラムごと「複製」
- カラム全体を選択した状態で、ツールバーのメニューから、上のカラムを「PCのみ」・下のカラムを「スマホのみ」に設定
さくらこ以上で作成は完了です！次はメインビジュアルに表示させていきましょう！
メインビジュアルでの使い方
- 外観→カスタマイズ
- トップページ→メインビジュアルの項目へ移動
- 表示内容の「画像」にチェック
- 表示設定のメインビジュアルの高さを「コンテンツに応じる」
さくらこ高さはお好きなものを選択していただいてOKです！
- スライド１に背景画像を追加
- ブログパーツIDに、ブログパーツの呼び出しコードを入力(数字の部分のみ)
これで保存して更新すると、背景画像の上に先ほど作ったブログパーツが表示されます！
さくらこ背景画像とのバランスが少し難しいですが、いろいろアレンジできるので試してみてくださいね！
SWELLのブログパーツと再利用ブロックの違いと使い分け
SWELLのブログパーツとは別に、『再利用ブロック』というものがあります。
この２つは似ていますが、違いは下記です。
- ブログパーツ→どこでも使える、内容変更の場合は一括変更のみ
- 再利用ブロック→記事内のみで使える、内容の変更は記事ごとでも可
ブログパーツはウィジェットやメインビジュアルでも使えますが、再利用ブロックは記事内のみでしか使えません。
さくらこあとは、内容の変更があったときですが、少し具体例を入れて解説してみますね！
たとえば当ブログでもよく使っている、下記のような「この記事で分かること」の場合。
- あ
- い
- う
これは再利用ブロックで作っていますが、各記事に合わせて内容を変更したいものです。
ですがブログパーツで作って使うと、「あいう」の文字を変更するときに、一括変更しかないので全記事に反映されてしまうんですよね。
さくらここれじゃ記事内で成り立たない！
この内容はキャプションボックスとリストで作ってるので簡単ですが、記事を書く度に１から作るのは結構面倒です。
なのでこの場合は、記事ごとに内容を変更できる「再利用ブロック」を使うのが最適となります！
最初に書いたプロフィールのような、必ず全体的に情報を変更しないといけないものには向いていません。
反映が届かなくても、そんなに困らないものだけに利用してくださいね！
SWELLのブログパーツはホームページのフッターにも最適！
SWELLのブログパーツはホームページのフッターにも最適です。
トップページだけでなく、全体のページにフッターを表示させる場合はぜひ試してみてください！
今回は、こんな感じでフッターに配置させる店舗情報を作成していきます！
ブログパーツの作成
- ①管理しやすい名前をつける
- ②＋を選択
- ③「フルワイド」をクリック
フルワイドが無ければ「すべて表示」から探してください。
こちらがフルワイドを挿入した状態です。
背景サイズの設定
- 右側のバーの「ブロック」を選択
- コンテンツサイズを画像のように設定
さくらこサイズはお好きなものを選んでいただいて大丈夫です！
背景色の設定
- ①背景色を選択
- ②カラーツールのマークを選択
- ③カラーコードを入力
カラーコードは、クリックで直感的に選んでも、コードの直接入力でも大丈夫です。
コードを直接入力する場合、カラー選びにはぜひ下記の記事を参考にしてください！
テキストの入力
- 「見出し」の部分を「店舗情報」に変更
- 右側の「ブロック」からテキストの色を変更
タイトルは「店舗情報」じゃなくても、お好きなもので大丈夫です。
さくらこたとえばサロンなら「サロン情報」「Shop Info」なんかもありますよ！
- ＋を選択
- 「段落」を追加
- テキストを入力する
このとき、画像のように段落の差を変えることができます。
- 大きい段落は「Enter」
- 小さい段落は「Shift＋Enter」
小さい段落は、同じグループ内での段落に使用します。
- すべてのテキストを選択
- ツールバーから「テキスト中央寄せ」をクリック
- 「営業時間」のみ選択
- ツールバーから「B(太字)」をクリック
同じ手順で「アクセス」の部分も追加します。
さくらこ内容は同じじゃなくても大丈夫です！
追加の内容がある場合も、ご自身のサイトに合わせて入れてくださいね！
ご予約ボタン
- 段落を追加
- 「SWELLボタン」を選択
ご予約のボタンを入れておくことで、より予約に繋がりやすくなりますよ！
さくらこ他にも電話番号やLINEを追加することもあります！
- ボタン上に「ご予約はこちらから」と入力
- リンクにURLを追加
こんな感じで、ボタンタイトルとリンク先が表示されていればOKです！
- 右上の「公開」をクリック
さくらこ以上でブログパーツの作成が完了です！
フッターにブログパーツを呼び出す
作成したブログパーツをフッターに配置していきます。
- ブログパーツの一覧から「呼び出しコード」をコピー
- 管理画面「外観」→「ウィジェット」
- 左側から「カスタムHTML」を探す
- 右側の「フッター直前」まで持っていく
さくらこドラッグアンドドロップで持っていくか、プルダウンを開いて選択でも大丈夫です！
- 先ほどコピーした「呼び出しコード」を貼り付ける
- 保存をクリック
さくらこ以上でブログパーツの設置は完了です！
ページを更新してブログパーツを確認
ページを更新して、フッター部分に配置されているか確認してください。
さくらこ画像のように表示されていればOKです！お疲れさまでした！
SWELLのブログパーツを使って効率よくサイトを運営しよう
この記事では、SWELLのブログパーツの作り方や使い方について解説しました。
ブログパーツは使ってみると、とても便利で役立つ機能です。
ブログパーツを使えば、記事内では毎回作る手間が省けるし、ウィジェットやフッターでもアレンジの幅が広がります。
みなさんもぜひこの記事を参考に、ブログパーツを使いこなして効率よくサイトを運営してくださいね！
