読者です 読者をやめる 読者になる 読者になる

むじゃき

なんでもかんでもアウトプット 一日一新 抽象化する思考

ブログをストレスフリーに更新していこう その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に適用順序があるとは。

やはり自分の頭で考えて手を動かさないと、

深い理解が得られないなと思った。

 

以上、たろいもでした。