有料テーマの購入を検討中の方におすすめ記事

【初心者向け】ブログパーツの使い方から使用例を紹介します

SWELLのブログパーツの使い方
  • URLをコピーしました!
悩子ちゃん

ブログパーツってどうやって使うの?
便利な使い方があったら知りたい!

こんな悩みにお答えします!

悩子ちゃん

ブログパーツってややこしくてよくわからない。

ケイ@

本記事では、
パソコン初心者でもわかるように解説していくよ。

▼ブログパーツでできる一例

  • よく使用するブロックをテンプレート化
  • ヘッダー・サイドバー・フッター
    にブロックを使用できる
  • メインビジュアルにカテゴリーやおすすめ記事を配置できる
ケイ@

とても便利なブロックなので、使い方をマスターしましょう。

  • パソコン初心者でもかんたんに使える
  • かんたんにおしゃれなブログを作れる
  • 記事を書くのが楽しくなるSWELLのブロックエディタ
タップできる目次

SWELLのブログパーツ機能とは?

SWELLのブログパーツ機能とは、
好きなブロックの組み合わせやテキストリンクなどを事前にショートコード化することでいろいろな場所で簡単に呼び出すことができる機能です。

自分がよく使用するブロックや文章をブログパーツに登録することで、記事の執筆時間の短縮にもつながります。

クラシックエディタを使用している方は、SWELLの公式サイトに使用方法が記載されているので確認してください。

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

ブログパーツの作成から、呼び出しまで

再利用ブロックとの違いは?

再利用ブロックとは、
WordPress側が用意した機能で、よく使う文章やブロックを呼び出すことができます。

ショートコード化はできず、記事内のみで使用可能です。

いろいろな場所で使用したい場合は
プラグインが必要

再利用ブロックは、ブロックを登録することでかんたんに余白を取ることができます。

詳しいやり方は、
【SWELL】あなたの記事は読みづらい!?余白を使いこなそう!をご覧ください。

ブログパーツを使える場所

▼ブログパーツを使える場所

  • ウィジェット内
  • メインビジュアル内
  • 記事内
  • カテゴリーページ
  • タグページ
  • CTA
  • 著者アーカイブページ
ケイ@

いろいろな場所で使えるので、とても便利です。

なぜブログパーツを使用するのか

ブログパーツは、
ブロックや広告をショートコード化することで、普段はテキストやボタンしか設置できないメインビジュアルなどに、自由にカスタマイズすることができます。

ケイ@

やれることが無限大に広がります。

ブログパーツの登録方法

ケイ@

まずはブログパーツを登録しましょう。

▼ブログパーツの登録方法

STEP
ダッシュボード→
「ブログパーツ」→
「新規追加」を
クリックする。
ブログパーツの登録方法
ブログパーツの登録方法
STEP
各項目を記入する。
  1. タイトルを記入する。
  2. 使いたいブロックをカスタマイズする。
  3. 用途を選択する。
  4. 公開をクリックする。
ブログパーツ記入箇所
ブログパーツ記入箇所
ブログパーツ完成図
ブログパーツ完成図
STEP
一覧にある呼び出しコードを貼り付けて使用します。

赤枠の呼び出しコードを使用します。

ブログパーツの呼び出しコード
ブログパーツの呼び出しコード
悩子ちゃん

用途の使い分けはあるの?

ケイ@

用途の使い分けを説明するね。

用途の使い分け

スクロールできます
使う場所用途の使い分け
ウィジェットチェックなし
メインビジュアルチェックなし
著者アーカイブページチェックなし
記事内チェックなし
CTACTA
タグ・カテゴリーページカテゴリー用
またはタグ用
ブログパーツの用途の使い分け表

用途のチェックなし=どれでも使用可能です。

お好きな用途を選択してください。

ケイ@

わたしは、上の表の覚え方が楽だったのでチェックなしを使っています。

ブログパーツの使用例

ブログパーツを使用している例を紹介させてくれる方を募集しました。

ブログパーツの使用例を見てイメージを膨らませてみましょう。

画像をクリックすると、拡大できます。

記事内でよく使用するブロックを
テンプレート化

記事内でのブログパーツの使用例
サイト名|はーとぽーと

ゆる子さん|@__yuruko__

カテゴリーページでの使用例

カテゴリーページでのブログパーツの使用例
サイト名|2interior

ぱりーさん|@parryiparryi

フッターメニューでの使用例

フッターメニューでのブログパーツの使用例
サイト名|つぶのおと

のこさん|@noco04291843

ヘッダーメニューでの使用例

ヘッダーメニューでの使用例
当サイト|First Step スクール

各ブログパーツの使い方

  • 記事内…記事内の好きな場所で使用できます。
  • メインビジュアル内…メインビジュアルの真ん中に表示されます。
  • ウィジェット内…いろいろな場所で使用できます。(ヘッダー・サイドメニュー・他)
  • タグ・カテゴリーページ…タグ・カテゴリーページの上部の表示されます。
  • CTA…CTAは各記事の下部にある「この記事を書いた人」の上に表示されます。
