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

コピペでOK!はてなブログの見出しデザインをcssでカスタマイズしてみました

はてなブログの見出しデザインをcssでカスタマイズしてみた

また最近ちょこちょことブログのデザインをカスタマイズしています。@KiKiです。

今日は見出しを変更してみました。もちろん参考にしている神サイトのおかげです。

※無料版なのでパソコン表示のみのカスタマイズになります。

追記 2016/12/19:今のデザインcssに変更しました。現在は有料版ですが、スマホVer.についてはまた別記事で紹介したいと思います。コピペよろしくどうぞ☆

参考にしたサイト

以前のカスタマイズまとめ記事でも紹介させていただいたサイトです。お世話になっておりますー!

NxWorld

Web'Notes

はてなブログcssをカスタマイズする場所

先にデザインをカスタマイズする時にコピペする場所のおさらいです。

1、ログインして「デザイン」をクリック

はてなブログ 見出し カスタマイズ

2、デザインのカスタマイズをクリック

はてなブログ css デザイン

3、デザインcssをクリックして書き込むだけでOK!

はてなブログ デザイン 見出し

見出しの種類や使い方のおさらい

大事なので、こちらもおさらい。まず見出しは3種類あります。

  • 大見出し
  • 中見出し
  • 小見出し

それぞれHTMLタグ表示で、

  • <h3>大見出し</h3>
  • <h4>中見出し</h4>
  • <h5>小見出し</h5>

このように設定されていて、使う順番も大→中→小と決まっています。

「大→中→小→小→小→中→小→小」でも大丈夫です。詳しいことは、こちらのサイトでわかりやすく説明されているので読んでみてね。

大見出しのカスタマイズ方法

どんな風に変更したのかは記事を見ていただければわかると思うので、わたしがやってみたカスタマイズを紹介します。

参考サイトからcssタグを「デザインcss」にコピペする

NxWorldさんのデザインサンプル 50 を参考にさせていただきました。まずはそのままのタグをデザインcssにコピペします。

h1 {
padding: .75em 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

コピペしたタグを「はてなブログ」仕様に変更する

はてなブログではこのままのタグだと反映されないので、少しタグを変更します。

赤文字の部分は必ず書き換えてください。紫はキキこむ仕様です。

.entry-content h3 {
padding: .60em 0;
border-top: 3px double #f09199;
border-bottom: 3px double #f09199;
font-size:130%;
}

※これは大見出しを変えたい場合のタグです。文字の大きさを変更したい時は[font-size:120%;]の部分を書き換えましょう。

中見出しを変更したい場合は「.entry-content h3」の部分を「.entry-content h4」に、小見出しを変更したい場合は「.entry-content h5」にかえてくださいね。

中見出しのカスタマイズ方法

次は中見出し、チェックの方です。

参考サイトからcssタグを「デザインcss」にコピペする

Web'NotesさんのCSSで作る見出しデザインを参考にさせていただきました。大見出しのカスタマイズと同様に、デザインcssにコピペします。

h1 {
position: relative;
padding: .75em 1em .75em 1.5em;
border: 1px solid #ccc;
}

h1 ::after {
position: absolute;
top: .5em;
left: .5em;
content: '';
width: 6px;
height: -webkit-calc(100% - 1em);
height: calc(100% - 1em);
background-color: #3498db;
border-radius: 4px;
}

コピペしたタグを「はてなブログ」仕様に変更する

こちらも同様に、赤文字部分を変更します。中見出しなので「.entry-content h4」でやりますよー。

いろいろ変更しているので、キキこむデザインがお好きならコピペでどうぞ。

.entry-content h4{
margin-top:1.5em;
position: relative;
padding: .7em .5em .7em .9em;
font-size:115%;
}
.entry-content h4::after {
position: absolute;
top: .5em;
left: .1em;
content: '';
width: 7px;
height: -webkit-calc(100% - 1em);
height: calc(100% - 1em);
background-color: #f09199;
border-radius: 4px;
}

本当はフォントも変更しているんですが、Webフォントを導入していてややこしいので省きます。

Webフォント導入方法は過去記事のGoogleの日本語Webフォントをブログに導入する簡単な方法を読んでみてください☆

おわりに

ポイントで色を使うとかわいいですが、同じような色を文字でも使うとくどいなーと思いました。見にくくてごめんなさい。

文字色にはこちらのサイトをいつも参考にしています。

WEB色見本 原色大辞典 - HTMLカラーコード

またカスタマイズしたら記事をまとめてみようと思います。それでは☆

あなたにおすすめの関連記事

読んでいただきありがとうございました。

 

広告を非表示にする