ファンブログ カスタマイズ　ぽあろの休日

　今回はスタイルシートについて、簡単に解説します。
　なんといっても、このスタイルシートはカスタマイズの基本です。
　本ブログのカスタマイズもほとんどがこれの修正でした。

　詳細な解説は検索して頂くとして、ここではイメージというか、
　概念的なものを理解していただければと思います。

１．CSSとスタイルシートの関係

　始めに言葉の定義をしておきます。
　よくCSSとスタイルシートが同意義で使用されるのですが、ここでは明確に区別しておきます。
　ファンブログ、及び本ブログで言及している両者の関係は以下の通りです。



　　

２．CSSとは

　CSSとは、Cascading Style Sheets（カスケーティング・スタイルシート）の略で、文章を
　修飾したりデザインやレイアウトなどに関するスタイルをまとめて記述したものです。

　このCSSを使用するメリットとしては、


　　　・文書全体に一貫したコンセプトに基づくデザインを適用できる
　　　・複数文書のスタイルを一括管理でき、メンテナンスの効率が大幅に向上する
　　　・スタイル専用の言語を使うことで、きめ細かな表現を設定できる


　といったとこでしょうか。
　・・・でも、ちょっと解りにくいですよね？

３．HTMLとCSSの関係をイメージ化してみる

　では、もう少し解りやすくCSSを理解するため、HTMLとの関係をイメージ化
　してみましょう。

　まず、記事に「ぽあろ」という文字列を記述し、それを<p>というタグで囲みます。






　次にCSSにおいて、文字列で指定したタグに対しての動きを決めてあげます。
　ここでは、文字の大きさ、文字フォント、文字色を指定しています。

　そして、これをブログ上で表示すると、以下のように記事に書いた
　「ぽあろ」という文字が、CSSで指定した内容を反映して表示されるのです。


　



　そこで２．で挙げたメリットをもう一度確かめてみましょう。
　例にすると次のようになります。

　記事の本文の文字色を「黒」から「オレンジ」に変更したいな〜、と思ったとき、
　一つひとつの記事を修正していくのは大変ですよね。

　そんな時、本文が何らかのタグで囲まれてれば、そのタグに設定したCSSを
　修正することにより、全ての記事の文字色を変えることができるのです。
　※ <honbun>というタグは例として挙げてます



　　　



　こんな感じでHTMLとCSSの関係をイメージしていただければ、実際のカスタマイズも
　身近になると思います。

４．ファンブログでCSSを利用してみる

　では、ファンブログではどのようにしてCSSを使えばよいのでしょう。
　ファンブログの管理画面において、「スタイルの編集」を選んでください。

　実際に各テンプレートのコードを見てもらえば解るのですが
　最初の方でCSSを定義しているスタイルシートが読み込まれています。


【メインテンプレート】

　つまりこのスタイルシートを変更すれば、全てのテンプレートにそれが反映される訳です。


以上、スタイルシートについて、ちょっと解説してみました。






【スポンサード リンク】