ケイ@

使いたい場所を、クリックしてご覧ください。

記事内で使う方法

記事内で使用する場合は、ブロックを選択するパターンか、文字を入力して呼び出すパターンがあります。

ケイ@

自分が楽な方を使用してください。

▼ブロックで呼び出すパターン

STEP
記事内にある「+」をクリックする。
ブログパーツの使い方の説明
ブログパーツ使い方
STEP
ブログパーツと入力するか、下にスクロールして選択する。
テキスト入力からの選択方法
ブログパーツと入力する
SWELLブロックからの選択方法
SWELLブロックから選択する
STEP
登録しているブログパーツを選択すれば完成です。
ブログパーツを選択する
好きなブログパーツを選択して、完成です
STEP
呼び出した後にも編集できるので便利です。

編集したいブログパーツを選択し、赤枠内をクリックすると、編集画面に移動できます。

記事内でブログパーツを編集する方法
このブログパーツを編集するをクリック

▼テキストで呼び出すパターン

文字を入力して呼び出したい場合は、「/blogparts」で呼び出せます。

テキストでブログパーツを使う方法
/biogでも表示されます。

メインビジュアル内で使う方法

メインビジュアルで使用したい場合は、

ダッシュボード→「外観」→
「カスタマイズ」→
「トップページ」→「メインビジュアル」

から設定します。

▼メインビジュアルで使う方法

STEP
ダッシュボード→「外観」→「カスタマイズ」をクリックする。
メインビジュアルでブログパーツを使う方法
ダッシュボードにあるカスタマイズをクリックする
STEP
「トップページ」→
「メインビジュアル」をクリックする。
カスタマイズからトップページを選択する
トップページをクリックする
メインビジュアルを選択する
メインビジュアルをクリックする
STEP
「ブログパーツID」に使用したいブログパーツのIDを貼ったら完了です。
当ブログのブログパーツ使用例
完成図

▼当サイトのメインビジュアルの使用例

メインビジュアルでブログパーツを使用した例

画像をスライドなどで、2枚使用する場合は、2枚目の画像にも違うブログパーツを貼れます。

ウィジェット内で使う方法

ウィジェットは、使用できる項目がとても多いです。

ひとつひとつの項目を覚えるのは大変なので、使用したい場所がどこの項目かを覚えてからやるとスムーズにいきます。

どこの項目が、どの場所にあたるかはSWELLの公式サイトでわかりやすく解説してくれています。

ケイ@

まずは、公式サイトで場所を確認しましょう。

公式サイト:SWELLで使用できるウィジェット一覧

ウィジェット内で使用したい場合は、

ダッシュボード→「外観」→
「ウィジェット」

からブログパーツを使用したい場所にショートコードを貼ります。

▼ウィジェット内で使用する方法

STEP
ダッシュボード→「外観」→「ウィジェット」をクリックする。
ウィジェットでブログパーツを使う方法
外観からウィジェットをクリックする
STEP
「テキスト」または「カスタムHTML」を選択する。
ウィジェットにブログパーツのIDを貼る方法
どちらでもできます
STEP
ブログパーツを使いたい項目を選択し、「ウィジェットを追加」をクリックする。
STEP
文章にブログパーツIDを入力する。

タイトルは入力しなくても使用できます。

タイトルを表示させたい場合は記入してください。

記入後、保存をクリックすれば完了です。

文章にブログパーツのIDを記入する
文章にブログパーツのIDを入力する
保存をクリックする
保存をクリックする
STEP
完成図

▼タイトルを記入した場合の完成図

タイトルを記入した場合の完成図

▼タイトルを記入しない場合の完成図

タイトルを記入しない場合の完成図

タグ・カテゴリー内で使う方法

タグまたはカテゴリー内で使用したい場合は、

ダッシュボード→「投稿」→「タグ」または「カテゴリー」

を選択し、編集画面でブログパーツのショートコードを貼ります。

▼タグ・カテゴリーページで使用する方法

STEP
ダッシュボード→「投稿」→「タグ」または「カテゴリー」を選択する。

タグとカテゴリーの編集したい方を選択してください。

タグ・カテゴリーページでブログパーツを使用する方法
タグまたはカテゴリーを選択する
STEP
編集したいタグまたはカテゴリーを選択する。
タグまたはカテゴリーページの編集をする
ブログパーツを使用したいカテゴリーを選択する
STEP
下にスクロールし、赤枠内にID番号を入力する。

用途が「タグまたはカテゴリー」のみ選択可能です。

タグまたはカテゴリー編集ページでブログパーツIDを記入する
ブログパーツIDの数字のみを記入する
STEP
更新をクリックすれば完了です。
更新をクリックする
更新をクリックする

▼完成図

カテゴリーでのブログパーツの使用例
ケイ@

今回はカテゴリーで説明しましたが、タグも同じ方法で
使用できます。

CTA内で使う方法

CTA内でブログパーツを使用する場合は、カテゴリーで表示を分ける方法一括で表示する方法の2種類あります。

