【ブログの楽しみ方】今更きけないココログ－(3) カスタムCSSの使い方
この記事の目的
この記事は過去の記事が既読であることを前提としています。
今回は、ココログの「カスタムCSS」に自分で記述できるよう、ＣＳＳの記述ルール（「セレクタ」、「プロパティ」）について解説します。
実際に、様々な“修飾”を加えるためには、「プロパティ」についてまとめたサイトや本を読む必要がありますが、その前提となる知識です。
また、この記事の中で使用している見出し、例えば上の「この記事の目的」は、左側に葉の画像 
が付いたり、サイドバーで使われている見出しと同じ書式になっていますが、いちいち画像を貼り付けているわけではなく、HTMLタグを弄って、このように表示させているだけです。どうやったらこのようなことができるのかを説明します。
前回のまとめ
前回説明した内容を図に表しました。
そのブログが使用するスタイルシートは<head>～</head>内に書かれていて、これにより、ブログがブラウザに読み込まれるとき＝表示されるときにスタイルシートの内容を参照（①）します。
更に、外部スタイルシートimportしている場合、上から順番（②～⑤）に読み込み、次に、その下に記述されているカスタムCSSを読み込みます。したがって、重複した記述があった場合、下に書いてある方が優先されます。（←ここ重要）
ココログのカスタムCSS
前回記事『(2) ブログのスタイルシートの中を見るには』でも少し触れましたが、使い方は公式FAQにも掲載されています。
公式FAQ『CSSを使って自分でデザインを編集できますか？』
前述のように、CSSはブログが表示されるときに読み込まれるので、カスタムCSSを修正して保存したときは、（ブログが既に開かれている場合、）F5キーを押すなどして再読み込みをする必要があります。
CSSの記述ルールと行間（段落間）を変更するCSS
記述方法は下の図を参照して下さい。
文字（スペースも）は必ず半角英数字を使用します。見やすいように、上のように、セレクタやプロパティを改行して書くのが一般的です。
上のように記述されているCSSを使用しているブログの場合、例えば、下のようなCSSをカスタムCSSに記述したとすると、<p>タグに関してのみ、上下のマージンの値が10px→15pxと変わります。（上下に5px増えるので、行間は10px分より広く空くようになる。）
p
{
margin-top: 15px;
margin-bottom: 15px;
}
たいていの場合、この記述をカスタムCSSに加えて、マージンの値を調整することで行間を変えられと思いますが、必ず、自分のブログのCSSが現在どのように定義しているのかを確認してから行って下さい。
セレクタの種類
スタイルシートをブラウザで開いて見たときに、大きく分けて、「セレクタ」が「#」で始まっているもの、「.」（ピリオド）で始まっているもの、それらが付いていないもの（前項で説明したような、個々のHTMLタグの属性を直接指定するもの）があるかと思いますが、それぞれ、「IDセレクタ」、「クラスセレクタ」、「タイプセレクタ」と呼びます。
この項では、補足説明として「クラスセレクタ」のみ紹介します。
まずは簡単なサンプルです。
あいうえお
このブログのスタイルシートでは、引用ボタン（ 
）を押して、<blockquote>～</blockquote>で囲むと、グリーンの破線で周囲が囲まれるように定義してあると、前回説明しました。（文字の色や大きさは<p>タグと同じです。）
「あいうえお」という文字に色が付いていますが、これは編集画面の「フォントカラー」ボタンで色を付けたわけではなく、下のように記述してあります。（背景色は便宜的に付けました。）
<blockquote class="emphasize4"><p>あいうえお</p></blockquote>
この「emphasize4」という「クラス名」は、このブログのカスタムCSSで次のように指定してあります。
.emphasize4 {
color: #8C9801;
}
この例のように、ピリオドに続けて任意の名前を付けたセレクタをCSSに記述すると、その属性を様々なHTMLタグで使用することができます。使い方は上のように、タグの「<>」の中に「class="クラス名"」のように記述します。（「HTMLの編集」モードで自分で記入する）
この「emphasize4」という「クラス名」を<p>タグ内で使い、<p class="emphasize4">かきくけこ</p>と記述すると、下のように表示されます。
かきくけこ
使えるタグを限定してスタイルシートに指定する方法もあり、例えば、<p>タグだけに使う場合は、「p.emphasize4」のように、タイプ（タグ）を前に付けて記述します。
なお、サンプルとして、web_css_test というwebページを用意したので、ご興味がありましたら、ソース（HTML）やカスタムCSSの内容をご覧下さい。
クラスセレクタの使用例
この記事の中で使っている見出し（例えば上の「クラスセレクタの使用例」）は、「HTMLの編集」で下のように書いているのですが、サイドバーに表示されている見出しと同じ書式になっています。（左側に“葉”のイラストが付いたり、文字の大きさなどもサイドばーの見出しと同じです。）
<h2 class="module-header">クラスセレクタの使用例</h2>
これは、ブログのソースを見たときに、サイドバーの見出し部分の記述を真似したもので、見出し等、サイト内で頻繁に使う書式に名前をつけておき、必要に応じて「class="～"」でその書式を適用するというのが、クラスセレクタの一般的な使い方です。
下は、他の方のブログのHTML（ブログA）で見出し部分を見たところですが、たまたまこのブログ（ブログB）と同じ「module-header」というクラス名を使っていますね。
この記事は前後の記事との兼ね合いで加筆修正する可能性があります。
« 【ブログの楽しみ方】今更きけないココログ－(2) ブログのスタイルシートの中を見るには | トップページ | 【ブログの楽しみ方】siteコマンドの使い方／検索サイトからのアクセスを増やすには »
« 【ブログの楽しみ方】今更きけないココログ－(2) ブログのスタイルシートの中を見るには | トップページ | 【ブログの楽しみ方】siteコマンドの使い方／検索サイトからのアクセスを増やすには »
test
コメント