MENU

当ブログ愛用のWordPressテーマ

広告

\乗り換え先おすすめテーマ!/

/ブロガーとして本格的に取り組む\

最新のSEO・サイト高速化に対応|WordPressテーマ「SWELL」の評判・レビューはこちら ≫

SWELLの評判・レビューはこちら ≫

クリック

タップ

SWELLブログパーツの使い方|メインビジュアルやウィジェットにも呼び出せる万能型な機能!

「ブログパーツとは何?」

「ブログパーツの作り方を知りたい」

「メインビジュアルやウィジェットでもブログパーツを使える?」

この記事では、そんな方に向けて、SWELLでブログパーツの使い方を解説します。

かめコンパス

こんにちは、かめコンパスです!

この記事を読めば、あなたも簡単に

  • ブログパーツとは何か知ることができる
  • 組み合わせたコンテンツをブログパーツに登録できる
  • 様々な場所にブログパーツを使える

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、記事作成で大幅な時短を実現できています。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください!

SWELL購入を検討中の人はこちらもご覧ください!/

目次

SWELLブログパーツとは…登録したコンテンツを呼び出す機能!

ブログパーツとは、使い回したいコンテンツを前もって登録することにより、他の記事内やそれ以外の場所でもかんたんに呼び出すことができるSWELL専用の機能です。

記事を執筆していると、同じ組み合わせのコンテンツを何度も使う機会があると思います。

その度に記事に同じコンテンツを入力するのは面倒ですよね。

ただブログパーツと使えば、事前に登録したコンテンツをすぐに呼び出せるので、入力する手間と時間を大幅に省くことができ、記事の執筆がラクになりますよ。

かめコンパス

私も新しい記事を書くたびにお世話になっています

登録できるコンテンツは非常に多く、文章や画像、リッチカラムブロックやステップブロックといったブロック機能が登録できます。

また、登録したコンテンツは

  • ブログパーツブロック(=ブロック機能)
  • ブロックパターン
  • ショートコード

の3つの方法で呼び出しできます。

かめコンパス

コピペや数クリックだけでかんたんに呼び出せるよ

それではブログパーツでできることをもう少し詳しく解説します。

ブロック機能やブロックパターンで記事内に呼び出せる

SWELLのブログパーツは、登録したコンテンツやブロックパターン用として登録したコンテンツを記事内に呼び出しできます。

ブログパーツに登録したコンテンツとブロックパターン用として登録したコンテンツの違い

ブログパーツブロックやブロックパターンに登録してあるブログパーツをクリックするだけで記事内に設置できますよ。

ブログパーツブロックで登録したコンテンツを記事内に挿入する手順
ブログパーツブロック
ブロックパターンで登録したコンテンツを記事内に挿入する手順
ブロックパターン
かめコンパス

よく使うコンテンツは登録必須だね

詳しくは本記事「SWELLブログパーツの使い方5選 – 記事内で使う」で後ほど解説します。

ショートコードで記事以外の場所でも呼び出せる

SWELLでブログパーツのショートコードを利用すれば、以下のような様々な場所に呼び出せます。

  • 記事内
  • メインビジュアル
  • ウィジェット
  • カテゴリー・タグページ
  • 著者アーカイブページ
記事内にブログパーツを設定する場所
ブログパーツの設定場所
記事内にブログパーツを使用した様子
記事内に表示されたブログパーツ

記事内とウィジェットにはブログパーツの呼び出しコードをコピペするだけで設置できたり、それ以外の場所ではブログパーツIDを入力するだけで設置できますよ。

ブログパーツの呼び出しコードとブログパーツIDの違い
かめコンパス

コピペだけで設定できてありがたい

修正や編集を全ページのブログパーツに反映できる

通常、複数の記事に挿入した同じコンテンツをすべて修正するには、それら全ての記事1つずつ修正しなければなりません。

ですが、そのコンテンツをブログパーツで登録して記事に使っていれば、そのブログパーツを修正するだけで全ての記事が修正されます。

つまり、100記事あれば100記事分の修正をする必要はなく、1回の修正だけで100記事分の修正ができるということです。

かめコンパス

記事数が多ければ多いほど重宝する機能だね

ブログパーツを利用していれば呼び出しだけではなく、修正や編集にも多くの時間と労力が短縮されますよ。

