SWELLのメインビジュアルにブログパーツを表示する方法｜ID・余白・スマホ表示の確認順

※本記事にはプロモーションが含まれます。

メインビジュアルのコピーをブログパーツで作ると、通常のテキスト欄より自由なレイアウトを組めます。一方、入力する値を間違えると何も表示されません。

原因を切り分けやすくするため、ブログパーツの作成とメインビジュアル側の表示設定は分けて進めます。

以下では、作成・呼び出し・配置調整・公開前確認の4工程に分けて説明します。

全体の流れ：作成と表示設定を分ける

ブログパーツは中身の正本です。メインビジュアルは、そのパーツをどのスライドで呼び出すかを決める場所として分けます。

修正のたびに両方を触ると、どちらが原因か分からなくなります。最初は装飾を減らした最小パーツで表示確認してください。

ブログパーツを最小構成で作る

最初から画像、複数カラム、ボタン、表示条件を重ねると、反映されないときの原因候補が増えます。

文字だけで表示できた後に、ボタンや改行、余白を1つずつ追加します。表示確認の履歴が残るため、問題が起きた変更を戻しやすくなります。

メインビジュアル側へブログパーツIDを指定する

カスタマイザーでトップページのメインビジュアル設定を開き、表示したいスライドのブログパーツID欄へ進みます。

「表示しない」の状態では詳細欄が見えませんでした。「画像」を選ぶとスライドごとの欄が現れ、スライド1のメイン・サブテキストの下にブログパーツIDの入力欄を確認できました。

公式ユーザーフォーラムの解決事例では、入力欄へブログパーツのIDだけを指定するよう案内されています。角括弧を含むショートコードや、ブログパーツの本文を貼る欄ではありません。

IDを入れたらカスタマイザーのプレビューだけで終えず、保存して別タブのトップページを確認します。ログイン状態とログアウト状態も比較します。

スライドが複数ある場合は、対象番号を取り違えていないかも見ます。確認中は1枚だけに絞ると、表示条件を切り分けやすくなります。

余白と配置はブログパーツ側から小さく調整する

表示できた後に、コピーの位置と余白を整えます。中央・左・右の大きな配置はメインビジュアル側で決め、細かな間隔はブログパーツ内の構成で調整します。

公式フォーラムには、スペーサーブロックで位置を調整した事例があります。ただし固定pxを大きく入れると、スマホで過剰な空白になりやすい点に注意が必要です。

余白はPCだけ見て決めず、320px、375px、390px、768px、1280pxで確認します。コピーが画像の主役やボタンと重ならない位置を選びます。

デバイス別にブロックを複製すると、後の文言修正が二重になります。まずは同じ内容が折り返しで成立するか試し、分けるのは必要な場合だけにします。

スマホで崩れるポイント

• コピーが長く、画像の重要部分へ重なる
• 改行位置がPC向けのままで1語だけ残る
• ボタンが横幅を超える
• スペーサーが大きく、メインビジュアルが画面を占有する
• PC専用ブロックしかなく、スマホで内容が消える
• 背景画像と文字色のコントラストが不足する

画像の上へ文字を置く場合は、背景の明暗がスライドごとに変わります。すべての画像で読めないなら、オーバーレイや背景付きテキストを検討します。

メインビジュアルだけで説明を完結させようとすると、文字量が増えます。役割は価値を短く示して次の場所へ送ることに絞り、詳細はトップページ本文へ移します。

表示されないときの確認順

問題が起きた時点で追加CSSやJavaScriptへ進むと、標準設定の誤りが残ります。まず「パーツ単体」「ID指定」「対象スライド」の3点を分けて確認します。

過去のフォーラム事例は当時のバージョンを前提にしています。現行版で同じ症状が出ても、原因を断定せず公式マニュアルと実画面を優先してください。

公開前チェック

スマホのサイト導線まで整える場合は、同クラスターのスマホメニュー記事へ進みます。メインビジュアルと開閉メニューは設定場所も読者の行動も別です。

ブログパーツを記事制作にも活用する

ブログパーツはメインビジュアルだけでなく、繰り返し使う案内を一元管理する用途にも使えます。

ただし、記事ごとに条件が違うCTAまで共通化すると、説明不足になりやすくなります。共通部分と記事固有の判断材料を分けて設計してください。

SWELLを利用中の方は、ブログパーツの作成と表示設定を分け、スマホまで確認すれば作業を完了できます。

関連する設定は、スマホメニューの導線設定で確認できます。

SWELLをまだ利用していない方へ

ブログパーツの再利用やトップページ制作を目的にテーマを替えるなら、Cocoonとの機能差と移行時の注意点を先に確認できます。

公式情報

• SWELL設定マニュアル
• 公式フォーラム：ブログパーツの配置位置について
• 公式フォーラム：メインビジュアルにブログパーツとボタンが反映されない