【便利すぎ！】SWELLブログパーツの作り方や使い方を解説

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

このような質問にお答えします。

SWELLにある『ブログパーツ』は、複数のページで使いまわしたい内容があるときに便利な機能です！

ホームページでもブログでも役立つので、SWELLを導入したらぜひ使ってみてください！

WordPressに「再利用ブロック」という似たような機能がありますが、違いや使い分けについても解説するので参考にしてくださいね！

ブログパーツの基本情報については、下記のSWELL公式ブログからご確認ください！

SWELLにあるブログパーツってなに？

まずはSWELLにある『ブログパーツ』について、どのようなものなのかご紹介したいと思います。

いろんな場所で使いまわせる便利な機能

SWELLのブログパーツとは、一言でいうと「作ったコンテンツをいろんな場所で使いまわせる便利な機能」です。

ブログパーツの機能で作ったものを、記事内やウィジェットなどいろんな場所で使うことができます。

ブログパーツはショートコードで呼び出せるのですが、１回作ってしまえばそのコードを貼るだけで、全く同じ内容を使いまわせるんです！

SWELLのブログパーツのメリットは「効率がいいこと」

SWELLのブログパーツは、内容の変更があるときも１カ所の修正のみで済みます。

これはとくに、記事内でブログパーツを多用しているときに実感するメリットです！

ウィジェットに使ってるぐらいなら場所も把握できますが、記事内だとどのページで使ってるかなんて把握できないですよね。

それにもし把握できていたとしても、多用してるなら全てを修正するって途方に暮れます。

ですがブログパーツは１カ所の修正のみでOKなので、効率よく修正できるし、時間を無駄にすることもありません。

SWELLのブログパーツの作り方と場所別の使い方

それではここから、SWELLのブログパーツを登録して使う方法を解説していきます。

ブログパーツの作り方

• 管理画面「ブログパーツ」→「新規追加」

ブログパーツはここから作ります。

修正や内容の変更があるときも、ここから行うことですべてに反映されます！

作る内容については、使う場所によってもいろいろあるので、下記で具体例を入れながらご紹介していきます！

記事内

記事内でのブログパーツなら、たとえば下記のような内容に使うことができます。

みなさんもブログの中で、このようなプロフィールの挿入を見たことがあるんじゃないでしょうか？

プロフィールは、後々内容を変更することもあると思うので、ブログパーツの利用が最適なんです！

作り方と使い方は下記です。

作り方

今回はSWELLの「キャプションボックス」を使って作っています！

• 管理画面のブログパーツ部分の「新規追加」から、好きなものを作成
• 完成したら右上にある「公開」をクリックしてOK

記事内での使い方

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

• 「ブログパーツを選択」から先ほど作ったものを選ぶ

これだけで手順は完了です！！

ウィジェット

次はウィジェット内でのブログパーツ利用です。

ウィジェットを利用すれば、下記の場所なんかに使えます。

• サイドバー
• フッター
• トップページ上部・下部

今回は、当ブログでもやっているように、サイドバーに「おすすめ記事」を入れていきたいと思います！

元々入っているウィジェット機能には「新着記事や人気記事」はありますが、「おすすめ記事」のように自分で記事をピックアップできるものはありません。

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

作り方

同じように管理画面のブログパーツ「新規追加」から始めます。

• 作成画面になったら、左のメニューから「投稿リスト」を追加

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

今回は「表示する投稿数→３」、「レイアウト→カード型」、「PC時→３列・SP時→１列」にしています！

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

ウィジェットでの使い方

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

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

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

• タイトルに好きな文字を入力
• 内容の中に先ほどコピーした呼び出しコードを貼り付ける

これで保存してから更新すると、サイドバーにピックアップした記事が表示されているかと思います！

メインビジュアル

ブログパーツは、なんとメインビジュアルでも使えるんです！

こんな感じで、一見１枚の画像を挿入してるように思うかもしれません。

ですが実は、「背景の画像・真ん中の画像・右側の文字」というように３構成で作ってるんです！

それではメインビジュアル用のブログパーツの作り方を解説していきます。

作り方

• ブログパーツの作成画面を開く
• 左のメニューから「カラム」を追加(３カラム)
• 真ん中に画像、右側に文字を追加

３カラムのバランスは、「左右25%・真ん中50%」の割合です。

今回は真ん中と右側のカラムしか使っていませんが、お好きなように入れてくださいね！

