Docy Child

ビルダー

プロモボックス(バナー)ブロック・スリックスライダー・ レボリューションスライダー・商品コラム・カスタム HTMLといった内容のブロックを追加するには、ビルダーセクションを追加する必要があります。

トップページのビルダーセクションは、プロモボックス(バナー)、各種スライダー、ページ、プロダクトコラム、縦メニューのスペースなど、さまざまなコンテンツブロックを追加できる、規模の大きなセクションです。このセクションは、ヘッダーの直後やフッターの前など、ホームページのどの場所にも追加することができます。次のセクションにて、これらのブロックについてそれぞれ深く掘り下げていきます。

ビルダー

このセクションでは、すべてのコンテンツブロックの設定を行うことができます。

タイトル

ここでビルダーセクションのタイトルを追加し、ページ上に表示することができます。必要に応じて、フォントをカスタマイズしたり、リンクを追加することができます。

セクション:ビルダー - タイトルの設定

コンテンツ幅

このオプションでは、コンテンツの幅を選択することができます。幅は全幅かボックスのいずれかに設定できます。幅の場合、このセクションの画像はホームページ上で全幅で表示されます。ボックスにすると、画像とホームページの間に左右のスペースが表示されます。この例では、コンテンツ幅をボックスにしたものをお見せしています。

セクション:ビルダー - コンテンツ幅設定ボックス幅

コンテンツ設定

ここでは、”コラムのサイズ”のドロップダウンメニューから、デスクトップ上に1列に表示する項目の数を選択できます。

オプション”モバイルでのコラムのサイズ” では、モバイルでの列の項目数を設定することができます。”1 行に 1 アイテム”または”1 行に 2 アイテム”から選択可能です。 今回の例では、”1 行に 2 アイテム”を表示しています。

セクション:ビルダー - コンテンツ設定 1行に2アイテム

“コラムのマージン”のドロップダウンリストで、列の余白の種類を選択することができます。 列の位置もこのセクションで設定することができます。”コラムの位置”のドロップダウンリストより、位置の調節もしてみてください。
“コラムのパディング(余白)を無効にする” オプションでは、ビルダーセクションの列間のスペースを削除することができます。 “モバイルでのコンテンツの順序調整” では、モバイル版で表示するコンテンツブロックの順番を決めることができ、例えば”2,1,3″のように記述します。

カスタマイズ(高度なカスタマイズ)

追加CSSクラス

ここでビルダーセクションに追加CSSクラスを追加することができます。カスタムの変更を追加したい場合に役立ちます。

まずビルダーセクションとコンテンツを追加し、セクションの設定をします。

ここからさらにスタイルを追加する必要がある場合に、追加CSSクラスを活用することができます。

セクション:ビルダー - 追加CSSクラス クラスの追加
セクション:ビルダー -追加CSSクラス コンテンツ追加

テーマ設定 -> ディベロッパー向け設定 から”CSSでのカスタマイズを有効化” を有効にしてください。

セクション:ビルダー - テーマ設定 CSSでのカスタマイズを有効化

アクション -> コードを編集 から編集ファイルを開きます。

セクション:ビルダー - 追加CSSクラス コード編集画面

assets/custom.min.css のファイルを探し、開きます。

セクション:ビルダー - 追加CSSクラス コード編集 custom.min.cssの編集

追加CSSクラスとスタイルを追加してください。

サンプルコードでは、背景色とコンテンツ上部の余白を追加する方法を示しています。

CSSについての詳しい情報はこちら

セクション:ビルダー - 追加CSSクラスコード編集 CSS書き込み

こちらが結果になります。

セクション:ビルダー - 追加CSSクラスの例 表示結果