SWELLのブログパーツの作り方３ステップと６つの使い方

この記事で解決できる悩み

こんな悩みを解決する記事を用意しました！

ボクの初めてのブログも「30万PV」を超えるメディアに成長しました！

本記事の信頼性

『SWELL』のブロックの中でも「ブログパーツ」って、ぶっちゃけよくわかんないですよね？

そこで、記事の前半で「SWELLのブログパーツとWordPressのパターン（再利用ブロック）との違い」を。

後半では「ブログパーツの作り方と呼び出し方、効果的な使い方」について解説します。

本記事を最後まで読むことで、SWELLのブログパーツを使いこなして、快適なブログ運営ができますよ！

＼使いやすさなら／

国内人気No.1

SWELLのブログパーツとは

ブログパーツとは、SWELL独自のブロックです。

たとえば、ブログパーツでこんな「ブロックの組み合わせ」を作ったとしましょう👇️

テキストにすると、次のとおり。

ブロックの組み合わせ

これを最後のH2見出しの下に、しかも全記事に入れるとしたら？

なぜなら、ブログパーツは大元を編集するだけで全ての記事に反映されるから。

ブログパーツの作り方と使い方

しかも、ブログパーツは「記事」以外にも使えるんです。

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

そして、これが「パターン（再利用ブロック）」との違いです。

WordPress標準機能パターン（再利用ブロック）との違い

表は横にスクロールできます

つまり、ブログパーツは「パターンの上位互換」。

『SWELL』ユーザーは「パターン」を使わなくてOK！

ショートコードの便利な点は「SWELLのブログパーツの使い方」で解説しています。

また、公式サイトにも「ブログパーツの解説記事」があるので、一読しておいてくださいね👇️

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

SWELLのブログパーツの作り方・編集方法【３ステップ】

SWELLの「ブログパーツの作り方・編集方法」は、次のとおり。

この章のもくじ

普通に記事を書くのと全く一緒です！

ステップ①タイトルを決める

まずは、ブログパーツの「タイトル」を決めましょう。

あなたにしか見えないので何でも大丈夫。

とはいえ、呼び出すときに「タイトルで検索できる」ので、わかりやすいほうがいいですね。

タイトルの例

※「CTA（Call To Action）」とは、読者に次の行動を促すパートのこと。

そのまんまでOKです。

ステップ②ブログパーツを作る

あとは通常の記事を書くのと全く一緒です。

エディタに作った全てのブロックが「一つのブログパーツ」になります。

「ブロック数」や「文字数」に制限はありませんよ。

ステップ③用途を決めて公開する

右のメニューバーに「用途」と「公開」ボタンがあります。

４つの用途

とはいえ、用途を決めなくても「公開」できますし、呼び出せます。

また、用途は追加することもできますよ。

「公開」しただけでは、どこにも公開されないので安心してくださいね。

SWELLのブログパーツの使い方・呼び出し方６つ

SWELLの「ブログパーツの使い方・呼び出し方」は、次のとおり。

この章のもくじ

パーツ別に解説しますね！

その①記事内

ブログパーツの呼び出し方は「ほかのブロック」と同じです。

ブログパーツの呼び出し方

あとはブログパーツを呼び出すだけで、プレビューされますよ。

その②ウィジェット（ヘッダー・サイドバー・フッター）

ウィジェットにブログパーツを設置するときは「ショートコード」を使います。

呼び出しコード

ブログパーツ一覧から「ショートコード」をコピーしてください。

たとえば、こんな場所にブログパーツを表示できますよ。

設置場所

利用できるウィジェットは「テキスト」、または「カスタムHTML」を使います。

ブログパーツの呼び出し方

「タイトル」はなしで大丈夫です。

その③メインビジュアル

メインビジュアルには「ショートコードのID（数字）」だけを使います。

「ブログパーツID」に数字を入力するだけ。

メインビジュアルの順番

ブログパーツは「テキストとボタンのあいだ」に表示されますよ。

その④カテゴリーページとタグページ

『SWELL』はカテゴリーページとタグページをカスタマイズできます。

カテゴリーページをカスタマイズ

そこで「ブログパーツ」の出番です💡

カスタマイズのやり方

カスタマイズ済みのカテゴリーページは「デモサイト」で確認してくださいね。

