サイドバーを右から左に変更する方法は、前に説明しました。
※参考 ⇒サイドバーを右から左に変更する
位置を変えるだけでだいぶ会社ホームページっぽくなりましたが、どうもオリジナルテンプレートは色合いが暗い気がします。もっと華やかな、あるいは親しみやすい雰囲気にしたいところです。
ということで、今回はサイドバーのデザインの変えてみましょう。
デザインの変更ですから、インデックステンプレートの中の『スタイルシート』を開いてください。
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)してみてください。お好みのサイドバーになりましたか?