【CSS】見出し用のブログパーツでも作る

こんにちは。
デザインは難しい。
只野です。

色々な方のブログ見ると皆さん綺麗なデザインで書いていますよね～
私は昔からセンスがあまりよろしくないので迷走中です。
CSSなどの知識は仕事で扱うので知っているのですが肝心のデザイン能力があれですよ。あれ。

知識はあっても使い方がわからなければ意味がないってやつですよ！

ちくしょう…どうすれば綺麗なデザインでブログを書くことができるんだよぉ…
こんな状態ですね笑

そんな中まず必要になるだろうと思うのが”見出し”のデザインかと思っているわけです。
やっぱり”見出し”って大事ですよね。
長い文章になればなるほど”見出し”があるなしで見やすさが変わってきます。デザインセンスがない私でもそれぐらいはわかる。伊達にネットサーフィンをしているわけではない

はい。
そんなわけでまずは見出し系のCSSを考えていきます。一歩ずつ確実にですよ。

まず”見出し”に使われるのはHTMLタグの”<h1>～<h3>”ですね。”<h1>”はブログのタイトルで一度扱うのが好ましいかと思いますのでCSSでスタイルを設定するのは”<h2>～<h3>”にします。
まずは”<h2>”のCSSを設定してみます。

h2のスタイル設定してみたよ！

こんな感じですね。これだけで結構それっぽくなりましたね。えぇ。こんなアクセントが大事なんです。個人的にcssも小難しいのは嫌い（わからない）なのでシンプルにこれだけです。

h2.b
{
    color:#FFFFFF;
    padding:0.5em;
    width:100%;
    background-color:#008080;
}

良い感じです。これだけだと単調な感じになりそうなので色違いのcssも作成します

h2.r
{
    color:#FFFFFF;
    padding:0.5em;
    width:100%;
    background-color:#800000;
}

h2.g
{
    color:#FFFFFF;
    padding:0.5em;
    width:100%;
    background-color:#808080;
}

background-colorの設定値変更しているだけですが良い感じです。私はどれか一つしか使わない可能性が高いですが←
使い方としては”<h2 class=”r” >”だけで使えるシンプルさです。長いクラス名だと忘れちゃいますしね。はい。

続きましては”<h3>”にスタイルを設定します。”<h2>”で”見出し”を書いた後にポイント的な感じで使いたいです。ですのでこんな感じにしてみました。

これもそれっぽいですね。はい。デザインセンスない私からするとこれで結構満足ですよ。cssもこれだけです。

h3.b
{
    color:#008080;
}
h3.b:before
{
    content:"●";
}

はい。”before”を使用して”●”が先頭に勝手につくようにしています。いちいち●書くのめんどいですしね。きがむいたら■とかにもかえられますし

これも念のため色違いをよういしました。

h3.b
{
    color:#800000;
}
h3.b:before
{
    content:"●";
}

h3.b
{
    color:#808080;
}
h3.b:before
{
    content:"●";
}

とりあえずこれだけですでにそれっぽくブログ書けそうな気分です。これからもどんどん増やして置こうかと思います。

本日はこの辺で