【類似機能】同期パターンとの違いは“同期”と“呼び出せる場所”にあり

WordPressには同期パターンという標準機能があり、使い回したいコンテンツを前もって登録することにより、複数の記事内に呼び出すことができます。

かめコンパス

以前は同期パターンのことを再利用ブロックと呼んでいたよ

これはSWELL独自の機能であるブログパーツと類似していますが、細かな部分で機能が異なります。

以下の表は、同期パターンとブログパーツの違いをまとめたものです。

同期パターンブログパーツ
標準機能のツールWordPressSWELL
利用できる場所記事内のみ記事内、メインビジュアル、ウィジェット、カテゴリーページなど
ショートコードでの呼び出し不可
同期 ※非同期も可 ※非同期は不可(用途をブロックパターンで利用した場合を除く)

同期パターンとブログパーツの使い分けとして、

  • 記事内に呼び出したい場合は同期パターンを利用する
  • 記事以外の場所に呼び出したい場合はブログパーツを利用する

ことをおすすめします。

ここでコンテンツを登録したブログパーツを10記事内で利用したときのことを考えてみましょう。

10記事内で利用したブログパーツは同期されているので、編集すると10記事すべてのページが編集されてしまいます。

かめコンパス

編集したい記事が1ページだけだったら同期機能が邪魔になるね

一方、同期パターンでは同期させるか非同期させるか選べます。

非同期にすれば、1記事で編集しても残り9記事は編集されずに済みますよ。

かめコンパス

以前、私は同期により編集したくないページも編集されてしまい、1ページずつ修正した経験があります(笑)。かなり面倒だった…

記事以外の場所に呼び出したい場合、同期パターンではできないので、ブログパーツを利用しましょう。

SWELLブログパーツの作り方・登録方法

ブログパーツの作り方と登録方法はSWELL公式サイトでもまとめられていますが、本記事ではより詳しく紹介します。

公式サイト登録したコンテンツを自由に呼び出せる「ブログパーツ」機能

STEP

WordPress管理画面で、ブログパーツ新規投稿を追加の順にクリックする

「ブログパーツ」「新規投稿を追加」がある場所
STEP

タイトルを入力し、登録したいブロックや文章の組み合わせを挿入する

タイトルと登録したいブロックや文章の組み合わせを挿入している様子
STEP

設定ブログパーツの順にクリックし、用途を選ぶ

ブログパーツの用途を設定する手順

用途は「CTA」「カテゴリー用」「タグ用」「ブロックパターン」の4つから選べますが、未選択でもOKです。

用途の説明
  • CTA…記事下に表示する
  • カテゴリー用…カテゴリーページに表示する
  • タグ用…タグページに表示する
  • ブロックパターン用…記事編集ページに表示する
STEP

公開をクリックする

「公開」がある場所

これでブログパーツを作成、登録できます。

かめコンパス

つぎに登録したブログパーツをサイトに呼び出す方法を紹介するよ

SWELLブログパーツの使い方5選

SWELLで登録したブログパーツの使い方を、以下5つの場所別で紹介します。

利用場所

※上のリンクをクリックすると見たい場所へジャンプします。

それぞれ詳しく解説します。

記事内で使う

記事内にブログパーツを使用した様子
記事内にブログパーツを使用

SWELLのブログパーツを記事内で使うときは、用途を選択しても未選択でも呼び出せます。

記事内にブログパーツを呼び出す方法は以下の3つです。

  • ブログパーツブロック…タイトルから探す
  • ショートコード…呼び出しコードをコピペする
  • ブロックパターン…[SWELL]カスタムパターンから選ぶ

好きな方法を使ってください。

タブの切り替え

  1. +ブログパーツの順にクリックする
「+」「ブログパーツ」がある場所
  1. 使いたいブログパーツのタイトルを選ぶ、もしくはタイトル名を検索する
使いたいブログパーツを選択する場所とそのタイトルで検索する場所

これで記事内にブログパーツを設置できます。

ちなみに、ブログパーツブロックは以下2つの方法からも呼び出せます。

タブの切り替え

ブログパーツブロックを呼び出したい段落ブロックの最初に/ブログパーツ、もしくは/blogpartsを入力する 「/」は半角で入力してください。

段落ブロックの最初に「/○○」と入力してブロックを呼び出す様子

自分の好きな方法で呼び出しましょう。

かめコンパス

