カラーミーショップでトップページと下層ページのカラムを変える方法


よくある質問であることと、カラーミーショップ製作で多い要望として

トップページは3カラム、それ以外のページは2カラムにしたい

と言うのがあるようです。

カラーミーショップでは共通レイアウト部分は「共通」編集部分でしかできないため、通常の制作方法では全てのページが同じレイアウトとなるのですが、これをちょっと深く触ってみると意外と簡単に出来てしまうので共有しておきたいと思います。

必要な条件分岐は以下の通りです。

<{if $file_name|regex_replace:’/.*top\.tpl.*/i’:’top.tpl’ eq ‘top.tpl’}>
トップページのみの記述
<{else}>
下層ページの記述
<{/if}>

これだけです。

上記を説明すると
<{if $file_name|regex_replace:’/.*top\.tpl.*/i’:’top.tpl’ eq ‘top.tpl’}>
は「トップページ(indexページ)のみに反映させる内容ですよ」という指定となり、
<{else}>
以下は「トップページ以外に反映させる内容ですよ」という指定。最後に
<{/if}>
で条件分岐指定を終了させます。

これを無料テンプレート「3カラム」より、トップページ3カラム、下層ページは右カラムを無くした2カラムとする場合、共通編集箇所で

<{if $file_name|regex_replace:’/.*top\.tpl.*/i’:’top.tpl’ eq ‘top.tpl’}>
<div id=”main”>
<{else}>
<div id=”main2″>
<{/if}>
<{include file = $file_name}>
</div>

としておくと、トップページのみ「<div id=”main”>」が適用され、それ以外のページは「<div id=”main2″>」が適用されます。

その際、スタイルシートの指定として「#main」の記述をコピーペーストしておき、新たに「#main2」を作ります。
次にwidth指定を「mainで指定されているwidth+3カラム目のwidth+カラム間の空白」にします。

最後に、下層ページでは3カラム目が不要ですので、トップページのみに反映させるようにしましょう。

これは右カラムを制御している指定
<div class=”right”>から最後の</div>を一部変更するだけです。

<{if $file_name|regex_replace:’/.*top\.tpl.*/i’:’top.tpl’ eq ‘top.tpl’}>
<div class=”right”>
(右カラムの中身記述)
</div>
<{else}>
(ここは空白で構いません)
<{/if}>

としておけば完成です。
エラーが出る場合はタグ内の記述が間違っている可能性が高いですので、全角、半角の間違いはないかなど確認してみてください。

他にも様々な方法はありますので、助け合い掲示板からも探してみることをお勧めします。

ショッピングカート

カラーミーショップなら・・・

低コスト 月額900円~
デザイン自由自在なカスタマイズ機能!
楽々商品・在庫管理!
ボタンひとつでモバイルサイトも製作!
お店とお揃いのブログも簡単作成!
30日間のお試し期間もついています!
カラーミーショップで簡単ネットショップ!


このページの先頭へ