EC-CUBEでスマホ表示時に左カラム(サイドバー)より先にメインカラムを読み込ませる方法

スマホの時だけサイドバーはあとでいい

EC-CUBEのレイアウトを組みながら思ったのは、スマホ表示の時には左カラムを下に読み込ませたいということです。なぜかというと、メインカラムの方に優先順位が高い情報を載せたいからです。画像がないとどういう事かよくわかりませんよね。以下のページを開いていただければわかると思います。

• EC-CUBE3デザインテンプレート解説：本デザインテンプレートを適用： サイドカラムにブロックを配置したときのレイアウト – ITOBEN STYLE Blog

HTMLの構造を上下逆に

これを実現するにはHTMLとCSSをいじる必要があります。変更するファイルはdefault_frame.twig。これを/src/Eccube/Resource/template/defaultからコピーします。その中のこの部分のメインカラムと左カラムを上下逆転させます。

これを

<div class="container-fluid inner">
{# ▼LEFT COLUMN #}
{% if PageLayout.SideLeft %}
<div id="side_left" class="side">
{# ▼左ナビ #}
{{ include('block.twig', {'Blocks': PageLayout.SideLeft}) }}
{# ▲左ナビ #}
</div>
{% endif %}
{# ▲LEFT COLUMN #}
<div id="main">
{# ▼メイン上部 #}
{% if PageLayout.MainTop %}
<div id="main_top">
{{ include('block.twig', {'Blocks': PageLayout.MainTop}) }}
</div>
{% endif %}
{# ▲メイン上部 #}
<div id="main_middle">
{% block main %}{% endblock %}
</div>
{# ▼メイン下部 #}
{% if PageLayout.MainBottom %}
<div id="main_bottom">
{{ include('block.twig', {'Blocks': PageLayout.MainBottom}) }}
</div>
{% endif %}
{# ▲メイン下部 #}
</div>

こう変更。

<div class="container-fluid inner">
<div id="main">
{# ▼メイン上部 #}
{% if PageLayout.MainTop %}
<div id="main_top">
{{ include('block.twig', {'Blocks': PageLayout.MainTop}) }}
</div>
{% endif %}
{# ▲メイン上部 #}
<div id="main_middle">
{% block main %}{% endblock %}
</div>
{# ▼メイン下部 #}
{% if PageLayout.MainBottom %}
<div id="main_bottom">
{{ include('block.twig', {'Blocks': PageLayout.MainBottom}) }}
</div>
{% endif %}
{# ▲メイン下部 #}
</div>
{# ▼LEFT COLUMN #}
{% if PageLayout.SideLeft %}
<div id="side_left" class="side">
{# ▼左ナビ #}
{{ include('block.twig', {'Blocks': PageLayout.SideLeft}) }}
{# ▲左ナビ #}
</div>
{% endif %}
{# ▲LEFT COLUMN #}

以上でHTMLの構造上はメインカラムが上になりました。このファイルを保存して/app/template/defaultにアップすれば完了。(※間違えた場合キャッシュが残ってしまい、変更しても反映されなくなってしまいます。その場合コンテンツ管理＞キャッシュ管理からtwigのキャッシュを消して下さい。反映されるはずです。私はここでハマりました。)次はCSSです。

CSSで左右に振り分ける

こちらはとってもシンプル。/html/template/default/cssからstyle.cssを開き直接編集します。テキスト内検索で.theme_side_left #mainを探し当て、以下の変更を加えます。

ここを

.theme_side_left #main {
width: 75%;
float: left;
}

こう変更。

.theme_side_left #main {
width: 75%;
float: right;
}

そう、floatのleftとrightを入れ替えるだけです。参考にさせていただいたのは以下のPDFです。さっきのブログオーナーさんと一緒の方ですね。ありがたい。

• 001_デザイン・レイアウト・ブロック – ITOBEN STYLE

このファイルをアップロードしたらスマホで表示を確認してみて下さい。左カラムの方が下の方に表示されているはずです。