個人的に「/blogparts」で呼び出すのがおすすめ!マウスを操作せずキーボード入力だけで早くかんたんに呼び出せるよ

個人的に、「ショートコード」はWordPress管理画面に戻って呼び出しコードをコピーしないといけない手間があるので面倒だと感じてます。

ですので、他のページへ移動する必要がなく、記事編集ページで登録したコンテンツを確認できる「ブログパーツブロック」「ブロックパターン」で呼び出す方法がおすすめですよ。

かめコンパス

これで記事の執筆も速くなる!

メインビジュアルで使う

メインビジュアルにブログパーツを使用した様子
メインビジュアルにブログパーツを使用

通常、メインビジュアルには画像とテキスト、ボタンの3つしか配置できません。

ですが、ブログパーツを用いることで様々なコンテンツを配置することができます。

かめコンパス

カスタマイズ性が高く、他サイトと差別化できるトップページを作れるね

SWELLのブログパーツをメインビジュアルで使うときも、用途の選択を問いません。

メインビジュアルにブログパーツを呼び出す方法は下記のとおりです。

STEP

WordPress管理画面で、ブログパーツブログパーツの順にクリックし、ブログパーツIDをコピーする

ブログパーツIDがある場所

呼び出しコードの数字の部分のみコピーしてください。

STEP

外観カスタマイズの順にクリックする

「外観」「カスタマイズ」がある場所
STEP

トップページをクリックする

「トップページ」がある場所
STEP

メインビジュアルをクリックする

「メインビジュアル」がある場所
STEP

「メインビジュアルの表示内容」で画像 or 動画を選ぶ

「メインビジュアルの表示内容」がある場所
STEP

「ブログパーツID」欄に先ほどコピーしたブログパーツIDを貼りつける

「ブログパーツID」欄がある場所
STEP

公開をクリックする

「公開」がある場所

これでメインビジュアルにブログパーツを設置できます。

ウィジェットで使う

サイドバーウィジェットにブログパーツを使用した様子
1例:サイドバーウィジェットにブログパーツを使用

工夫次第では、サイドバーにおすすめ記事や広告リンクを配置したり、フッターをカスタマイズしたりできます。

かめコンパス

いろいろアレンジできて楽しい!

SWELLのブログパーツをウィジェットで使うときも、用途の選択の有無に関わらず呼び出せます。

ウィジェットにブログパーツを呼び出す方法は下記のとおりです。

STEP

WordPress管理画面で、ブログパーツブログパーツの順にクリックし、呼び出しコードをコピーする

呼び出しコードがある場所
STEP

外観ウィジェットの順にクリックする

「外観」「ウィジェット」がある場所
STEP
  1. 「カスタムHTML」をプルダウンする
  2. 設置したいウィジェットエリアを選ぶ
  3. ウィジェットを追加をクリックする
「カスタムHTML」をウィジェットに追加する手順
STEP

カスタムHTMLの「内容」欄に先ほどコピーした呼び出しコードを貼りつけ、保存をクリックする

カスタムHTMLの「内容」欄と「保存」がある場所

これでウィジェットにブログパーツを設置できます。

カテゴリー・タグページで使う

カテゴリーページとタグページでは、以下の2ヶ所でブログパーツを設置できます。

  • カテゴリー・タグページ上部
  • 投稿ページ下部(CTA)

それぞれ詳しく解説します。

カテゴリー・タグページの上部に設置する

カテゴリー・タグページの上部にブログパーツを使用した様子
カテゴリーページの上部にブログパーツを使用

SWELLのブログパーツをカテゴリー・タグページの上部に設置する場合、用途「カテゴリー用」「タグ用」を選びましょう。

カテゴリー・タグページの上部にブログパーツを呼び出す方法は下記のとおりです。

STEP

WordPress管理画面で、投稿カテゴリー(orタグ)の順にクリックする

「投稿」「カテゴリー」「タグ」がある場所
STEP

ブログパーツを設置したい項目をクリックする

ブログパーツを設置したい項目を選んでいる様子
STEP

「ページで呼び出すブログパーツ」で使いたいブログパーツを選ぶ、もしくはブログパーツIDを入力する

「ページで呼び出すブログパーツ」がある場所
STEP

更新をクリックする

「更新」がある場所

これでカテゴリー・タグページの上部にブログパーツを設置できます。

かめコンパス

