記事の途中で出てくる見出しがちょっと寂しいので、飾ってみたいと思います。
自分でデザイン考えてCSSをいじくりたおすのも楽しい作業ですが、今回は簡単にできそうな方法で進めてみます。
サンプルを探します。
見出しのデザインサンプルとなると、たくさんの方がサンプルをネット上にあげてくれているので、それをお借りして作業しましょう。
「見出し css」でググってみました。この方が記事がとても魅力的ですね(*´∀｀)ﾉ
「少しの労力で」ってとこにが胸アツです( ・ω・)。記事の内容が、リンク集だったので、この中からよさげなものを探して…
選んだのがここ。
「コピペでできる」ってところがズキューン(*´艸｀*)ときます。
このSTREAMERさんのページに何個かデザインサンプルがあがっていますが、シンプルにいきたいので一番最初のデザインでいきます。
実際にコピペしてみます。
「コピペでできる」てことなので、実際にコピペしてみましょう。まず、CSS改修前の見出しがこんな感じ
はてなブログの編集画面でいうとろこの「中見出し」を選んで使ってます。
ただの太い文字です(´д⊂)
まずはてなブログの管理画面のメニューからデザインを選びます。
スパナマークを選んで
一番下のデザインCSSを開きます。
中見出しにはh4があてられており、h4にあてられたCSSを書き換えてもいいですが、ごちゃごちゃして探すのめんどいので、h4のスタイルを上書きされるようにします。
さきほどのSTREAMERさんのサンプルの中身だけコピーします。
.headding01 {
margin:0 0 30px 0;
padding:12px 10px;
border-left:5px solid #1871B8;
background: #1D8ADE;
color:#FFF;
}
はてなブログの管理画面にもどって、デザインCSSの一番下の行に、クラスを記入したて中身をペーストします。はてなブログのテンプレートによって違うのかもしれませんが、私の場合h4のクラス名は.entry-content h4です
.entry-content h4 {
margin:0 0 30px 0;
padding:12px 10px;
border-left:5px solid #1871B8;
background: #1D8ADE;
color:#FFF;
}
するとこうなります。
バッチリです(=ﾟωﾟ)ﾉ 。
あとは自分の好みに合わせて変えました。
ちょっとバックの青が濃いーので、グレーに、
文字を黒に、
左の線をちょいと細くして色を落ち着かせます。
.entry-content h4 {
margin:0 0 30px 0;
padding:12px 10px;
border-left:3px solid #5483ba;
background: #e6e6e6;
color:#454545;
}
こうなりました。
白抜き文字だと見出しにしては目立ちすぎな感じがするので、見出しはこれぐらい落ち着いてるほうが読みやすいかななんて思っております。
はい、ちょっと改造したのでコードをいじくりましたが、ほんとに「コピペで」できました」。作業時間は、検索する時間いれても10分程度でしょうか。超簡単ですね。はてなブログに限ったことではないので、ほかのブログサービスやホームページなどでもお試しあれ( ・ω・)ﾉ