ブログをストレスフリーに更新していこう その2
今回は前々から手を付けようと思っていた「見出しのスタイル」について
デザインテンプレートにあった見出しをそのまま使用していたが、
如何せん、白地のデザインにはあまり目立たない。
見出しのサイズは「大見出し」・「中見出し」・「小見出し」とあるが、
特に中見出しと小見出しの違いがフォントサイズくらいしかなく、
強調(太字)表現とあまり差異が見られなかった。
そこで、CSSを追加しようと考えた。
ちょっとした前提
デザインテンプレートを使用しているため、元々のCSSがある。
システム的にもっとも一番最後に適用されるCSSらしく、
どんなCSSでも、すでに明記されているCSSで上書きされてしまう。
なので、これを無視することはできない。
では、まず、元々のCSSを探して、上書きされてしまうCSSプロパティを確認する。
「はてなブログ」の管理画面⇒「デザイン」⇒「カスタマイズ」⇒「デザインCSS」
よく見るとURLが書かれている。
/* <system section="theme" selected="8454420450068575461"> */
@import url("http://hatenablog.com/theme/8454420450068575461.css");
/* </system> */
URLにアクセスすると、なにやら文字の羅列が。
これがデザインテンプレート内のCSSである。
長い。
が、これをすべて確認する必要はない。
今回確認するのは、見出し部分だけである。
はてなブログのメニューで用意されている見出しは、
「大見出し」・「中見出し」・「小見出し」で、HTMLでは・・・
・大見出し：h3
・中見出し：h4
・小見出し：h5
という風に対応している。
なので、先ほどのデザインテンプレート内の長いCSSから、
h3、h4、h5を探し出す。
目視で探し出すのは無理があるので、
Ctrl＋F(検索窓の出現)から探し出す。
おそらく2,3箇所ヒットする。
それをどっかのメモ帳に抜き出すと、以下のようになる
サイトデザインテンプレートのCSS
.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5
{
position:relative;
margin-top:35px;
margin-bottom:20px;
font-weight:bold;
}
.entry-content h2
{
margin-left:-60px;
padding:20px 0 20px 58px;
border-left:2px solid #78b4d8;
font-size:125%;
}
.entry-content h3
{
padding:0 0 10px;
border-bottom:5px solid #eee;
font-size:125%;
}
.entry-content h4,.entry-content h5
{
font-size:113%;
}
.entry-content h5
{
font-weight:normal;
}
見出し作り
サイトデザインテンプレートCSSを見ると・・・
大見出し
h3には、主に見出しテキストの配置と下線を引くものがあるようだ。
h4、h5についてはサイズだけ。
h3がとてもやっかい。
下線を引かれた状態はどうやっても回避できない。。
他の見出しHTML(h1、h2)を使ってもいいが、
ブログ更新時にいちいち手動で行うのは面倒。
なので、なるべくはてなブログのメニューにある
「大見出し」・「中見出し」・「小見出し」を使いたい。
いろいろと試行錯誤した結果、以下のようになった。
/* <system section="theme" selected="8454420450068575461"> */
@import url("http://hatenablog.com/theme/8454420450068575461.css");
/* </system> */
h3 {
border-top:15px solid #eee;
border-left:20px solid #eee;
background:#eee;
}
h3:before{
content:" ";
position:absolute;
top:100%;
left:-6px;
width:0;
height:0;
border-width:15px;
border-style:solid;
border-color:transparent;
border-top-color:#F05F40;
}
h4 {
padding-left:50px;
background:#eee;
}
h4:before{
content:" ";
position:absolute;
top:4px;
left:19px;
width:0;
height:0;
border-width:10px;
border-style:solid;
border-color:transparent;
border-top-color:#F05F40;
border-left-color:#F05F40;
}
h5 {
padding-left:60px;
background:#eee;
}
h5:before{
content:" ";
position:absolute;
top:6px;
left:30px;
width:0;
height:0;
border-width:8px;
border-style:solid;
border-color:transparent;
border-top-color:#F05F40;
border-bottom-color:#F05F40;
border-left-color:#F05F40;
}
ちょっとした解説
下線を消すことができないのであれば、
背景を全部同じ色にしてしまうという暴挙に。
それだけだと特徴のない見出しになってしまうため、
目立つように色と形を付けたす。
まだ形は試行錯誤中。
まとめ
CSSに適用順序があるとは。
やはり自分の頭で考えて手を動かさないと、
深い理解が得られないなと思った。
以上、たろいもでした。
