ネットと副業

副業が本業の収入を大きく超えたので会社やめました

CSS はてなブログ

《はてなブログ》超簡単 記事の見出しを飾り付けてみる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分程度でしょうか。超簡単ですね。はてなブログに限ったことではないので、ほかのブログサービスやホームページなどでもお試しあれ( ・ω・)ノ 

-CSS, はてなブログ

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

《はてなブログ》記事のタイトルのマウスオーバー時の下線をなくしたいのでCSS改修します。

前々から気がついてはいたものの、まぁいいかと放置してたのです。 このはてなブログ、記事のタイトルがリンク仕様になっててマウスオーバーすると下線でるのがあんま好かんです(;´Д`) 記事のタイトルがそこ …

no image

はてなブログからWordPressに引越

  まず、はてなブログのデータをエクスポートします。 “設定”の“詳細設定”ページ、下のほうにエクスポートリンクがあります。   エクスポートするとテキストファイルがダウンロードされます。このファイル …

no image

〈はてなブログ〉記事カテゴリーの設定方法

  ブログには記事のカテゴリーを設定する機能があります。 たとえば、デザイン関連の記事であれば、 「デザイン」というカテゴリをつけておくと そのブログの、「デザイン」カテゴリの記事だけを、 まとめて見 …

no image

《CSS》HTMLでテキストを箱打ちしたい→印刷の文字組みまで遡る。

活版印刷からCSSにまで。 Webデザインをイラストレーターで感覚的に作業をつづけていて、「さてHTMLにするか」ってコーディングに入るときに、「おや?デザインしたはいいけど、これってCSSでどうやっ …

no image

GoogleのBloggerから、はてなブログへ引越しする方法をまとめました

前置き Bloggerからエクスポートする はてなブログにインポートする   はてなブログを1つ増やす   はてなブログにインポートできる形式   BloggerエクスポートファイルをMT形式に変換す …