当ブログもこの機能を使って、カテゴリーページをカスタマイズしたよ

投稿ページの下部(CTA)に設置する

あるカテゴリーページに属する投稿ページの下部(CTA)にブログパーツを使用した様子
投稿ページの下部(CTA)にブログパーツを使用

SWELLのブログパーツをそのカテゴリー・タグページに属する投稿ページの下部に設置する場合、用途「CTA」を選びます。

CTAとは…ユーザーに特定の行動を起こさせるためのもの。例)テキストリンク、広告リンクボタン

カテゴリー・タグページの下部(CTA)にブログパーツを呼び出す方法は下記のとおりです。

STEP

WordPress管理画面で、投稿カテゴリー(orタグ)の順にクリックし、ブログパーツを設置したい項目をクリックする

ブログパーツを設置したい項目を選んでいる様子
STEP

「このカテゴリーのCTA」で使いたいブログパーツを選ぶ、もしくはブログパーツIDを入力する

「このカテゴリーのCTA」がある場所

作成したブログパーツの用途が「CTA」でなければ、選択項目に表示されません。

STEP

更新をクリックする

「更新」がある場所

これでカテゴリー・タグページの下部(CTA)にブログパーツを設置できます。

著者アーカイブページで使う

SWELLのブログパーツを著者アーカイブページで使う場合、用途未選択にしてください。

著者アーカイブページにブログパーツを呼び出す方法は下記のとおりです。

STEP

WordPress管理画面で、ユーザープロフィールの順にクリックする

「ユーザー」「プロフィール」がある場所
STEP

「SWELL追加データ」内の「呼び出すブログパーツのID」で使いたいブログパーツを選ぶ、もしくはブログパーツIDを入力する

「呼び出すブログパーツのID」がある場所

作成したブログパーツの用途が未選択でなければ、選択項目に表示されません。

STEP

プロフィールを更新をクリックする

「プロフィールを更新」がある場所

これで著者アーカイブページにブログパーツを設置できます。

SWELLブログパーツのおすすめな活用例

SWELLのブログパーツの作り方から使い方まで理解できたら、ここでブログパーツのおすすめな活用方法を5つ紹介します。

活用方法
  • 記事内でよく使うコンテンツを登録する
  • カテゴリー・タグページをカスタマイズする
  • サイドバーにおすすめ記事や広告リンクを設置する
  • フッターをカスタマイズする
  • ヘッダーにお問い合わせや電話番号ボタンを設置する

それぞれ詳しく解説します。

記事内でよく使うコンテンツを登録する

記事を書いているときに、よく使う組み合わせのコンテンツはありませんか?

それらのコンテンツを必要とするときに一から挿入するのは面倒ですよね。

ですので、記事内でよく使うコンテンツをブログパーツに登録しておきましょう。

かめコンパス

私もSWELLを使い始めたばかりの頃はこの便利な機能を知らなかったので、もっと早く知りたかったなと思ってます…

私が思う、記事内でよく使いそうなコンテンツの組み合わせは下記4つです。(作り方や各ブロックの使い方は別記事にまとめています)

カテゴリー・タグページをカスタマイズする

SWELLのブログパーツを使えば、以下のようにカテゴリーページとタグページをカスタマイズできます。

カテゴリーページをカスタマイズしていないデフォルトの状態
before/デフォルト
カテゴリーページをブログパーツでカスタマイズした状態
after/カスタマイズ後

デフォルトとカスタマイズ後の違いは以下の3つです。

デフォルトカスタマイズ後
記事の並び順新着順 or 人気順自由
その他コンテンツの配置不可
デザイン性低い高い

つまり、カテゴリーページとタグページにブログパーツを使えば、

  • 関連記事別でまとめられる
  • 画像やテキストを挿入できる
  • 好きなようにデザインできる

といったことができるようになりますよ。

かめコンパス

記事がある程度多くなってからカスタマイズするといいね

サイドバーにおすすめ記事や広告リンクを設置する

通常、サイドバーに設置できるコンテンツの種類は限られていますが、SWELLのブログパーツを使えばおすすめ記事や広告リンクなども設置できます。

広告リンクとおすすめ記事を登録したブログパーツをサイドバーに設置されている様子

サイドバーは視認性が高いので、記事や広告リンクを設置すればクリック数のアップも期待できるでしょう。

かめコンパス

