MTのRainierテーマでブログサイトの幅とサイドバーの幅サイズを変更

 

MT(Movabletype)で、Rainierテーマを使って、ブログサイトの幅とウィジェットのサイドバーの幅サイズを変更しました。その情報が、ネット上に少ないので参考として記事にまとめました。

 

 

前に、トップバナーとサイトロゴのサイズを変更しましたが、それと同じく、少しのhtml知識で、簡単に出来るようにします。数値を変えるだけなので、知識が少なくても、無理ではありません。

 

 

さて、Rainierのカスタマイズは、基本的に、CSSが4つあって、サーバー上のディレクトリ階層はというと、

mt-static → support → theme_static → rainier → css

base.css

editor.css

ie.css

この階層に、3つCSSがあります。

 

それから、

mt-static → support → theme_static → rainier → css → rainier-white

screen.css

上3つのもう一つ先フォルダになりますが、screen.cssがあります。

 

この合計4つを修正します。

 

まず、ie.cssのソースコードに、次の#contentの箇所を見つけます。これが、記事の文章スペースと、サイドバーの幅を修正する場所です。

 

#content {
margin-right: auto;
margin-left: auto; }
#content [role="main"],
#content .related {
float: left; }
#content [role="main"] {
width: 640px;
padding-left: 15px; }
#content .related {
width: 235px;
padding-left: 50px;
margin-top: 0; }

 

 

ここを、赤色の3ヶ所を次のように変更します。

 

#content {
margin-right: auto;
margin-left: auto; }
#content [role="main"],
#content .related {
float: left; }
#content [role="main"] {
width: 699px;
padding-left: 15px; }
#content .related {
width: 300px;
padding-left: 10px;
margin-top: 0; }

 

真中のwidth: 300px;としたのは、グーグルアドセンスのレクタングル(中)を貼るためです。レク中は、幅300PXだからです。

 

これで、グーグルアドセンスの最も効率的な広告サイズであるレク中が貼れます。

 

最初のwidth: 699px;は、記事を書く本文の幅サイズ、次のwidth: 300px;は、サイド幅、そして、padding-left: 10px;は、本文とサイドの間のスペース(間隔)の幅、50pxは無駄に広いので、本文を見やすくするため、狭めました。

 

base.cssにも、ソースコード上の方に、同じような箇所がありますので、同じように数字を修正してください。数字に関しては、合計930px(width: 640px;の下のpadding-left: 15px;を含む)となるのですが、次で、ブログサイトの幅を1024pxに設定します。

 

それでは、ブログサイト全体の幅を修正します。同じく、ie.cssのソースコードに、次の#containerの箇所を見つけます。これが、ブログサイト全体の幅を修正する場所です。

#container #container-inner,
#container #header-inner,
#container #content-inner,
#container #footer-inner {
width: 940px;
margin-right: auto;
margin-left: auto; }

 

ここを、赤色を次のように変更します。

 

#container #container-inner,
#container #header-inner,
#container #content-inner,
#container #footer-inner {
width: 1024px;
margin-right: auto;
margin-left: auto; }

 

それから、screen.cssにも、同じように、修正する箇所があります。

 

#header[role="banner"] {
position: relative;
background-color: white;
border: solid #c0c6c9;
border-width: 0 1px 1px; }
@media (max-width: 930px) {
#header[role="banner"] {
border-width: 0 0 1px; } }
#header[role="banner"] #header-inner {
padding: 0; }

 

#header[role="banner"] {
position: relative;
background-color: white;
border: solid #c0c6c9;
border-width: 0 1px 1px; }
@media (max-width: 1024px) {
#header[role="banner"] {
border-width: 0 0 1px; } }
#header[role="banner"] #header-inner {
padding: 0; }

 

 

これで完了です。940pxでは、幅が狭いので1024pxとしましたが、ここは、ご自由に、任意の数字に設定してもOKです。その場合は、本文記事の幅とサイドの幅は、任意の数字にあわせて、配分してください。

 

これだけで、サイトの幅が変更できますので簡単でしたが、この他に2点の修正が必要になります。1つは、ヘッダーバナー画像のサイズを1024px用に、画像サイズを変更して、アップロードする。

 

 

もう1つは、サイドバーの幅で、ウィジェットのタイトル幅が短いので、これも修正します。

 

ie.cssに、

.widget {
margin-right: 15px; }

 

base.cssとeditor.cssにも、

@media (min-width: 930px) {
.widget {
margin-right: 15px; } }

 

このmargin-right: 15px; を0PXと修正すると、直ります。0PXだと変な方は、5PXなどサイトの構成にあわせて、適当な数字に修正してください。

 

 

以上で、サイトのレイアウトは整ったと思います。

 

 

この記事を読んで、難しいと思った方は、やめといた方が良いかもしれません。その前に、トップバナーとサイトロゴのサイズを変更してみて、練習してみてください。それが出来たら、少しのhtml知識で、簡単に出来ると思います。繰り返しますが、数値を変えるだけなので、知識が少なくても、無理ではありません。

 

上手くいかない場合は、他の箇所を修正したとか、誤って他の部分を消したとか、知らずに変更したとか、考えられます、無理そうな方は、事前にcssのバックアップを取っておいて、いつでも復元できるようにしてから、修正するようにしてください。