【見出し】の装飾 ~備忘録~ 初心者でも使えるおまけあり

2018年8月27日

見出しの装飾―基本―

ブログを書く上で大事な【見出し】。

見出しを付けることで、目立つようになるので文章を区切ったり、レイアウトが綺麗に見えるようになります。
現在は、見出しにキーワードを入れるだけでSEO対策にもなります。

検索エンジンに認識されるものなので、見出しは絶対につけた方がいいです! 

先に見出しだけ考えて、あとから文章の詳細を考える!てのも記事の内容がブレなくていいかもしれません。

通常見出しはh2で囲みます!
PCの内部にこれは重要ですよ!と教えることができます。
通常文章で使うのはh2~
※ブログタイトルはh1などで使用するため。(一番大事な時に使うもの)

h2→h3というように、包括するもの→包括されるものの順番で使うという意味になります。
h2→h5にはならないです!デザインや文字の大きさが丁度いいから使う!というもの×ですよ!その場合はcssでh2~文字の大きさなど調整しましょう!

見出し備忘録として見出しについてまとめました。

最後にアメブロなどにそのまま使えるコードも載せてるよ!

html

<h1>見出しです。点線</h1>
<h2>見出しです。直線</h2>
<h3>見出しです。ドット線</h3>

見出しに下線を引く


/*下線を引く-CSS*/

h1{
color: blue;
border-bottom: dashed 2px #6594e0;
/*線の種類-太さ-色*/
}
h2{
color: red;
border-bottom: solid 2px pink;
}
h3{
color: green;
border-bottom: dotted 2px mediumspringgreen;
}

見出しの左に線を引く

/*見出しの左側に線を引く-CSS*/

h1{
color: blue;
border-left: dashed 4px #6594e0;
/*線の種類-太さ-色*/
}
h2{
color: red;
border-left: solid 4px pink;
}
h3{
color: green;
border-left: dotted 4px mediumspringgreen;
}

見出しを囲う

/*見出しを囲う―CSS*/

h1{
border-bottom: solid3px#df7487;
border-top: solid3px#df7487;
}
h2{
border: 4pxdottedslateblue;
border-radius: 10px;
display: inline-block;
padding: 5px 3px;
}
h3{
border: 4pxsolidslateblue;
border-radius: 10px10px00;
background-color: skyblue;
display: inline-block;
padding: 10px5px;
}

おしゃれな見出し

/*おしゃれな見出し-CSS*/

h1{
position: relative;
padding: 0.5em;
background-color: #f39800;
display: inline-block;
}
h1:after{
position: absolute;
content: ”;
top: 100%;
left: 30px;
border: 15pxsolidtransparent;
border-top: 15pxsolid#f39800;
width: 0;
height: 0;
}
h2{
position: relative;
background-color: #ffc0cb;
box-shadow: 0px0px0px5px#ffc0cb;
border: dashed2px#fff;
padding: 0.2em0.5em;
display: inline-block;
}
h2:after{
position: absolute;
content: ”;
left: -7px;
top: -7px;
border-width: 0015px15px;
border-style: solid;
border-color: #fff#fff#df7487;
box-shadow: 1px1px1pxrgb(0, 0, 0, 0.15);
}
h3{
position: relative;
padding: 0.5em;
background-color: #acd598;
color: #fff;
display: inline-block;
}
h3::before{
position: absolute;
content: ”;
top: 100%;
left: 0;
border: none;
border-bottom: solid15pxtransparent;
border-right: solid20pxrgb(149, 158, 155);
}

初心者でも使える見出し―アメブロでコピペするだけ!―

アメブロでコピペするだけ!の見出しを載せちゃいます!

コピペ方法を説明します。
ブログを書く画面からhtml表示を選択。

下記のコードをコピペするだけです!!

<h2 style=”border-left: 10px solid#e4007f; background-color: #f4f4f4; border-bottom: solid 3px #d7d7d7; padding: 10px 5px; display: inline-block;”>見出しです。コピペするだけ</h2>

※『見出しです。コピペするだけ』は該当の文字をいれましょう。

通常表示で確認してみましょう。
これで無料ブログでもオシャレな見出しで他と差をつけられます!

検索

◆プロフィール◆

ちゃいてぃ

チャイラテが好きな広島県在住の30代主婦。
将来在宅ワーカーを目指し中。
20代の頃の婚活経験をエッセイにしたものや、結婚生活、WEB制作の備忘録、在宅ワーカーになるために日々奮闘している様を綴ったブログです。

ぱちょたつ

ちゃいてぃが犬が欲しすぎて妄想上に生み出した犬の妖精。
ぷりてぃフェイスとは裏腹に毒舌とツッコミが得意。

Twitterはこちら
twitter-bana