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

スポンサードリンク



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

”見出し”のカスタム

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

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

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

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

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

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

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

大見出しは「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;
}

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

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

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

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

中見出しは「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さんの記事

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

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

おしまい

コメントを残す

メールアドレスが公開されることはありません。

ABOUTこの記事をかいた人

東京生まれ東京育ち。フレンチのコックからIT業界に飛び込み、アプリ制作会社を友人と経営してたけど、結婚して会社を抜けて北海道に移住。現在は北海道でサラリーマンをやりながら、野望に向かって切磋琢磨。