では、ブログパーツの呼び出し方です👇️

ブログパーツを表示したいカテゴリーの「編集」をクリック。

あとは「ページで呼び出すブログパーツ」に「ID（数字のみ）」を入れるだけ。

また、カテゴリーページとタグページには、ブログパーツを２つ表示できるんです。

２種類のブログパーツ

つまり、カテゴリー別に「CTA（Call To Action）」を設置できるってこと！

カテゴリー別に訴求を変える

ちなみに、カテゴリーページには他にもこんなカスタマイズが👇️

SWELL設定

SEO SIMPLE PACK設定

「更新」をクリックすれば、反映されますよ。

くわしくは別記事でまるっと解説しています。

関連記事SWELLはSEOに弱い？５つの優位性と２つの設定方法

その⑤著者アーカイブページ

著者アーカイブページとは

とはいえ、プラグイン『SEO SIMPLE PACK』のデフォルト設定で著者ページへのアクセスは無効化されています。

【「著者」のアーカイブページを使用しない】で「いいえ」を選べば、アクセスできるようになりますよ。

ブログパーツの呼び出しは「プロフィール」で行います👇️

あとは「呼び出すブログパーツのID」に「ID（数字のみ）」を入れるだけ。

著者ページをカスタマイズしたい時にどうぞ。

その⑥ブロックパターン

ブロックパターンとは、よく使うブロックの組み合わせを登録・呼び出せる機能のこと。

ブログパーツとの決定的な違いは「呼び出したあとに編集できる点」です。

つまり、よく使う「未完成なブロック」を〝下書き〟として登録しておくのです（まさに再利用ブロック）！

ブロックパターンの作り方と使い方

これで「ブロックパターンのブログパーツ」をエディタに呼び出し、編集もできますよ。

SWELLのブログパーツの効果的な使い方５選

SWELLの「ブログパーツの効果的な使い方」は、次のとおり。

この章のもくじ

「デモサイト」を別タブで開きながら、どうぞ👇️

その①記事編（プロフィール）

「アフィリエイト訴求パート」とは、こんな感じ👇️

SWELLを導入したい方へ

「目次上」や「記事末（CTA）」に設置されることが多いですよね。

なぜなら、クリック率が高いから。

クリック率が高い理由

アフィリエイトだけでなく、Googleアドセンスでも同じです。

また、アフィリエイト訴求パートではなく、「この記事を書いた人（プロフィール）」を〝画像〟で設置しているブロガーも多いですよね👇️

こういったパートはデータを分析しながら、どんどん変えていくもの。

記事が増えると地獄なので、「ブログパーツ」で一元管理しましょう。

ここで注意点

ブログパーツで作ったSWELLボタンでは、クリック率を計測できないんです😱

クリック率を計測したいなら、ボタンは普通に設置しましょう。

関連記事SWELLの目次の作り方｜サイドバーや表示されない時の対処法も

関連記事【SWELL】この記事を書いた人の編集方法｜非表示にする方法も

その②ウィジェット編（ヘッダー・サイドバー・フッター）

ウィジェットには「通常では設置できないブロック」をショートコードで呼び出すのがオススメ。

デモサイトでは「フッター直前」に〝スタイルをあてた段落ブロック〟を設置しています。

エディタ上で作らないと、CSSを書くしかないですからね。

その③メインビジュアル編

メインビジュアルの「通常ボタン」って簡素なんですよね。

ブログパーツなら「キラッと光るボタン」も使えるので、あえてそうしています。

「リッチカラムブロック」を使って、メインビジュアルを３列に分けて、そこにブロックを入れるのも面白いですね。

くわしくは「SWELLのブログパーツをメインビジュアルに複数いれる方法」で解説しています。

その④カテゴリーページ編

カテゴリーページは「収益記事」にカスタマイズするのがオススメ！

なぜなら、カテゴリーページは「SEOに強い」から。

カテゴリーページがSEOに強い理由

たとえば、キーワードが「SWELL」なら・・・

これをカテゴリーページにする

こういったキーワードが「カテゴリーページ」になりますね。

アフィリエイトがいちばん発生する記事は決まってるので、収益記事をブログパーツで作りましょう。

関連記事SWELLはSEOに弱い？５つの優位性と２つの設定方法

