本記事では、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.アクセス、セッション、時間帯などで中身が変わる)場合、この方法での並び替えは行えません。
    • 後述する「ローコードで実現する」の設定方法をご確認ください。

ローコードで行う(CSS)

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

設定方法

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

null

/* 親要素のセレクタを設定 */ 
親要素 {
  display: flexbox;
}

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

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

注意点

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

ローコードで行う(JavaScript)

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

設定方法

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

null

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);

注意点

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