こんにちは～こなゆです。
今日はオススメの見出しを紹介します！
ブロガーさんなら一度はどのデザインを使おうか迷ったことがあるはずです！
ほんとうにいろんな見出しがあって、決めきれないんですよね。
この記事では様々な種類の見出しを、そしてオススメな見出しをリストアップしました！
それでは早速以下をご覧ください！
コードを貼りつける場所
手順は2つと簡単です！
①はてなブログの管理画面から、下の画像の場所（デザイン）をクリック。
②上のスパナマークをクリックし、「デザインCSS」にコードを追加する。
③変更を保存する。
これだけなので、頑張りましょうね(*'▽')
実際の見出し
背景カラー
padding: 4px 8px;
color: #333;
line-height: 1.5;
background-color: #d9f7f5;
}
左に縦ライン＆背景カラー
padding: 0.5em!important;/*余白*/
color: #494949!important;/*文字色*/
background:#e6e6fa;/*背景色*/
border-left: solid 5px #1e90ff;/*左の線の設定*/
}
上下ライン
上と下に線を引いたデザイン
padding: 6px 0;
border-top: 2px solid #2d70a4;
border-bottom: 2px solid #2d70a4;
color: #2d70a4;
line-height: 1.5;
}
二色の下ライン
padding: 6px 0;
border-bottom: 4px solid #ccc;
color: #333;
line-height: 1.5;
position: relative;
}
.entry-content h3:before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100px;
height: 4px;
background-color: #3498db;
z-index: 2;
}
二層デザイン
osition: relative;
padding: 6px 10px;
color: #fff;
line-height: 1.5;
z-index: 2;
}
.entry-content h3::before,
.entry-content h3::after {
content: '';
position: absolute;
width: calc(100% - 4px);
height: 100%;
}
.entry-content h3::before{
top: 0px;
left: 0px;
z-index: -1;
background-color: #29cec5;
}
.entry-content h3::after{
top: 4px;
left: 4px;
z-index: -2;
background-color: #333;
}
左に○
position: relative;
padding: 6px 0 6px 24px;
border-bottom: 2px solid #1e90ff;
color: #333;
line-height: 1.5;
}
.entry-content h3::before,
.entry-content h3::after {
content: '';
position: absolute;
background-color: #1e90ff;
border-radius: 50%;
}
.entry-content h3::before{
top: 6px;
left: 8px;
width: 12px;
height: 12px;
}
.entry-content h3::after{
top: 20px;
left: 0;
width: 8px;
height: 8px;
}
リボンのようなデザイン
margin-bottom: 1.2em;
padding: 6px 10px;
position: relative;
color: #fff;
line-height: 1.5;
background-color: #e67b7b;
}
.entry-content h3:before,
.entry-content h3:after {
content: "";
position: absolute;
top: 100%;
border-bottom: 10px solid transparent;
}
.entry-content h3:before {
left: 0;
border-right: 14px solid #d06464;
}
.entry-content h3:after {
right: 0;
border-left: 14px solid #d06464;
}
最初の文字を大きくしたデザイン
font-size: 1.6em;
letter-spacing: .04em;
}
中央揃えに下線
position: relative;
padding-bottom: 10px;
color: #333;
line-height: 1.5;
text-align: center;
}
.entry-content h3:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
height: 4px;
width: 40px;
background-color: #333;
}
下線が矢印
position: relative;
padding-left: 25px;
}
.entry-content h3:before {
position: absolute;
content: '';
bottom: -3px;
left: 0;
width: 0;
height: 0;
border: none;
border-left: solid 15px transparent;
border-bottom: solid 15px rgb(119, 195, 223);
}
.entry-content h3:after {
position: absolute;
content: '';
bottom: -3px;
left: 10px;
width: 100%;
border-bottom: solid 3px rgb(119, 195, 223);
}
両端に線
position: relative;
display: inline-block;
padding: 0 55px;
}
.entry-content h3:before,
.entry-content h3:after {
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 45px;
height: 1px;
background-color: black;
}
.entry-content h3:before {
left:0;
}
.entry-content h3:after {
right: 0;
}
端にアイコンをつけた見出し
この見出しは「Fontowesome」を読み込まないと使用することができません。
導入方法は後ほど。
position: relative;
background: #f4f4f4;
padding: 2px 5px 2px 20px;
font-size: 20px;
color: #474747;
border-radius: 0 10px 10px 0;
}
.entry-content h3:before {
font-family: "Font Awesome 5 Free";
content: "\f041";
display: inline-block;
line-height: 40px;
position: absolute;
padding: 0em;
color: white;
background: #ff6363;
font-weight: 900;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1.35em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}
Fontowesomeを読み込む場合
<head>に要素を追加するところに、以下コードを貼り付けてください。
上記コードを入力する場所は以下の通りです。
①はてなブログ設定→詳細設定をクリック
②下の方までスクロールすると、以下画像の箇所があるのでそこにコピペ。
③保存して終了です。
まとめ
今回はいろいろな見出しを紹介してみましたが、いかがでしたでしょうか。
どれか一つでも使っていただけたら嬉しいです！
また、他の人のブログを見てる時にいい見出しがあったら、それを参考に自分でアレンジしてみると、納得の見出しができあがりますよ(´･ω･｀)
それでは！
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ブログ村に参加しています！ポチっとお願いします(*'▽')
