サイドバーを右から左に変更する方法は、前に説明しました。
※参考 ⇒サイドバーを右から左に変更する
位置を変えるだけでだいぶ会社ホームページっぽくなりましたが、どうもオリジナルテンプレートは色合いが暗い気がします。もっと華やかな、あるいは親しみやすい雰囲気にしたいところです。
ということで、今回はサイドバーのデザインの変えてみましょう。
デザインの変更ですから、インデックステンプレートの中の『スタイルシート』を開いてください。
idに「beta」がつく箇所がサイドバーに該当します。
「page layout」を指定するクラス群の中に、次の表記があります。
#beta { width: 200px; background: #e6ecf2; }
ここが「id=beta」のデザインを指定する部分です。
横幅を変更する場合は「width: 200px;」の右側の数値(ピクセル)を変更、背景色を変更する場合は「background: #e6ecf2;」の右側の色数値を変更すれば、サイドバー全体の幅と色が変わります。
オリジナルでは幅200ピクセル、薄いグレーになっています。
※色見本の参考 ⇒とほほの色入門・色見本
続いて、サイドバーに表示されている要素(検索小窓、最近のエントリー小窓、カテゴリー小窓、等)のデザインも変更してみましょう。
この要素のことを、Movable Typeでは「Widget=ウィジェット」または「module=モジュール」と呼びますが、テンプレートモジュールと混同しやすいので、ここではWidgetと呼びます。
Widgetは、タイトルバーとコンテンツボックスの組み合わせでできていますので、それぞれ変更していくことになります。
各HTMLテンプレートでは、以下のように記載されています。
詳細を見てみると、<div class="module-○○ module">~</div> でWidget全体のくくり、<h2 class="module-header">~</h2> でタイトル部分、<div class="module-content">~</div> でコンテンツ部分のデザイン(クラス)を指定しています。
まず、Widget全体の背景色を変更するには、スタイルシートの中から、「module」に関する指定をしている下記の部分を探します。
.module {
margin: 0 0 10px 0;
border-bottom: 1px solid #f3f6f9;
background: #dae0e6;
}
背景色は、「background: #dae0e6;」の右側の色数字を変更すればOKです。薄いグレーのままだと地味なので、明るめの色に変更してしまいましょう。
続いて、Widgetのタイトル部分を変更するには、スタイルシートの中から、「class="module-header"」に関する指定をしている下記の部分を探します。
.module-header,
.trackbacks-header,
.comments-header,
.comments-open-header,
.archive-header {
/* ie win (5, 5.5, 6) bugfix */
p\osition: relative;
width: 100%;
w\idth: auto;
margin: 0;
border-left: 5px solid #36414d;
padding: 5px;
color: #fff;
background: #a3b8cc;
font-size: 11px;
font-weight: bold;
line-height: 1;
text-transform: uppercase;
}
こうして見てみると、module-headerだけでなく、trackbacks-header、comments-header、comments-open-header、archive-headerも一緒に指定されています。従って、ここを変更すると、トラックバックやコメントを表示する部分のヘッダーデザインも変わりますので、注意してください。
主な変更内容は、文字色「color: #fff;」、背景色「background: #a3b8cc;」、文字のサイズ「font-size: 11px;」あたりでしょうか。
「border-left: 5px solid #36414d;」は、タイトル部分の左枠に表示されている濃い部分です。ここの色を変えるだけでも随分イメージが変わります。ここの太さを変えるなら「5px」を別の数字に、ここの色を変更するには「#36414d」を別の色数字に変更してください。
最後に、コンテンツ部分の詳細変更です。スタイルシートの中から、「class="module-content"」に関する指定をしている下記の部分を探します。
.module-content {
margin: 0 0 10px 0;
border-top: 1px solid #cfd4d9;
padding: 10px 10px 0 10px;
font-size: 10px;
line-height: 1.2;
}
ここでは、文字サイズ「font-size: 10px;」や、行間「line-height: 1.2;」の変更ができます。
余白(margin、padding)の変更も可能ですが、あまり変更することはないので、詳細説明はここでは省略します。
必要な修正を終えたら、保存&再構築(S&R)してみてください。お好みのサイドバーになりましたか?