【SWELL】ブログパーツの使い方～ヘッダー・フッター・メインビジュアルカスタマイズ～

まずは、管理画面で「ブログパーツ」をクリック、もしくはブログパーツにカーソルを合わせ「新規投稿を追加」をクリックします。

記事作成同様「タイトル入力」→「コンテンツ作成」をします。

今回はSWELLブロックの「SWELLボタン」でヘッダーに固定するボタンを作成しました。

SWELLボタンでは、スタイル・サイズ・カラー・ボタン内のアイコン設置など、さまざまな変更ができます。

「SWELLボタン」では、ボタンの表示回数やクリック数などを計測できる機能があります。ブログパーツで作成したSWELLボタンは、計測機能が使えません。SWELLの計測機能を使いたい場合は注意が必要です！

こちらが、実際のブログパーツ作成画面です。

コンテンツの作成が済んだら、用途を選択し、右上の「公開」ボタンを押しましょう！

用途は下記の4つから選択できます。

未選択でもブログパーツの作成はできますが、下記②③のカテゴリーやタグ一覧ページのカスタマイズをしたい場合は、用途の選択が必須です。

• CTA
  （マーケティング用語で”コール トゥ アクション”と呼ばれ、ユーザーの行動を促すためのボタンやバナーリンクなどを指します。）
• カテゴリー用
  （カテゴリーごとにアーカイブページや記事下のカスタマイズができます。）
• タグ用
  （タグごとにアーカイブページのカスタマイズができます。）
• ブロックパターン
  （記事内で使い回したいコンテンツを指します。）

公開すると、呼び出しコードが発行されます。

コードは、ブログパーツ一覧の画面から確認できます。

ウィジェットやメインビジュアルでは、ブログパーツの一覧画面からコピーして使います。

記事内では、ブログパーツのブロックから選択して使えます。

まずは、呼び出したい部分にブログパーツを設置します。

次に、使いたいブログパーツを選びます。

ブログパーツのブロックを選択すると下記画面がでてきます。

記事内での利用の場合、呼び出しコードを控える必要はありません。

「ブログパーツを選択」「用途で絞り込む」「タイトルで検索」の3パターンから呼び出しできます。

ここでは、「LINEおともだち追加バナー」を呼び出してみました。

管理画面のブログパーツだけでなく、記事作成エディタからもブログパーツの編集ができます。

まずは、呼び出しコードを控えましょう。

ブログパーツの一覧画面からコピーします。

今回は、「ブログパーツの新規作成」で紹介した「お問い合わせボタン」を呼び出します。

次に、管理画面から「ウィジェット」を開きます。

このようなウィジェット一覧が表示されます。

右側の赤枠内の箇所に、左側から選んださまざまなウィジェットの追加ができます。

左側のウィジェット一覧から追加したい項目と追加する場所を選びます。

今回は「カスタムHTML」を「ヘッダー内部」に追加します。

「ヘッダー内部」を選択し「ウィジェットを追加」をクリック。

すると、右側の「ヘッダー内部」に「カスタムHTML」と表示されます。

内容の部分に控えておいた呼び出しコードを貼り付け、保存します。

実際のページを見てみましょう。

きれいにボタンが表示されていればOKです！

まずは、呼び出しコードを控えましょう。

ブログパーツの一覧画面からコピーします。

次に、管理画面から「ウィジェット」を開きます。

今回は、「フッター直前」と「フッター（PC）1」を紹介します。

「フッター直前」と「フッター（PC）1」それぞれの場合に分けて紹介します。

どちらも手順は同じですが、追加する場所と実際のページでの見え方が違います。

ヘッダー同様、きれいに表示されていればOKです！

まずは、ブログパーツの作成。

今回は下記画像のように、メインビジュアルの上に3つのボタンを設置してみましょう！

どの媒体でも、リッチカラムでボタンを横3列に並べています。

余談ですが、今回はパソコンとスマホで余白の設定を変えたかったため、ブログパーツもそれぞれ表示を切り替えて作成しています。

下記画像のように、エディタ内で簡単に表示の切り替え設定ができます。

＼ ”リッチカラム”の詳しい使い方はこちらの記事で解説 ／

公開後は、呼び出しコードのid数値を控えます。

今回の場合、idの後ろにある「397」を使います。

実際にブログパーツをメインビジュアルで呼び出しましょう！

「外観」→「カスタマイズ」→「トップページ」→「メインビジュアル」の順にクリックします。

メインビジュアルを開き、スクロールすると「各スライドの設定」という箇所があります。

その中の「ブログパーツID」に先程控えた「397」という数字だけを貼り付けます。

スライドが複数枚ある場合は、それぞれのスライドで表示を変えることもできます！

その場合は、2枚目のスライドにもお好みでテキストやブログパーツのコードを入力しましょう。

今回は、2枚のスライドを使っており、テキストやブログパーツは固定させています。

同じく「メインビジュアル」のメニューから設定ができます！

テキストやブログパーツの表示が同じ場合は、1枚目のスライドだけ入力してチェックを入れましょう。

表示確認をして問題なければ完成です！