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

はてなブログの"見出し"のカスタムcss【ブログカスタムVol.2】

はてなブログカスタム

f:id:george-gogo:20151211002453p:plain

前回の記事をアップした直後にBlankというテーマに変更しました。 とてもシンプルでいいですな。さて今回は”見出し”をカスタムしていこうじゃないの。

はてなブログのカスタム記事のまとめはこちら

”見出し”のカスタム

※はてなブログのカスタムCSSを書く場所なんかは前回の記事で書いております。

見出しとは記事の内容が一目で分かるように付けられた題名。後に続く内容を端的に表したものもあれば、読者の目を引くことだけを目的にした内容と関係の薄いものも存在する。

 なるほど。想像通りですな。

とりあえず今のシンプルな見出しでもいいんだけど、「読者の目を引く」ほど目立たないのを修正していきます。

まずは大見出し(ちなみにこれは中見出し)

f:id:george-gogo:20151210220537p:plain

大見出しって名前にしては小さい。

もうねこれはすごく簡単なのでサクッといきます。

 

f:id:george-gogo:20151210232427p:plain

大見出しは「h3」というタグなので「h3」にCSSをかければオッケー。

h3 {
     font-size: 1.5em;
    margin: 0 0 7% 0;
    padding: 2px 8px;
    border-width: 0 0 3px 0;
    border-color: #6D6D6D;
    border-style: solid;
}

これでオッケー。シンプルイズベスト。

次に中見出しだ(これがまさに中見出し)

f:id:george-gogo:20151210223238p:plain

もはやただの大きめの字。

ま、中見出しだから控えめカスタマイズしよう。

f:id:george-gogo:20151210232440p:plain

 

中見出しは「h4」というタグなので「h4」にCSSをかければオッケー。

h4 {
    margin: 0 0 7% 0;
    padding: 10px 10px;
    background: #f6f6f6;
    border-radius: 6px;
}

よし、控えめ。

 

小見出しはやらない 

多分今後も使わないだろうからいいや(めんどくさくなった)。

 

オススメ簡単見出しの作り方

世の中にはとっても親切な方が、とっても素敵なサービスやコンテンツを無料で提供してくれているのです!

これらを使えば、散々僕が書いた記事なんて必要なし(断言)。

ほんの少し紹介しますね!

midashi-maker.v-colors.com

①スタイルシート見出しメーカー (小見出し使った(使うんかーーい))

素晴らしい。さらに管理をしている方のコメントを見ると、いい人感がにじみ出てる。

 

 

web-dou.com

②WEB道さんのCSS見出しジェネレーター

初めてここのサイトを訪れたとき

「え?ここ作った人…神?」

って思いました。見出し以外にもたくさん便利な機能があるので是非。

 

www.nxworld.net

NxWorldさんの記事

まずカッコイイ。サイトが素敵。一人で運営されてるんだとは思うが、記事の質、量がすごい。

とても勉強になるのでご覧になってください。

 

 

おしまい