今回の場合だと、スマホ時の縦並びになったときに、１番左の空白カラム(スマホ時は１番上にくる)が邪魔になります。

なのでPC用とスマホ用の内容を別々に分けて作り、スマホ時に上の空白がないようにしました！

• まずは最初に作ったものをカラムごと「複製」

「複製」はカラム全体を選択したときに、ツールバーの１番右にある３つの点をクリックすると出てきます！

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

メインビジュアルでの使い方

ウィジェットのときと同様に、ブログパーツの呼び出しコードをコピーしておいてください。

• 外観→カスタマイズ

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

• スライド１に背景画像を追加
• ブログパーツIDに、ブログパーツの呼び出しコードを入力(数字の部分のみ)

これで保存して更新すると、背景画像の上に先ほど作ったブログパーツが表示されます！

SWELLのブログパーツと再利用ブロックの違いと使い分け

SWELLのブログパーツとは別に、『再利用ブロック』というものがあります。

この２つは似ていますが、違いは下記です。

• ブログパーツ→どこでも使える、内容変更の場合は一括変更のみ
• 再利用ブロック→記事内のみで使える、内容の変更は記事ごとでも可

ブログパーツはウィジェットやメインビジュアルでも使えますが、再利用ブロックは記事内のみでしか使えません。

たとえば当ブログでもよく使っている、下記のような「この記事で分かること」の場合。

これは再利用ブロックで作っていますが、各記事に合わせて内容を変更したいものです。

ですがブログパーツで作って使うと、「あいう」の文字を変更するときに、一括変更しかないので全記事に反映されてしまうんですよね。

この内容はキャプションボックスとリストで作ってるので簡単ですが、記事を書く度に１から作るのは結構面倒です。

なのでこの場合は、記事ごとに内容を変更できる「再利用ブロック」を使うのが最適となります！

ただデメリットとして、記事内で変更したものは管理画面の「再利用ブロック」内で変更した場合に、反映されない問題があります。

最初に書いたプロフィールのような、必ず全体的に情報を変更しないといけないものには向いていません。

反映が届かなくても、そんなに困らないものだけに利用してくださいね！

SWELLのブログパーツはホームページのフッターにも最適！

SWELLのブログパーツはホームページのフッターにも最適です。

トップページだけでなく、全体のページにフッターを表示させる場合はぜひ試してみてください！

ブログパーツの作成

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

こちらがフルワイドを追加した状態です。

ここから、サイズや背景色を設定していきます！

背景サイズの設定

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

背景色の設定

• ①背景色を選択
• ②カラーツールのマークを選択
• ③カラーコードを入力

カラーコードは、クリックで直感的に選んでも、コードの直接入力でも大丈夫です。

コードを直接入力する場合は、下記の記事で紹介している配色サイトが、色探しにおすすめです！

テキストの入力

• 「見出し」の部分にタイトルを入力
• 右側の「ブロック」からテキストの色を変更

タイトルは「店舗情報」じゃなくても、お好きなもので大丈夫です！

カラムを追加

• 「＋」を選択
• 「カラム」を追加

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

左側のカラムの設定

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

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

• テキストを選択して、ツールバーから文字列を「中央寄せ」に変更

ご予約ボタン

ご予約のボタンを入れることで、お問い合わせページへ誘導し、より予約に繋げやすくしておきます！

• 「SWELLボタン」を追加

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

ボタンのカラーは、管理画面の「SWELL設定」→「エディター設定」から、お好きなものに設定できますよ！

右側のカラムの設定

今回右側のカラムには、Googleマップを表示させます。

• 「カスタムHTML」を追加

Googleマップのコードの調べ方

地図の埋め込みには、Googleマップからのコードが必要です。

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

• 「共有」を選択

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

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

フッターにブログパーツを呼び出す

作成したブログパーツをフッターに配置していきます。

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

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

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

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

SWELLのブログパーツを使って効率よくサイトを運営しよう

この記事では、SWELLのブログパーツの作り方や使い方について解説しました。

ブログパーツは使ってみると、とても便利で役立つ機能です。

ブログパーツを使えば、記事内では毎回作る手間が省けるし、ウィジェットやフッターでもアレンジの幅が広がります。

みなさんもぜひこの記事を参考に、ブログパーツを使いこなして効率よくサイトを運営してくださいね！