とくにサイドバー最上部にアフィリエイト広告リンクの設置をおすすめ!

クリックで開く

サイドバーにブログパーツを設置する方法はこちら
STEP

外観ウィジェットの順にクリックする

「外観」「ウィジェット」がある場所
STEP
  1. 「カスタムHTML」をプルダウンする
  2. 「〇〇サイドバー」を選ぶ
  3. ウィジェットを追加をクリックする
「カスタムHTML」をサイドバーウィジェットに追加する手順
〇〇サイドバーの種類
  • 共通サイドバー…PC表示で全ページに表示させるサイドバー
  • 共通サイドバー【スマホ版】…スマホ表示で全ページに表示させるサイドバー
  • トップページ専用サイドバー…トップページのみに表示させるサイドバー
  • 追尾サイドバー…ページをスクロールしても一緒についてくるサイドバー
STEP

カスタムHTMLの「内容」欄に設置したいブログパーツの呼び出しコードを貼りつけ、保存をクリックする

カスタムHTMLの「内容」欄と「保存」がある場所

これでサイドバーにブログパーツを設置できます。

ちなみに、サイドバーウィジェットに配置した項目をドラッグ&ドロップで並び替えると、サイドバー内のコンテンツの表示順も変えられますよ。

サイドバーウィジェットに配置した項目を並び替えている様子

フッターをカスタマイズする

SWELLのブログパーツを使えば、以下のようにフッターをカスタマイズできます。

フッターをカスタマイズしていないデフォルトの状態
before/デフォルト
フッターをブログパーツでカスタマイズした状態
after/カスタマイズ後

ユーザーが記事を読んだ後に誘導したい関連記事やまとめ記事、アフィリエイト広告リンクの設置がおすすめです。

かめコンパス

PCとスマホ別でフッターの表示コンテンツを変えられるよ

クリックで開く

フッターにブログパーツを設置する方法はこちら
STEP

外観ウィジェットの順にクリックし、

  1. 「カスタムHTML」をプルダウンする
  2. 「フッター(PC)1~3」or「フッター(スマホ)」を選ぶ
  3. ウィジェットを追加をクリックする
「カスタムHTML」をフッターウィジェットに追加する手順
フッター(PC)1~3の場所
フッター(PC)1~3の場所
STEP

カスタムHTMLの「内容」欄に設置したいブログパーツの呼び出しコードを貼りつけ、保存をクリックする

カスタムHTMLの「内容」欄と「保存」がある場所

これでフッターにブログパーツを設置できます。

フッターの使い方を詳しく知りたい場合は、下の記事を参考にしてください。

ヘッダーにお問い合わせや電話番号ボタンを設置する

SWELLのブログパーツを使うと、ヘッダーにお問い合わせや電話番号ボタンも設置できます。

ブログパーツを使ってヘッダーにお問い合わせボタンを設置した様子
ブログパーツを使ってヘッダーに電話番号ボタンを設置した様子

ヘッダーにお問い合わせや電話番号ボタンを設置すれば、どこであなたとコンタクトをとったらいいのか、ユーザーが迷子にならずに済みますよ。

詳しい設置方法は、以下にあるヘッダーの使い方の記事を参考にしてください。

【注意】ブログパーツではSWELLボタンの計測機能は利用できない⁉

SWELLボタンをブログパーツに登録すると、計測機能が利用できなくなります。

ブログパーツや同期パターン(=再利用ブロック)で計測機能が利用できないとの表示がある場所

計測機能が使えなければ、そのボタンの表示回数やどのくらいクリックされたのかが分かりません。

かめコンパス

主に広告リンクを貼ると思うので、計測機能は必須で使いたいね

ですので、SWELLボタンをブログパーツに登録する際は気を付けましょう。

ただ、用途「ブロックパターン」で登録したブログパーツの場合のみ、SWELLボタンの計測機能を利用できますよ。

ブロックパターン用で登録したブログパーツに登録したSWELLボタンで計測機能が使える様子

SWELLボタンの使い方については、下の記事を参考にしてください。

SWELLブログパーツの使い方まとめ

今回は、SWELLでブログパーツの使い方を紹介しました。

当ブログでは、SWELLに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。

かめコンパス

ためになったという人は“(Twitter)フォロー”や“ブックマーク”してくれると嬉しいです!

SWELLのブログパーツの使い方の記事

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次