当ブログテーマ【SWELL】を使った正直な感想 詳しくみる

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

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

女の子

WordPressテーマSWELLにある「ブログパーツ」ってどんなことに使うんですか?作り方や使い方を教えてください!

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

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

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

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

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

目次

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

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

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

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

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

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

さくらこ

いちいち作る手間がなくなるので、ブログ執筆やサイト作成の時間短縮になりますよ!

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

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

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

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

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

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

さくらこ

よく使う内容は後のことも考えると、ブログパーツを使っておくのがおすすめですよ!

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

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

ブログパーツの作り方

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

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

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

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

記事内

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

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

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

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

作り方

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

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

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

記事内での使い方

  • 記事内で使うときは、記事執筆画面の左メニューの中にある「ブログパーツ」を追加します。
  • 「ブログパーツを選択」から先ほど作ったものを選ぶ

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

さくらこ

今回はプロフィールでしたが、内容が固定のものであればなんでも使えますよ!

ウィジェット

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

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

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

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

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

さくらこ

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

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

作り方

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

  • 作成画面になったら、左のメニューから「投稿リスト」を追加
  • 右側のメニュー「Settings」から、好きな表示方法に設定

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

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

投稿IDは、管理画面「投稿一覧」の、各記事の右側に書いてありますよ!

ウィジェットでの使い方

  • 管理画面「ブログパーツ」から、呼び出しコードをコピー
  • 管理画面「外観」→ウィジェット
  • 左側のウィジェット一覧から「カスタムHTML」を選択
  • 右側の「共通サイドバー」の中に追加
  • タイトルに好きな文字を入力
  • 内容の中に先ほどコピーした呼び出しコードを貼り付ける

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

さくらこ

今回はサイドバーに表示させましたが、記事内やフッターへの表示もありですよ!

メインビジュアル

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

さくらこ

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

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

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

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

作り方

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

さくらこ

背景画像とのバランスが少し難しいですが、いろいろアレンジできるので試してみてくださいね!

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

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

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

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

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

さくらこ

あとは、内容の変更があったときですが、少し具体例を入れて解説してみますね!

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

この記事で分かること

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

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

さくらこ

これじゃ記事内で成り立たない!

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

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

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

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

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

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

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

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

今回は、こんな感じでフッターに配置させる店舗情報を作成していきます!

ブログパーツの作成

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

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

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

背景サイズの設定

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

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

背景色の設定

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

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

コードを直接入力する場合、カラー選びにはぜひ下記の記事を参考にしてください!

テキストの入力

  • 「見出し」の部分を「店舗情報」に変更
  • 右側の「ブロック」からテキストの色を変更

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

さくらこ

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

  • +を選択
  • 「段落」を追加
  • テキストを入力する

このとき、画像のように段落の差を変えることができます。

  • 大きい段落は「Enter」
  • 小さい段落は「Shift+Enter」

小さい段落は、同じグループ内での段落に使用します。

  • すべてのテキストを選択
  • ツールバーから「テキスト中央寄せ」をクリック
  • 「営業時間」のみ選択
  • ツールバーから「B(太字)」をクリック

同じ手順で「アクセス」の部分も追加します。

さくらこ

内容は同じじゃなくても大丈夫です!
追加の内容がある場合も、ご自身のサイトに合わせて入れてくださいね!

ご予約ボタン

  • 段落を追加
  • 「SWELLボタン」を選択

ご予約のボタンを入れておくことで、より予約に繋がりやすくなりますよ!

さくらこ

他にも電話番号やLINEを追加することもあります!

  • ボタン上に「ご予約はこちらから」と入力
  • リンクにURLを追加

こんな感じで、ボタンタイトルとリンク先が表示されていればOKです!

  • 右上の「公開」をクリック
さくらこ

以上でブログパーツの作成が完了です!

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

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

  • ブログパーツの一覧から「呼び出しコード」をコピー
  • 管理画面「外観」→「ウィジェット」
  • 左側から「カスタムHTML」を探す
  • 右側の「フッター直前」まで持っていく
さくらこ

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

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

以上でブログパーツの設置は完了です!

ページを更新してブログパーツを確認

ページを更新して、フッター部分に配置されているか確認してください。

さくらこ

画像のように表示されていればOKです!お疲れさまでした!

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

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

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

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

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

よかったらシェアしてね!
目次