おおまめとまめ育児日記

2017年女児出産 育児中の記録 絵日記 料理 もろもろ

【コピペOK】はてなブログで使える見出しデザイン!CSS

【スポンサーリンク】

こんにちは、おおまめです。
皆様見出しは使っていますか?
はてなブログで使える、コピペ可能の見出しデザインカスタマイズのcssをご紹介致します!

見出しとは?

↑↑↑こちらのことです。
見出しは一目見て何のことが書いてあるかわかりやすくしたもので、ブログを書くうえでとても大事なものです。
同じ大きさの文字がずらーっと並んでいるよりも、メリハリがつきとても見やすいですよね。
最適な言葉で見出しを作ることは、SEO(検索エンジン最適化)の面からいっても非常に重要とされています。
今まで使っていなかった方は使ってみましょう。

見出しの種類

見出しは全部で6つあります。

<h1>見出し1</h2>→1番大きな見出し

<h2>見出し2</h2>→2番目に大きな見出し

<h3>見出し3</h3>→3番目に大きな見出し

<h4>見出し4</h4 >→4番目に大きな見出し

<h5>見出し5</h5>→5番目に大きな見出し

<h6>見出し6</h6>→6番目に大きな見出し

見出しの使い方は?

見出しの使い方は2種類!
HTMLで書く

<h3>ここに文字</h3>

このように書くと見出しとして反映されます。

【スポンサーリンク】



はてなブログはボタンひとつで見出しが使えます!
まず見出しにしたい文章を打ち込みます。
文章の左にカーソルを合わせます。

はてなブログ記事編集画面

ブログを編集するページの左上にある【見出し】をクリック。

はてなブログ記事編集画面
好きな見出しを選んで下さい。
簡単に見出しが作れますね。

簡単!見出しをオシャレにカスタマイズしよう

では実際に見出しをカスタマイズしてみましょう。
自分好みに色やデザインを変えることでやる気もアップしますし、オリジナリティを出せますよ!

CSSコピペ場所

はてなブログデザインcss
デザイン→工具マーク→デザインcss
に貼り付けて下さい。

カラーコード

#○○○○○○
#に続く下6桁の数字は色の指定をしています。
カラーコードを見てお好きな色に変えてください。

www.colordic.org

コピペする際に見出し【h○】変更してください!

全てh2~h4で記述しています。
それぞれご自身の用途に合うよう変更して下さい。
見出しの書き換え等行っていない場合は↓↓↓
はてなブログ大見出しに使用→h3
中見出しに使用→h4
小見出しに使用→h5 に変更

見出しの書き換えについてはこちら↓↓↓
何のことかわからない人は特に読むことをおすすめします。
www.oomametomame.com

注意点

自己責任でお願いします。
CSSを書き換える際はバックアップをとってくださいね。
CSSを勉強中の為、統一性がなく、実験みたいになっていますが、気にならない方はご自由にどうぞ(笑)

【下線】
見出しデザイン下線

 .entry-content h2 {
padding: .25em 0 .25em .75em;
border-bottom: 3px solid #663d3d;
}


【下線2本】
見出しデザイン下線2本

.entry-content h4 {
padding: .25em 0 .25em .75em;
border-bottom: 5px double #3d663d;
}


【下線点線】
見出しデザイン点線

 .entry-content h3 {
padding: .25em 0 .25em .75em;
border-bottom: 3px dotted #3d6666;
}


【破線】
見出しデザイン破線

 .entry-content h3 {
padding: .25em 0 .25em .75em;
border-bottom: 3px dashed #3d6666;
}


【破線上下】
見出しデザイン上下破線

.entry-content h2 {
padding: .25em 0 .25em .75em;
border-top: 3px dashed #3d3d66;
border-bottom: 3px dashed #3d3d66;
}


【マーカー】
見出しデザインマーカー太め

.entry-content h4 {
background: linear-gradient(transparent 60%, #e6b7b1 60%);
}


【左ボーダー+下線+背景】
見出しデザイン左ボーダー 下線 背景あり

.entry-content h2 { 
padding: 4px 10px;
color: #111;
background-color: #f5f5f5;
border-left: 8px solid #b0e0e6;
border-bottom: 2px solid #b0e0e6;
}


【上下ボーダー】
見出しデザイン上下ボーダー

.entry-content h3 {
padding: 4px 10px;
color: #111;
border-top: 2px solid #b0e0e6;
border-bottom: 2px solid #b0e0e6;
}


【上下二重線】
見出しデザイン上下二重線

.entry-content h4 {
position: relative;
padding: 1em 0;
}
h4::before,
h4::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 6px;
box-sizing: border-box;
}
h4::before {
top: 10px;
border-top: 2px solid #b0e0e6;
border-bottom: 1px solid #b0e0e6;
}
h4::after {
bottom: 10px;
border-top: 1px solid #b0e0e6;
border-bottom: 2px solid #b0e0e6;
}


【左ボーダー】
見出しデザイン左ボーダー

.entry-content h2 {
padding: .25em 0 .25em .75em;
border-left: 6px solid #a9a9a9;
}


【左2本ボーダー】
見出しデザイン左2本ボーダー

.entry-content h2 {
padding: .25em 0 .25em .75em;
border-left: 6px double #5f9ea0;
}


【左ボーダー2本+下線】
見出しデザイン左ボーダー2本 下線

.entry-content h2 {
padding: .25em 0 .25em .75em;
border-left: 6px double #80a15f;
border-bottom: 2px solid #80a15f;
}


【かこみ角丸】
見出しデザインかこみ角丸

.entry-content h3 {
padding: .5em .75em;
border: 2px solid #191970;
border-radius: 4px;
}


【かこみ四隅飛び出し】
見出しデザインかこみ 四隅飛び出し

.entry-content h3{
position: relative;
padding: 10px 20px;
font-size:20px;
text-align:center;
border-top: solid 1px #fa8072;
border-bottom: solid 1px #fa8072;
}
h3::before,
h3::after{
content: '';
position: absolute;
top: -10px;
width: 1px;
height: calc(100% + 20px);
background-color: #fa8072;
}
h3::before{left: 10px;}
h3::after{right: 10px;}


【左上にpoint】
見出しデザインかこみ 左上に文字

.entry-content h2{
position:relative;
padding:20px 10px;
font-size:20px;
border:1px solid #000000;
}
h2::after{
content: "POINT";
position: absolute;
top: -8px;
left: 10px;
background: #fff;
font-size: 12px;
color: #778899;
padding: 0 10px;
}

【かこみ二重線】
見出しデザインかこみ二重線

.entry-content h4 {
padding: 10px;
border: 3px double;
border-color: #000000;
}


【かこみ二重線背景あり】
見出しデザインかこみ二重線背景あり

.entry-content h4 {
padding: 10px;
background-color: #e6ffff;
border: 3px double;
border-color: #000000;
}


【かこみ角丸背景あり】
見出しデザインかこみ角丸 背景あり

.entry-content h3 {
padding: .5em .75em;
background-color: #b0c4de;
border-radius: 4px;
}


【背景+下線】
見出しデザイン背景 下線

.entry-content h3 {
padding: 12px;
background-color: #ffcccc;
border-bottom: 2px solid #ff9999;
}



にほんブログ村 子育てブログへ