MT導入基礎知識

Movable Typeとは?

ドメイン取得とサーバー確保

Movable Typeをインストールしよう

HTMLとCSSを理解する

テンプレートって何?

プラグインって何?

どんどんモジュール化しよう

pingを有効に活用しよう

テンプレートの基本的な構成

デザインのカスタマイズ

カスタマイズの前に

タイトルバナーの雰囲気をかえる

タイトルバナーを画像にする

H1~H6タグの見え方

サイトの背景を変更する

文字の色や大きさをかえる

サイドバーの見た目をかえる

表示内容のカスタマイズ

カテゴリーの並び順序を変更する

エントリーの並び順序を変更する

最近のエントリー一覧を表示する

サイドバーを右から左に変更する

サイドバーに表示する要素を変更する

カテゴリー一覧にエントリーも表示する

カテゴリーページにも最新エントリー一覧を表示する

入れておきたいプラグイン

cutfirstchar⇒変数タグの最初の数文字を削除する

CatEntries⇒特定カテゴリーを表示させないようにする

Update-n-Ping⇒記事を更新したときにも更新pingを自動的に送る

MailForm⇒メール問い合わせフォームを表示する

Mapper⇒地図画像を表示する

TinyMCE⇒ワープロ感覚でエントリー記事が作れる

参考になるサイト・情報

WWWの基本を勉強する参考サイト

Movable Typeに関するサイト

ブログアクセスアップにつながるランキングサイト

相互リンク

エラーが起きたときはチェックしてみよう

よもやま話

サイト立ち上げのきっかけ

ブログランキングに登録

メールフォームが機能しない・・・

グーグルマップを表示してみる







« Mapper⇒地図画像を表示する | メイン | サイドバーに表示する要素を変更する »

サイドバーの見た目をかえる




サイドバーを右から左に変更する方法は、前に説明しました。
※参考 ⇒サイドバーを右から左に変更する

位置を変えるだけでだいぶ会社ホームページっぽくなりましたが、どうもオリジナルテンプレートは色合いが暗い気がします。もっと華やかな、あるいは親しみやすい雰囲気にしたいところです。

ということで、今回はサイドバーのデザインの変えてみましょう。

デザインの変更ですから、インデックステンプレートの中の『スタイルシート』を開いてください。
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"> <h2 class="module-header">(タイトル)</h2> <div class="module-content"> (コンテンツ) </div> </div>

詳細を見てみると、<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)してみてください。お好みのサイドバーになりましたか?



最新記事一覧