コスパ太のコスパ命BLOG

ホテル紹介をメインとした旅ブログ

「トップページヘッダー直下3カラムロゴ」構造・概要

対象コンテンツの場所

制作した3カラムロゴのコンテンツは、管理画面のサイドバーにある「再利用コンテンツ」にて投稿しています。

今回のサンプルで表示している3カラムのロゴコンテンツは、再利用コンテンツ投稿タイプに投稿されている「トップページ上部3カラムロゴ(サンプル)」というタイトルのポストが対象となっています。

ブロックコンテンツの構造

今回サンプルでご提示しているロゴコンテンツの構造は以下のようになっています。

構造

まず、最も外枠のブロックとして「DigiPress Ex – Blocks Free」の「カラム」ブロック(親)があり、内部には3カラム分の単体の「カラム」ブロック(子)があります。
さらに各「カラム」ブロック(子)の中に「メディア」ブロックがあり、そこで任意の画像を表示しています。

カラムブロックの全幅表示

カラムブロックを全幅表示にするには、親の「カラム」ブロックを選択し、ツールバーの「配置」オプションからドロップダウンを開いて「全幅」を選択します。

カラムブロック内のコンテンツ幅の指定

「カラム」ブロックの配置を全幅にした場合、ブロックのサイドオプションの「一般設定」タブに “カラムエリアの最大幅” メニューが表示されます。
ここから「カスタム幅」を選択すると、ブロック内部に並ぶ「カラム」ブロック(子)が表示されるエリア全体の幅を、任意のサイズに設定することができます。

カラムエリアの最大幅を指定しない場合、ブラウザの表示幅に合わせて常に伸縮するため、閲覧環境によっては3カラムの表示幅が広すぎてアンバランスな印象になります。

レスポンシブ設定

表示幅に応じてカラム数を調整するには、ブロックのサイドオプションの「レスポンシブ設定」から操作します。

表示幅に応じてカラム数を指定

規定の表示幅以下になった場合のカラム数を調整するには、「カラム数を自動調整」を選択します。

カラム数を変更させるブレークポイント(基点となる表示幅)は以下の3段階となります。

例えば、スマートフォンのような表示幅の狭いディスプレイ環境でも常に3カラムで表示する場合は、すべてのブレークポイントで 3カラムを指定しておきます。

指定した表示幅以下で横スクロール

表示幅に関係なくカラム数は変更せず、指定した最小表示幅以下になると横へのスクロールを有効にして3カラムを表示するには「水平スクロール」を選択します。

カラムコンテンツを表示

再利用コンテンツとして作成した3カラムのロゴコンテンツを実際に表示するには、「外観」→「ウィジェット」にてウィジェットとして表示します。

ウィジェットの表示制御

各ウィジェットエリアは全ページ共通のスペースです。
例えば、トップページのみに特定のウィジェットを表示させるなどの制御を行いたい場合は、別途サードパーティのプラグイン「Widget Options」を利用します。

「Widget Options」は今回のサポート作業にてインストール済みです。

今回のサポートにて提供したサンプルでは、該当プラグインによって拡張されるウィジェットの設定項目にて、“Show on checked pages” を選択し、対象を “Home/Front” にチェックをすることでトップページのみに再利用コンテンツのウィジェットを表示するようにしています。

その他、ウィジェットの表示制御に関する詳細については以下オンラインドキュメントを参照してください。

モバイルテーマでの表示

DigiPress はスマートフォンでは PC テーマではなくモバイル専用テーマで表示されます。
スマートフォンでも同様にウィジェットを表示するには、モバイル専用のウィジェットエリアにウィジェットを追加します。

今回のサンプルでは、「コンテナ上部(モバイル)」エリアに「DP – 再利用コンテンツ」ウィジェットを追加し、PCと同一の投稿(「トップページ上部3カラムロゴ(サンプル)」)を選択しています。

PCとモバイルで表示するコンテンツ(ブロック)を分けたい場合は、別途モバイル用に作成した再利用コンテンツをここで指定することで対応できます。

「Widget Options」の設定は PC の場合と同じです。