Movable Type 備忘録

ブログを上手に運用する２

Nov202006
Author: bzbell
Categories: MovableType, Customize
Tags: CSS, Customize, Template

Next Page: ランダムなデータを表示してみる
Prev Page: テンプレートのカスタマイズ１

先日から、MovableType MEMOで配布しているテンプレートをベースに、わたしが実際にカスタマイズしてみたものをご紹介させてもらっています。

基本的にはCSSのみのカスタマイズですが、その修正箇所をCSSファイル内から探して変更したら、どっか違うところも変更してしまったのか、うまく表示されない…というご質問を受けましたので、チョビッと上手なカスタマイズの方法をご紹介します。

どこのサイトのテンプレートを使用するにしても、オリジナルは触らない方がいいです。
わたしのサイトでも例外ではなく、そのオリジナルのCSSに上書き…というかんじでカスタマイズしていきます。

たとえば、こちらのテンプレートの外枠に影をつけるで行ったテンプレートのカスタマイズですが、この記事で変更した部分を別ファイルに保存します。
とりえあず、ここではCSS-bzbell.cssなんてファイル名で保存しちゃいます。

ここで気をつけて欲しいのが文字コードです。
作成したCSSの先頭に以下のコードを追加することを忘れないでください。

そうしないと、正しくCSSが読み込まれせんので。

@charset "utf-8";

上記では、文字コードにUTF-8を指定する例ですが、青い字の部分を各自の文字コードに変更します。

自分用カスタマイズのCSSを作成したら、今度はstyles-site.css内にその自分用のCSSを読み込ませるようにします。
具体的には以下のようになります。

@charset "utf-8";

@import url("./C010/base-weblog.css");
@import url("./C010/C010-3column-liquid-left/C010-3column-liquid-left.css");
@import url("/ajax/greybox/greybox.css");
@import url("/ajax/lightbox/css/lightbox.css") screen;
@import url("/ajax/bubbletooltips/bt.css");
@import url("/ajax/formtooltips/css/form-field-tooltip.css");
@import url(http://bizcaz.com/css/CSS-bzbell.css);

上記styles-site.cssは、実際にわたしのサイトで使っているもので、青い字で記したように1番最後に1行を追加することで自分用のカスタマイズを反映させることができます。

styles-site.cssに追加することで、すべてのテンプレートに対して同じ適用を行うことができます。
それに、他のテンプレートと違って再構築も早いですしね。

場合によっては、styles-site.cssに追加したくないときもあると思います。
そのときは、個別にテンプレート内に自分用カスタマイズのCSSを読み込ませるようにします。

このようにして、カスタマイズ部分を別ファイルにすればいつでもオリジナルに戻すこともできますし、自分がイジッた箇所も明確になりますよね。
わたしのサイトで紹介しているカスタマイズ箇所も同様に別ファイルにすれば、まったく影響がないですよね。

パーツ(外部ファイル)にしておけば、いろいろカスタマイズが楽しめます。
モジュールもパーツにして使いますよね。

このような考え方を、オブジェクト指向というんだそうです。
パーツを組み合わせて、1つの目的を達成する…ということだそうです。

以上です。
上手にブログを運用するようにしましょう (￣∇￣)b

こちらのブログを上手に運用するもご参考までに。