クールでかっこいいワードプレステーマ を カスタマイズすべ

見出しに飾りをつけたい。

9042で、記事の書きなぐり? とりあえず、頭の中のものを吐き出す作業をしてたわけ。
一気に書いて、プレビューしてみて違和感。
 
9042の<h2> とかってなんの飾りもついてないの?
調べてみたら、こうなってた。
h2 {margin: 0 0 0.6em 0; padding: 0.4em 0; font-size: 138%; font-weight: 600; line-height: 1.3em; }

表示位置とフォント、行間しか設定されていない。
基本的に見出しに飾りを付けないってデザインなんだろう。
ある程度の硬さを持ったコンテンツが前提ってことだろうね?
screenshot_site0
 
けど、今回は、見出しに飾りを付けたいと思ったわけだ。
 

見出しに飾りを付ける

例としてこういういう感じにしたいと思う。
名称未設定-1
 
cssの div なり p なりで作られる空間は、以下のような margin , border , padding , content の4つの「領域」を持っている。
名称未設定-2
それぞれの上下左右の幅を変えることで content の位置を移動させることができるわけだな。
 
背景となる画像は、div の背景イメージということで、style に以下のような記述をすればいい。
background-image:url('画像URL');
background-repeat:no-repeat;
背景画像のURLを指定して、繰り返して表示すな!ってことだね。
style は、本文の中に <style tyle=”css/text”> ~ </style> でくくってもいいし、
div の中に <div style=”・・・”> で書いてもいい(インライン)
長くなったり他でも同じ飾りを使うなら style=”・・・” の代わりに class=”適当な名前” を書いて、スタイルシートに書いておけば、同じ飾りつけをしたいものには、全部 class=”・・・” と書いてやれば、使いまわしが効く。
 
class とおんなじもので ID=”・・・” と書くこともできる。
違いは? class は、属性に名前を付けること、ID は、その項目に名前を付けるってこと。
 
IDは、記述の中に同じ名前があっちゃいけない。つまり1回しか使えないんだな。
項目名ってことは、プログラムから参照できるって意味でもあるのだ。
class は、属性につけた名前だからプログラムから直接参照できない。。。って意味わかるかな?
 
ま、IDは、一回こっきり、class は、何回でもOKと考えるといい。飾り付けだけのことなら class だけを使っていれば間違いない。
デザイナーさんもこの辺りあいまいっぽいのでなんとなくかっこいいからIDって使ってんじゃないかな?知らんけど:p
 
DIV ブロックに背景を付けた。これをそのまま表示すると背景と見出しが重なる。
名称未設定-3
 
content の前の余白の幅を広げて「見出し」を右にずらす。
こんな感じに書けばOK。
padding:0 0 0 20px;
CSS のブロックは、上、右、下、左という感じで、その幅を、上から時計回りに指定します。
名称未設定-4
書き方として以下のような書き方ができます。
padding:20px; 値が1つの場合は、上下左右全部の幅が20pxになる。(上下左右)
padding:20px 30xp; 値が2つの場合は、上下が20px 左右全部の幅が30pxになる。(上下、左右)
padding:20px 30xp 40xp; 値が3つの場合は、上が20px 左右が30px 下が40pxになる。(上、左右、下)
 
で、アンダーラインが欲しいので、border を使う。border:1px solid #ccc; ってやると値が1つだけの指定なので、border 領域の上下左右が1pxの幅をもって、#ccc の色で塗りつぶされる・・・つまり、枠で囲まれたようになるわけだ。
 
下線だけ欲しいので、border-bottom:1px solid #ccc って指定をしてあげればいい。
上線ならば、border-top 、右なら border-right 左なら border-left って書けばいい。
 
まとめると、こう書けばいいことになる。
&lt;h2 style=&quot;background-image:url('画像URL');background-repeat:no-repeat;padding:0 0 0 20px;border-bottom:1px solid #ffffcc;&quot;&gt;見出し&lt;/h2&gt;
見ずらいので見やすしてみた。
&lt;h2 style=&quot;
    background-image:url('画像URL');
    background-repeat:no-repeat;
    padding:0 0 0 20px;
    border-bottom:1px solid #ffffcc;&quot;&gt;
見出し
&lt;/h2&gt;

毎回展開させて描くのが面倒なので、こう書きなおす。
&lt;style type=&quot;css/text&quot;&gt;
h2{
    background-image:url('画像URL');
    background-repeat:no-repeat;
    padding:0 0 0 20px;
    border-bottom:1px solid #ffffcc;
}
&lt;/style&gt;
&lt;h2&gt;見出し&lt;/h2&gt;

style を style.css へ書けば、本文がきれいになるのだな。
h2{ ~ってのは、CSSのセレクターの話になるので、また今度。
 
 
|<<先頭へ | <前へ