しょころぐ

ゆるミニマリストになりたい

はてなブログの見出しを集めてみた

f:id:mvemjsun:20180226103325j:plain

はてなブログを使い始めましたが、スマホのデザインが殺風景だし、字が小さくて読みづらいし、大見出しと中見出しの差がないしで、PRO版でないとデザインにも制限があるので、せめて見出しだけでもと思い、定番の見出しコードを集めてみました。

 

 

 

1.背景塗りつぶし見出し

f:id:mvemjsun:20180224180307j:image

<style>
h3{

color: #ffffff;/*文字の色*/
background: #○○○○○○;/*背景の色*/
padding: 0.5em;
border-radius:0.5em;/*角を丸く*/
}
</style>

 

2.下の線の見出し

f:id:mvemjsun:20180224180333j:image

<style>
h3{
border-bottom: solid 3px #○○○○○〇;
}
</style>

 

 

3.上下にラインが入った見出し

f:id:mvemjsun:20180224180352j:image

<style>
h3 {
padding: 4px 10px;
color: #111;
border-top: 2px solid #○○○○○○;
border-bottom: 2px solid #○○○○○○;
}
</style>

 

4.左に線の入った見出し

f:id:mvemjsun:20180224180416j:image

<style>
h3{
padding: 0.25em 0.5em;
color: #1a1a1a;/*文字の色*/
background: transparent;
border-left: solid 5px #○○○○○○;/*左のワンポイント*/
}
</style>

 

5.左に線の入った見出しその2

f:id:mvemjsun:20180224180429j:image

<style>
h3 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #○○○○○;
}
</style>

 

6.ステッチの見出し

f:id:mvemjsun:20180224180445j:image

<style>
h3 {
position: relative;
padding: 6px 10px;
color: #fff;
background-color: #○○○○○;
border-radius: 4px;
}
.entry-content h3::before,
.entry-content h3::after {
position: absolute;
width: 100%;
height: 4px;
z-index: 2;
content: '';
}
.entry-content h3::before {
top: 0;
left: 0;
border-bottom: 1px dashed #fff;
}
.entry-content h3::after {
top: 100%;
left: 0;
margin-top: -4px;
border-top: 1px dashed #fff;
}
</style>

 

7.周りがもやっとしたステッチ風

 f:id:mvemjsun:20180224180459j:image

<style>
h3{
color: #ffffff;/*文字の色*/
border: 2px dashed #ffecef;
background: #○○○○○;/* 背景の色 */
border-radius: 8px;
box-shadow: 0 0 3px 3px #○○○○○;
margin: 0 0 1.5em;
padding: 0.5em 0.8em;
}
</style>

 

 8.吹き出しの見出し

f:id:mvemjsun:20180224180513j:image

<style>
h3 {
position: relative;
color: #◇◇◇◇◇◇;
padding: 8px 12px;
background-color: #○○○○○;
border-radius: 6px;
}
.entry-content h3::before{
position: absolute;
top: 100%;
left: 32px;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent;
border-top-color: #○○○○○;
content: '';
}
</style>

 

 

見出しコードをコピペする時は

このコードをコピペする際の3つの注意点だよ。

 

見出しは大中小3種類まで使えるよ

コードの最初のh3を

大見出し→h3(そのまま)

中見出し→h4

小見出し→h5

 

に変えて貼ってね。

 

 

他の色にも変えられるよ

 〇〇〇〇〇のところに好きな色のコードを入れてね

 コード表はこのサイトを使っています。

www.wanichan.com

 

 こんな感じにもなるよ

f:id:mvemjsun:20180224185211j:image

 

 

パソコン用にも使えるよ

 各コードの最初の<style>と最後の</style>を消してコピペしてね

 

 

 

 どこに貼ればいいのか

 デザインから真ん中のフォークみたいなマーク(笑)を選択し、記事をクリックする。

f:id:mvemjsun:20180222175256j:plain

 

 

「記事」を開くと「記事上下のカスタマイズ」欄の記事上、記事下のどちらかにペーストしてね

f:id:mvemjsun:20180222175318j:plain

 

 忘れないでね

先ほどのフォークみたいなマーク()のとなりのスマホマークを選択し、「記事」をクリック

f:id:mvemjsun:20180222175340j:plain

 

 

 

 「記事上下のカスタマイズ欄」の「PCと同じHTMLを表示する」にチェックしてね。

これをしないと、スマホで見たときに記事の上または下に先ほどのコードがそのまま表示されるだけで、見出しに反映されないよ。

f:id:mvemjsun:20180222175403j:plain