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

Netablog

デザインしたりとWebマーケティングしたりするときにネタになることまとめているネタブログです。

《はてなブログ》超簡単 記事の見出しを飾り付けてみるCSS

f:id:nekonkeo:20151004183248j:plain


記事の途中で出てくる見出しがちょっと寂しいので、飾ってみたいと思います。
自分でデザイン考えてCSSをいじくりたおすのも楽しい作業ですが、今回は簡単にできそうな方法で進めてみます。



サンプルを探します。

見出しのデザインサンプルとなると、たくさんの方がサンプルをネット上にあげてくれているので、それをお借りして作業しましょう。


「見出し css」でググってみました。この方が記事がとても魅力的ですね(*´∀`)ノ

nelog.jp


「少しの労力で」ってとこにが胸アツです( ・ω・)。記事の内容が、リンク集だったので、この中からよさげなものを探して…


選んだのがここ。

blog.3streamer.net


「コピペでできる」ってところがズキューン(*´艸`*)ときます。


このSTREAMERさんのページに何個かデザインサンプルがあがっていますが、シンプルにいきたいので一番最初のデザインでいきます。


f:id:nekonkeo:20151010132937j:plain






実際にコピペしてみます。


「コピペでできる」てことなので、実際にコピペしてみましょう。まず、CSS改修前の見出しがこんな感じ

f:id:nekonkeo:20151010132956j:plain

はてなブログの編集画面でいうとろこの「中見出し」を選んで使ってます。
ただの太い文字です(´д⊂)


まずはてなブログの管理画面のメニューからデザインを選びます。

f:id:nekonkeo:20151004183909j:plain



スパナマークを選んで

f:id:nekonkeo:20151004184000j:plain




一番下のデザインCSSを開きます。

f:id:nekonkeo:20151004184143j:plain



中見出しにはh4があてられており、h4にあてられたCSSを書き換えてもいいですが、ごちゃごちゃして探すのめんどいので、h4のスタイルを上書きされるようにします。


さきほどのSTREAMERさんのサンプルの中身だけコピーします。

f:id:nekonkeo:20151010133406j:plain

.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;
}



するとこうなります。

f:id:nekonkeo:20151010133750j:plain



バッチリです(=゚ω゚)ノ 。



あとは自分の好みに合わせて変えました。

ちょっとバックの青が濃いーので、グレーに、
文字を黒に、
左の線をちょいと細くして色を落ち着かせます。

.entry-content h4 {
  margin:0 0 30px 0;
  padding:12px 10px;
  border-left:3px solid #5483ba;
  background: #e6e6e6;
  color:#454545;

 

こうなりました。
f:id:nekonkeo:20151010134213j:plain


白抜き文字だと見出しにしては目立ちすぎな感じがするので、見出しはこれぐらい落ち着いてるほうが読みやすいかななんて思っております。



はい、ちょっと改造したのでコードをいじくりましたが、ほんとに「コピペで」できました」。作業時間は、検索する時間いれても10分程度でしょうか。超簡単ですね。はてなブログに限ったことではないので、ほかのブログサービスやホームページなどでもお試しあれ( ・ω・)ノ