その⑤ブロックパターン編

ボクはこのあたりを呼び出すことが多いですね。

「テキストやリンク先を入力するだけでいい状態」にしておくのです。

リスト入りグループ

作成済みのテーブル

「アンカーリンク付きのボックス」とは、コレのことですね👇️

SWELLのブログパーツをメインビジュアルに複数いれる方法

SWELLのブログパーツを「メインビジュアルに複数いれる方法」は、次のとおり。

この章のもくじ

正確には「複数あるように見せる方法」ですね👇️

ステップ①ブログパーツでリッチカラムブロックを使う

リッチカラムブロックを使えば、メインビジュアルを「３列」にできます。

右のメニューバーで「PCで３列」、「タブレットとスマホでは１列」になるように設定してください。

列数

デモサイトでは、各カラムに「バナーリンク」を入れてみました。

ステップ②各カラムにブロックを入れる

画像を「アップロード」、または「メディアライブラリ」から選びます。

３ステップ

もちろん中身は「バナーリンク」じゃなくてもいいですよ。

関連記事【初心者必見】SWELLブロックの使い方｜完全マスター講座

ステップ③ブログパーツをメインビジュアルに呼び出す

ブログパーツを「公開」したら、呼び出しコードの「ID」を覚えてください（用途はなしでOK）。

あとは「ブログパーツID」に〝数字〟を入れるだけ。

さらに「メインテキスト」や「サブテキスト」も入れられますが、ここには入れないほうがいいですね。

さいごに、右上の「公開」をクリック。

これで「メインビジュアルに複数のブロック」を表示できました！

スマホでは「左・中央・右」の順番に〝縦並び〟になりますよ。

補足Swellのメインビジュアルに表示したブログパーツの位置を変える方法

これがテキストの位置「中央」を選んだときのデフォルト値です👇️

右上のCopyをクリック

/* メインビジュアルの位置 */
.p-mainVisual__textLayer {
    left: 50%; /* 横 */
    top: 0; /* 縦 */
}

たとえば、こんな風に数値を変更すると・・・

右上のCopyをクリック

/* メインビジュアルの位置 */
.p-mainVisual__textLayer {
    left: 70%; /* 横 */
    top: 120px; /* 縦 */
}

「中央」でも「左」でも「右」でもない位置に、ブログパーツをふくむメインビジュアルの要素を配置できますよ。

【Q&A】SWELLのブログパーツに関するよくある質問

SWELLのブログパーツに関する「よくある質問（Q&A）」は次のとおり。

この章のもくじ

順番に見ていきましょう！

Q1：SWELLのブログパーツが表示されない原因は？

A考えられる原因は次の６つになります。

６つの原因

「ID（数字）だけ」でいいのに、ショートコードを丸ごとコピペしちゃうのは〝あるある〟ですね。

Q2：SWELLのブログパーツのCSSが読み込まれない原因は？

A「CSSが読み込まれない ＝ デザインが崩れる」場合は・・・

「コンテンツに合わせて必要なCSSだけを読み込む」の✅️を外してください。

これでブログパーツに使用しているCSS（デザイン）も読み込まれるようになりますよ。

Q3：SWELLのブログパーツは複製できないの？

Aプラグインを導入すれば、１クリックで複製できます。

ブログパーツの複製方法

これでブログパーツを複製・編集できますよ。

プラグインを入れたくないなら・・・

ブロックを一括コピー

左下に「X個のブロックをクリップボードにコピーしました。」と表示されれば、コピーできていますよ。

Q4：Swellのメインビジュアルのカスタマイズ方法は？

A次の４ステップになります。

メインビジュアルのカスタマイズ方法

くわしくは別記事でまるっと解説しています👇️

関連記事SWELLのトップページをおしゃれに！カスタマイズのやり方大全

【まとめ】SWELLの神機能ブログパーツを使い回そう！

「SWELLのブログパーツ」について解説しました。

まとめ

長くブログを運営すればするほど、ブログパーツの便利さが身に沁みます。

せっかく『SWELL』を選んだなら、使わないとただの損ですよ！

合わせて読みたい

「ブログパーツ」以外も解説しています。ブックマーク推奨です🙌

＼使いやすさなら／

国内人気No.1

SWELLを導入したい方へ