• 2015.6.10
• TCDANカスタマイズ
• コメントを書く

AN(tcd014)で投稿ページを左サイドバーから右サイドバーに変更する方法

AN(tcd014)のTOPページ以外は、左サイドバーがある2カラムになっています。これを右サイドバーに変更する方法を紹介します。

メインカラムとサイドカラムの左右を入れ替える

変更するファイルは、style_pc.css です。

変更後

/* layout */
#contents { width:992px; margin:0 auto 30px; }
#main_col { width:678px; float:left; background:#fff; border:1px solid #ccc; border-top:6px solid #ccc; margin:16px 0 0 0; }
#side_col { float:right; width:300px; margin:16px 0 0 0; clear:right; }
#main_col2 { width:800px; background:#fff; border:1px solid #ccc; border-top:6px solid #ccc; margin:16px auto 0 auto; }

デフォルトの状態では、メインカラムをfloat:right 、サイドカラムをfloat:left と指定することで、メインカラムが右に寄って、そのあとに続くサイドカラムが左側に回り込むようになっています。

ですので、まずはこれらのfloatを逆にします。

また、サイドカラムには、clear:left が指定されているので、それを clear:right に変更します。

この clearプロパティは、clear:leftが指定されている左サイドバー上部の広告の下に、左サイドバーを配置させるために指定されているようです。

後述しますが、左サイドバー上部の広告を float:left から float:right に変更しますので、clear:right に変更する必要があります。

この変更の段階で、メインカラムとサイドカラムの左右が入れ替わりますが、これだけですと、サイドカラムがメインカラムの下に落っこちてしまいます。

この崩れは、左サイドバー上部にある「サイド上部の広告」がそのまま左サイドバーに残ったままになってしまうために起こります。

メインカラムがサイド上部の広告の次に float:left されてきますが、メインカラムの右側にサイドカラムが入るだけの幅がないので、下に落っこちてしまうのです。

左サイドバー上部の広告を右サイドバー上部に移動する

変更するファイルは、style_pc.css です。

変更後

/* side banner */
#index_top #side_top_banner { position:absolute; left:0px; top:16px; margin:0; float:none; }
#side_top_banner { background:#fff; width:300px; margin:16px 0 0 0; float:right; }
#side_top_banner img { display:block; height:auto; max-width:100%; width:auto; }

#side_top_banner に指定されている float:left を float:right に変更して、サイド上部の広告を、左側から右側に移動させます。

左サイドバー上部の広告は、サイドカラムとは別にあるため、メインカラムとサイドカラムの左右を入れ替えただけでは、左サイドバーに残ったままになってしまうからです。

ちなみに、#index_top #side_top_banner は、TOPページにあるサイド上部の広告です。ID名がよく似ていてまぎらわしいのでお間違いのないようにお気をつけくださいませ。

TOPページの左サイドバーは元のCSSのままにする

上述してきたように、サイドカラムを右側に移動(float:right)させたことで、TOPページに表示される左サイドバーまでもが右に移動してしまい、今度はTOPページのデザインが崩れてしまいます。

ですから、TOPページだけは元のCSSを使うようにしたいと思います。

TOPページのbody要素には、"index" という class がつけられていますので、.index #side_col { 元のCSS } というように新たに書き足します。

.index #side_col { float:left; width:300px; margin:16px 0 0 0; clear:left; }

書き足す場所は、style_pc.cssの最後や、/* layout */ の部分など、ご自分がわかりやすいところに書き足して下さいね。