asaworks

自分の技術備忘録と雑談

【CSS】はてなブログのCSSをちょこっとだけいじる

f:id:asa-works:20161013115054p:plain

CSSはてなブログCSSをちょこっとだけいじる

前にHTMLで見出しのデザインを変更する。という記事を書きましたが、
よく見たらCSSのカスタマイズができるのね。
よくわからず使い続けていて今更気づきました(^^;)

 

asa-works.hatenablog.com

 

 

というわけで、そこまでバリバリに変更する気もないので、
今回見出しのみ変更してみました。

見出しはh1!と思っていたのですが、はてなブログの見たままモードで
大見出し⇒h3らしいです。

いままで見出しだけHTML編集していたから気づかなかったよ・・・。

「見たままモード」の中でのみの作業にしたいので
閲覧数への影響はとりあえず後回し。

h3の見出しデザインを変更します。

設定はメニューにある

「デザイン」⇒「カスタマイズ」(スパナマーク)⇒「デザインCSS
から行えます。

f:id:asa-works:20170325102629p:plain

 

デザインCSSの中にh3を追加しました。

CSSは以下のとおり

h3 {
border-left: #000080 8px solid;
border-bottom: #000080 2px solid;
font-size: 1em;
font-weight: bold;
}

たまに↑のようにコードを記述することもあるので

h5を利用しちゃいます。

 

h5のCSSは↓にしました。

 

h5 {
background: #DDFFFF;
color: #555555;
font-size: small;
}

 

どんな具合になったか、テストしてみます。

見たままモードで大見出し、小見出しを選んで「プレビュー」

 

f:id:asa-works:20170325102617j:plain

 

うまくできましたね。

 

ところで見出しの「h1、h2、h3・・・」って実際閲覧数に影響がでるのでしょうか。

 

今まで見出しはh1にしていたので、今後この仕様で記事を更新していって、どうなるかまた報告したいと思います。

 

がんばって記事ふやさねば!