本記事では、KARTE Blocksを活用してサイト内のコンテンツをブロック化して並び替える方法を紹介します。

ブロックの並び替えを行いたいケース例

  • ランディングページの各コンテンツの順番を変更してABテストをしたい
  • サイトの下部にあるコンテンツを上部に持っていくことでコンテンツの閲覧を増やしたい

ブロックの並び替え方法

ブロックを並び替えるには主に以下の方法があります。それぞれ注意点がありますので、事前に確認した上でご自身のサイト、スキルにあった方法を選択ください。

  • ノーコードで行う
    • ブロックの追加＋ブロックの非表示で並び替える
    • ドラッグ＆ドロップで並び替える
  • ローコードで行う
    • CSSで行う
    • JavaScriptで行う

ノーコードで行う（ブロックの追加＋ブロックの非表示で並び替える）

ブロックの追加＋ブロックの非表示でブロックを並び替える方法です。

サンプルケース

下記のようなランディングページ内のブロックを並び替える（コンテンツ2をコンテンツ1の上に持ってくる）ケースを想定します。

null

設定の流れは下記になります。

  • 並び替えを行うコンテンツの準備を行う
    • オリジナルブロックの登録
    • ブロックライブラリの登録
  • 元々上部にあるコンテンツ(コンテンツ1)の上に、上部に持っていきたいコンテンツ（コンテンツ2）を追加する
  • 元のコンテンツ（コンテンツ2）を非表示にする

設定方法

オリジナルブロックを登録する

  • ブロックリスト→「オリジナルブロックを登録」から、並び替えを行いたいコンテンツ1、コンテンツ2をそれぞれブロックとして登録します。

null

コンテンツ2をブロックライブラリに登録

  • ブロックリスト→コンテンツ2の「ブロックの変更」をクリックし、「別のブロックに変更」→「オリジナルブロックを元に作成」を選択
  • エディタ画面右上の「ブロックライブラリに追加」をクリックし、対象のブロックをブロックライブラリに登録する

null

コンテンツ1の上にコンテンツ2を追加する

  • ブロックリスト→コンテンツ1の「ブロック変更」をクリックし、変更内容→「前後にブロックを追加」→「オリジナルブロックの前に挿入」→「ブロックライブラリから作成」→先ほど登録したブロックを選択する
  • 挙動を確認して、問題なければ「編集を終了」→「保存して配信」

null

コンテンツ2を非表示にする

  • ブロックリスト→コンテンツ2の「ブロックの変更」をクリックし、「ブロックを非表示」を選択する
  • 「保存して配信」をクリック

null

注意点

  • 並び替え対象のブロックが動的に変更される（ex.アクセス、セッション、時間帯などで中身が変わる）場合、この方法での並び替えは行えません。
    • 後述する「ローコードで実現する」の設定方法をご確認ください。

ノーコードで行う（ドラッグ＆ドロップで並び替える）

登録したブロックをドラッグ＆ドロップで並び替える方法です。

サンプルケース

下記のようなページ内のブロックを並び替える（コンテンツ2をコンテンツ1の左に持ってくる）ケースを想定します。

null

設定方法

オリジナルブロックを登録する

  • ブロックリスト→「オリジナルブロックを登録」から、コンテンツ1、コンテンツ2を含む要素を一つのブロックとして登録します。

コンテンツ1とコンテンツ2を入れ替える

  • ブロックリスト→コンテンツ2の「ブロックの変更」をクリックし、「別のブロックに変更」→「オリジナルブロックを元に作成」を選択
  • エディタ左ペインの「すべてのブロック要素」ー→要素を折り畳み、ドラッグ＆ドロップで順番を入れ替える
  • 挙動を確認して、問題なければ「編集を終了」→「保存して配信」

null

注意点

  • 並び替え対象のブロックが動的に変更される（ex.アクセス、セッション、時間帯などで中身が変わる）場合、この方法での並び替えは行えません。
    • 後述する「ローコードで実現する」の設定方法をご確認ください。
  • サイトのHTML構造によっては、一つのブロックとして登録できないことがあります。
  • 登録したブロックが大きい場合、ブロックリストで表示数がカウントされません。詳細は下記をご確認ください。

ローコードで行う(CSS)

CSSのフレックスボックスという概念を活用することで、CSSでブロックの並び替えが可能です。フレックスボックスの詳細については下記をご確認ください。

設定方法

  • ブロックリスト→「オリジナルブロックを登録」から、並び替えを行いたいコンテンツの親要素をブロックとして登録する
  • ブロックリスト→登録したブロックの「ブロックの変更」をクリック→「別のブロックに変更」→「オリジナルブロックから作成」を選択
  • エディタ左ペインのコード→CSSを選択し、下記のように設定する
/* 親要素のセレクタを設定 */ 
親要素 {
  display: flexbox;
}

/* コンテンツ1のセレクタを設定 */
コンテンツ1 {
  order: 2
}

/* コンテンツ2のセレクタを設定 */
コンテンツ2 {
  order: 1  /* orderプロパティで並び順を指定 */
}
  • 挙動を確認して問題なければサイトに配信する

注意点

  • サイト側で既にフレックスボックスの指定がされている場合、新たにdisplay: flexbox;を指定する必要はありません。
  • サイトの構造や記述の仕方によって、display: flexbox;を設定することで対象の要素やサイト全体のスタイルが崩れる可能性があります。
    • 本番に配信する際には、プレビューでの確認やテスト配信を行ってください。
    • また、設定にはCSSの知識が必要になりますので、予めご了承ください、
  • 上記はサンプルコードになります。そのままコピーしても動きませんので、ご注意ください。
  • コードを記述して設定した場合、ブロックごとの効果計測を行うことはできません。予めご認識ください。

ローコードで行う(JavaScript)

JavaScriptを記述してブロックの並び替えを行うこともできます。

設定方法

レコメンドコンテンツなど、動的にコンテンツを表示するブロックを並び替えたい時に利用できます。
動的なコンテンツを表示しているブロックで並び替えを行いたい場合、それらのブロックとは異なるブロックにJavaScriptを記述してください。 
ブロックとして登録・配信する際に、静的なHTMLとして配信され、動的にコンテンツを読み込むことができなくなるためです。
  • 並び替えたいブロックとは異なるブロックを指定し編集 → コード編集でScriptに以下のように設定する
var parent = document.querySelector('親要素');　// コンテンツ1、コンテンツ2の親要素のCSSセレクタを指定
var before_element = document.querySelector('コンテンツ1'); // コンテンツ1のCSSセレクタを設定
var after_element = document.querySelector('コンテンツ2'); // コンテンツ2のCSSセレクタを設定

parent.insertBefore(after_element, before_element);
  • Node.insertBefore()メソッドについての詳細仕様については下記をご確認ください。
  • 上記のコードはあくまでも一例になります。javaScriptでの並び替え方法はこれに限りません。

注意点

  • サイトの構造や記述の仕方によって、JavaScriptを記述することで対象の要素やサイト全体のスタイルが崩れる可能性や並び替え前のCSSが適用されなくなる可能性があります。
    • 本番に配信する際には、プレビューでの確認やテスト配信を行ってください。
    • また、設定にはJavaScriptの知識が必要になりますので、予めご了承ください、
  • 上記はサンプルコードになります。そのままコピーしても動きませんので、ご注意ください。
  • コードを記述して設定した場合、ブロックごとの効果計測を行うことはできません。予めご認識ください。

#karte_blocks