見出しのデザインを変更して、タグもすべて修正しました！
2012/10/07CSSに関してちゃんとした勉強はしてません、@jinnaitakumiです。
いままではなんとか、どこかのサイトのコピペや、色だけ変更したりでなんとか過ごしてきましたが、ついに自分好みに変更いたしました！
また以前の記事を読んでいただけると分かると思いますが、タグの書き方がちょっとおかしかったんですね。
・恰好良い”見出し”を使って、カンタンにブログをスタイリッシュにする方法 | jinnaitakumi.com
それを今回は修正しました。
見出しデザインの変更
分かる人はピンと来るかもしれません。
今回の新しい見出しは、delaymania.comさんの見出しのデザインを主にパクらせていただきました！
こちらを見れば、「ああ」となるかとｗ
・h3をh2に、h2をh3に変更してそれぞれのデザインも調整しました | delaymania.com
アイキャッチすらパクっているという徹底ぶり！
なんかすいませんｗ
コードはいまのところこんな感じ。無駄とかダメなところがまだまだありそうｗ
/* 大見出し */
h2 {
background: #fff;
color: #fff;
font-size:120.5%;
font-weight:bold;
text-shadow:1px 1px 1px #0066a1;
line-height: 1.5em;
padding:5px 20px 5px 20px;
background: -moz-linear-gradient(top, #36f 0%, #36f 50%, #36f 51%, #36c 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#36f), color-stop(50%,#36f), color-stop(51%,#36f), color-stop(100%,#36c)); /* webkit */
-pie-background:linear-gradient(top, #36f 0%, #36f 50%, #36f 51%, #36c 100%); /* ie */
behavior: url(images/PIE.htc); /* ie */
border-radius:2px;
box-shadow:0px 1px 1px rgba(0,0,0,0.5);
}
/* 中見出し */
h3 {
font-size:115.5%; /*←この数字は適当です。18px相当の大きさ。*/
font-weight:bold;
line-height: 1.5em;
border-color:#36f;
border-width:0 0 1px 10px;
border-style:solid;
background:#fff;
padding:7px 10px 5px 10px;
}
/* 小見出し */
h4 {
font-size:110.5%; /*←この数字は適当です。18px相当の大きさ。*/
font-weight:bold;
line-height: 1.5em;
border-color:#acacac;
border-width:0 0 1px 10px;
border-style:solid;
background:#fff;
padding:7px 10px 7px 10px;
}
classとかidの指定をしたほうがいいと思うんですが、その辺がよく分からないんですよね。誰か教えて！
h1、h2、h3タグはテーマに使われてるんで、h2タグから見出しに使っています。
classだかidだかでcontentを指定すれば問題無さそうなんですが、なんかうまくいかないんですよね。
なので、指定はいまのところできていません！
hタグを総入れ替え！
いままでの記事だと見出しのタグがちょっとおかしかったんですね。
<h2 id="heading2">大見出し</h2>
<h2 id="heading3">中見出し</h2>
<h2 id="heading4">小見出し</h2>
これでも普通に使えることは使えるんです。
でもなんか気持ち悪かったんですよね。
やっぱりね
<h2>見出し</h2>
とかでかけた方がスマートだよね！
それにあとあと見出しのタグを総入れ替えするときに、終了のタグが全部h2なのは、厄介かもしれない、という危惧もあって、変更しました。
手作業でね！
ブログを初めて2ヶ月ほどですが、90記事くらいあって、なかなかしんどかったｗ
本当はね、プラグインを使って一気に片付けることもできるんですが、さっきも書いたように終了タグが全部h2なので、結局手作業じゃないとダメだったんですよね。
メモ帳にの置換機能が大活躍でした。
おわりに
ときどき見出しをHTMLで直接、装飾している人を見かけますが、これはやばいですよ！
あとからの修正が！
当ブログの前身である『有限ノート。』ではずっとHTMLで装飾したまま記事数がとてつもなく増えてしまったので、変更は諦めましたｗ
みなさんは、そんなことにならないように、見出しにはCSSでデザインを作って呼び出すだけにしておくことをオススメします。
オススメ記事
先ほど紹介したdelaymaniaさんのブログで参考になるエントリを幾つか紹介しておきます。