それぞれショートコードを貼る場所が違うので、注意が必要です。

カテゴリーごとに表示する場合は、ブログパーツの用途が「CTA」しか選択できません。

一括で表示する場合は、すべての用途が使用できます。

▼タグまたはカテゴリーごとに表示させたい場合

STEP
ダッシュボード→「投稿」→「タグ」または「カテゴリー」を選択する。
タグ・カテゴリーページでブログパーツを使用する方法
タグまたはカテゴリーを選択する
STEP
編集したいタグまたはカテゴリーを選択する。
タグまたはカテゴリーページの編集をする
CTAを表示したいカテゴリーを選択する
STEP
下にスクロールし、赤枠内にID番号を入力する。

用途が「CTA」のみ選択可能です。

タグまたはカテゴリー編集ページでブログパーツIDを記入する
ブログパーツIDの数字のみを記入する
STEP
更新をクリックすれば完了です。
更新をクリックする
更新をクリックする

▼一括で表示させたい場合

STEP
ダッシュボード→「外観」→
「ウィジェット」をクリックする。
CTAに一括でブログパーツを使用したい場合
外観からウィジェットをクリックする
STEP
「テキスト」または「カスタムHTML」を選択する。
ウィジェットにブログパーツのIDを貼る方法
どちらでもできます
STEP
「CTAウィジェット」を選択し、「ウィジェットを追加」をクリックする。
ウィジェットにブログパーツのIDを貼る方法
STEP
文章にブログパーツのIDを入力する。

記入後、保存をクリックして完了です。

文章にブログパーツIDを入力する
保存をクリックする
ケイ@

カテゴリーごとに広告を変えたりできる、とても便利な機能です。

ブログパーツの注意点

悩子ちゃん

ブログパーツがどこにも見当たらない……。

ケイ@

表示されない場合は、2つの項目を
確認してみてください。

記事内で使用するときに見当たらない場合

ブログパーツの位置
ブログパーツが表示されている
ブログパーツが見当たらない
ブログパーツが非表示

記事内で使用する際に、ブログパーツが見当たらない場合はブログパーツの編集ページを確認してください。

ダッシュボード→「ブログパーツ」から確認できます。

ブログパーツの編集画面に投稿がない
ブログパーツの編集画面に投稿がない

ダッシュボードにブログパーツが見当たらない場合

ブログパーツが表示されている
ブログパーツが非表示
STEP
ダッシュボード→「SWELL設定」を
クリックする。
SWELL設定を確認する
STEP
機能停止をクリックし、
「ブログパーツ」を停止にチェックが入っていないか確認する。
「ブログパーツ」を停止にチェックが入っていないか確認する

チェックを外して、更新をクリックすれば完了です。

更新をクリックする

PC限定!ヘッダー内部にボタンを置く方法

SWELLボタンは、ヘッダー内にも置くことができます。

ケイ@

簡単にできるので、一緒に
やってみましょう。

ヘッダー内部のボタンとは?

悩子ちゃん

ヘッダー内部にボタンを置く?どういうこと?

下記の赤枠内がヘッダー内部となっていて、ボタンを置くことができます。

複数置くことも可能。

ヘッダー内ボタン設定
ヘッダー内ボタン設定

フッター内部にボタンを置くには、
ブログパーツでSWELLボタンを作成する必要があります。

ブログパーツをヘッダー内部に呼び出そう

SWELLボタンのブログパーツを作成して、
ヘッダー内部に貼り付けましょう。

STEP
SWELLボタンのブログパーツを作成する。
SWELLボタンのブログパーツ
ブログパーツ編集画面
STEP
ダッシュボード→「外観」→
「ウィジェット」をクリックする。
外観からウィジェットを選択する。
ウィジェットをクリックする
STEP
テキストをヘッダー内部に追加する。
ヘッダー内部にテキストを追加する
ヘッダー内部にテキストを追加する
STEP
文章にブログパーツIDを貼り付け保存をクリックする。
ブログパーツIDを記入し、保存をクリックする
ブログパーツIDを記入し、保存をクリックする
ヘッダーにブログパーツ使用した例
完成図
ケイ@

簡単にできるので、挑戦してみてください。

ブログパーツの使い方を覚えて憧れのサイトになろう!

ブログパーツの使い方を覚えると、
サイト構成の幅がすごく広がります。

ヘッダーにボタンを置いたり、サイドメニューにボックスメニューを使ってカテゴリーを置いたり憧れのサイトを真似することができます。

SWELLを使っている方は、ぜひチャレンジしてみてください。

SWELLは、ブログパーツの他にも便利な機能がたくさん!

SWELLブロックの使い方を全種類紹介してあります。

【SWELLブロック】全20種類の使い方!初心者向けにわかりやすく解説

  • パソコン初心者でもかんたんに使える
  • かんたんにおしゃれなブログを作れる
  • 記事を書くのが楽しくなるSWELLのブロックエディタ

ブログ村参加しています。

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

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

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

コメント

コメントする

タップできる目次