SWELLメインビジュアルにブログパーツを表示する方法｜ID設定・余白・スマホ対応

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

SWELLのメインビジュアルへブログパーツを出すには、パーツを保存し、そのIDを対象スライドへ指定します。本文やショートコード全体を貼る欄ではないため、まず文字だけの小さなパーツで表示を確かめるのが近道です。表示できてからボタン・余白・スマホの折り返しを順に整えましょう。

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

最初は文字だけのブログパーツを作り、IDで呼び出す

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

ブログパーツの内容とメインビジュアルの設定を同時に変えると、表示されない原因を追いにくくなります。まずパーツを保存し、次にIDを指定して確認します。正常に見えた状態を基準に、変更を一つずつ足してください。

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

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

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

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

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

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

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

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

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

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

最初にメインビジュアル側で左・中央・右の大きな配置を決めます。その後、ブログパーツ内で見出しとボタンの間隔を整えましょう。位置合わせだけのために大きな余白を入れると、画面幅が変わったときに崩れやすくなります。

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

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

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

スマホで崩れるポイント

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

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

メインビジュアルでは、誰向けのページかと次の行き先を短く伝えます。たとえば制作サービスなら「小さな会社のWordPress制作」と「料金と制作例を見る」の組み合わせです。説明を詰め込むより、詳しい条件を次のページで読めるようにすると、狭いスマホ画面でも目的が伝わります。

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

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

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

公開前チェック

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

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

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

ブログパーツで共通化するのは、更新したときに表示先すべてへ反映したい情報です。記事別の条件まで共通にすると、別の読者へ不適切な説明が出る場合があります。変更後はトップページだけでなく代表的な呼び出し先も確認し、PC・スマホで文字とリンクが使える状態まで仕上げてください。

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

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

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

ブログパーツを再利用して制作を効率化したい方は、CocoonとSWELLの編集機能と移行時の違いを確認する記事へ進めます。今あるサイトを移す作業も含めて、導入する価値を判断してください。

公式情報

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