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

Things in the closet

ゴロ合わせは拝借&下ネタ満載ですのでご勘弁

 MENU

【はてなブログカスタマイズ】見出しのデザイン

普段とはかなり毛色が違うけれど、色々とはてなブログのカスタマイズを行ってきて一段落ついたような気がするので、備忘録がてらまとめていこうと思います。とりあえず一番目立って変更しやすい見出しから。ただコピペするだけでももちろん良いのですが、ある程度自分の好きなように微調整できるとかなりカスタマイズの幅が広がるので、簡単に説明をつけながら書いてみようと思います。はじめはこのサイトや、後で紹介するサイトのコピペをしてみて、少しづつ変更を加えられればいいと思います。

見出しの変更方法

上のように、文章の狭間に置いて、読みやすくするようなやつを見出しと呼んでいます。デフォルトだとかなり微妙な仕様なので、自分の好きなように変更しましょう。「ダッシュボードのデザイン→スパナマーク(カスタマイズ)→デザインCSS 」の部分をクリックして、下に出てくる英数字の文字列(コード)をコピペすれば変更が反映されます。はてなブログでは、見出しが3種類あって、

  • h3=大見出し
  • h4=中見出し
  • h5=小見出し

という風に設定されているので、中見出しの設定をしたければ .entry-content の後の部分をh4に変えればOK。

大見出し

一番目立つ見出しはここの「よくあるや~つ」を使わせていただきました。

このサイトでは次のようになっています。

.entry-content h3{
    margin-top:15px;
    padding: 5px 10px ; 
    border-left: 10px solid #fc0;
    border-bottom: 2px solid #fc0;
    } 

 

paddingとmargin

「ここの間が空きすぎ」とか「もう少し詰めたい」なんて時にいじるものですが、違いが曖昧だと結構時間がかかってしまいます。とりあえず下のリンクを参考に。

magrinは「要素間の間隔」のことで、paddingは「要素内の余白」のことなので、「見出しの文字と下の棒線との間を空けたい」という時には、padding-bottomを少し大きい値にすれば可能です。上の例だと略式を使っていて、上下のpaddingが5px、左右が10pxという意味になるので、5pxのところを7pxとかにしてみると少し上下の幅が広がるのがわかると思います。

 

ボーダーの色と太さ

border-leftで左の太く短い線を、bottomで下の細長い線を設定しています。

 

border-left: 10px solid #fc0; を例にとると、10pxで太さ、solidで形状(solidは一本線)、#fc0で(オレンジっぽい色)を指定していて、このfc0の部分を変えれば好きな色に変更できます。

この#で指定された色はカラーコードといって、下記サイト等で調べられます。めんどくさい時は#を使わずにblackとかorangeとかでも可能です。

 

色コード | 違いが分かる色見本 | 違いが分かる色見本

中見出し

チェックマークにしたかったので下のリンクを参考に微調整。

.entry-content h4{
position:relative;
padding-left:30px;
line-height: 140%;
border-bottom: 2px solid #bbbbbb;
}
h4:after, h4:before{
content:'';
height:18px;
width:4px;
display:block;
background: #3f3f3f;
position:absolute;
top:4px;
left:15px;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
}
h4:before{ height:10px;
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
top:10px;
left:7px
}

なんか長すぎてよくわからないけれど、一番最初の{}で要素全体の指定を、次のh4:after , h4:before {}というやつで、チェックマークの指定をしている感じ。棒線を引いた部分で、大見出しと同じように色や余白を変更できます。

 

小見出し

これまたさっきのサイト(CSSで作る見出しデザイン)を参考に。これも同様に、最初の{}で要素全体、次のbeforeで前についてる丸っこいやつの指定をしています。最初は普通に〇にしたけれど、ちょっと縦長にしてみても面白いと思ってheight(高さ)を18px、width(横幅)を6pxに。また、大見出しや中見出しと違って上下の余白はそんなになくてもいいかなと思ったのでmargin-topとbottomを7ptずつに指定してあります。文字も90%と小さめで、font-weight:bold;によって文字を太字にしています。

 .entry-content h5{
 position:relative;
 margin-top: 7px;
 margin-bottom: 7px;
 padding-left:20px;
 font-size: 90%;
 font-weight: bold;
}
h5:before{
 content:''; 
 border-radius:30px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px; 
 height:18px; 
 width:6px; 
 display:block; 
 position:absolute; 
 top:4.5px; 
 left:7px; 
 background:#fc0;
}

見出し例まとめ

「はてなブログ 見出し」で検索してもいろいろ出てきますが、「見出し CSS」とすればさらにたくさんの種類が出てくるのでおすすめです。はてなブログの記事に適用するには、. entry contentが必要なのでお忘れなく。前に出てきた2つ含め、参考にさせていただいたリンクをいくつか紹介します。


HOME

人気記事

カテゴリ

Top