モバイル用フッターを活用して「問い合わせ情報」を表示する方法

はじめに

以下の記事では、「ヘッダーに電話番号や問い合わせ情報を追加する方法」について紹介しました。

ヘッダーに電話番号と問い合わせリンクを追加する方法

「Cocoonのヘッダーに電話番号や問い合わせボタンを追加する方法」を解説。ヘッダーに電話番号や営業時間、問い合わせ・資料請求ボタンを表示する方法や、ウィジェットやパターンを使ってHTMLを安全に管理・出力する方法、Cocoon設定への独自項目追加も分かりやすく紹介します。

chuya.s239.xrea.com

しかし、実際にロゴやメニューを配置した上で問い合わせ情報を詰め込もうとすると、特にモバイル表示ではスペースが大幅に不足してしまうという課題が発生しがちです。
そのため、テーマや実装方法によっては、モバイル表示時のみヘッダー上の情報を非表示にし、スライドメニュー内に格納されます。

一方で、情報をしっかりと見せたい場合には、フッターを活用するのも一つの有効な手段です。

Cocoonの通常のフッターウィジェットエリアは「左・中・右」の3分割構成となっており、情報を大きく、かつ自由に見やすく配置するには不向きな側面があります。
そこで活用したいのが「フッター（モバイル用）」エリアです。

本来このエリアは表示幅834px以下で表示されるものですが、CSSにより非表示に設定されています。
この隠れたスペースを強制的に表示させることで、有効活用します。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下の手順で実装します。

さいごに

今回紹介した方法を使えば、Cocoonのウィジェットエリア「フッター（モバイル用）」をPC画面でも表示させ、ヘッダーの制限に縛られず柔軟に情報を配置できるようになります。
特に、問い合わせ先や重要な案内を大きく見せたい場合に、非常に効果的なカスタマイズです。