Q. トップページのみ右メニュー、下層ページを左メニューにできますか?
Answer. はい。可能です。テーマのインデックステンプレートである「CSS Base」(css/base.css)を編集することで、ナビゲーションの左右レイアウトを変更することができます。ここでは、例として、Theme014(現行のテーマでは、左メニュー)のテーマを用い、トップページのみ右メニュー、それ以外のページは左メニューに変更したいと思います。
(※テーマによりデザインが異なる為、ここでご紹介するCSSコーディングの詳細が、全てのテーマにCopy & Pasteで当てはまる訳ではござませんが、Theme014以外のテーマにおいても概念は同じですので、ご参考にしてください。)
MTのウェブサイト管理画面で「テンプレート」(左メニュー:デザイン>テンプレート)を表示します。インデックステンプレートに、「CSS Base」というテンプレートがありますので、これをクリックします。
下記のコーディング箇所を、
#pagebody_top #content { margin: -51px 0 0 0; background: transparent; } * html #pagebody_top #content { /* -- This is for IE6 and below -- */ margin: -53px 0 0 0; } *+html #pagebody_top #content { /* -- This is for IE7 -- */ margin: -53px 0 0 0; } #sidebar { width: 200px; margin: -8px 20px 0 0; padding: 0; float: left; background: transparent; }
以下のように変更します。
#pagebody_top #content { margin: -51px 0 0 0; padding: 20px 20px 0 0; float: left; background: transparent; } * html #pagebody_top #content { /* -- This is for IE6 and below -- */ margin: -53px 0 0 0; padding: 55px 20px 0 0; } *+html #pagebody_top #content { /* -- This is for IE7 -- */ margin: -53px 0 0 0; padding: 54px 20px 0 0; } #sidebar { width: 200px; margin: -8px 20px 0 0; padding: 0; float: left; background: transparent; } #pagebody_top #sidebar { float: right; margin: -8px 0 0 20px; }
「保存と再構築」ボタンをクリックし、サイトを確認します。
トップページのみ右メニュー、その他のページは左メニューで表示されます。
ここでのポイントは、Theme014は、元々左メニューのテーマであるので、トップページのコンテンツ部分とサイドバー(メニュー)の部分のみ、左右のレイアウトを入れ替えてあげることです。
トップページのコンテンツ(#pagebody_top #content)は、左寄り(float: left;)に、トップページのサイドバー(#pagebody_top #sidebar)は、右寄り(float: right;)にします。
また、この時、コンテンツ(#pagebody_top #content)やサイドバー(#pagebody_top #sidebar)のカラムに付いているpaddingの左右の数値も入れ替えます。
IEでのブラウザチェックで表示がおかしい場合は、IE用のCSSをご調整いただけます。