綺麗な見出しタグをつける方法

中にいれる区切りのようなものです。

見出しを入れる事によって、

文章にメリハリがでるだけじゃなくSEO対策にも良いので

是非活用してくださいね。

見出しを入れる方法と流れ

①まず好きなデザインを選びます。

②「CSSコード」と言われるものを追加していきます

③文章中に反映するように「タグコード」をいれていきます。

↑のような流れで作成していきますが、

わかりやすく記載していきますので頑張ってやっていきましょう!

デザインのカラーは後で好きなものに変更できますので

とりあえずフォルムだを選びましょう。

好きなデザインを選びましょう

① 文字とラインのカラー統一シンプルタイプ

② 左端ライン+背景色塗りつぶしタイプ

③ 左上ドッグイヤー+ステッチタイプ

④ 左アクセントタイプ

⑤ 下ラインシンプルタイプ

⑥ 吹き出しタイプ

 

気に入った見出しのコードをコピーしましょう

先ほどのデザインでお気に入りが見つかったら、

デザインと同じ番号の下のコードをコピーします。

背景色を変えたい場合、

background:あとの#から始まる英数字を変更すると

好きな色にできます。

カラーコードはおススメのこちらのサイトを利用してください。

solidは線の色になります。

 

①h3 {
color: #ed6d35;/*文字色*/
border: solid 3px #ed6d35;/*線色*/
padding: 0.5em;/*文字周りの余白*/
border-radius: 0.5em;/*角丸*/

 

②h3 {
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #fff;/*文字色*/
background: #0073a8;/*背景色*/
border-left: solid 5px #fcc800;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}

 

③h3{
position: relative;
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 2px white;
padding: 0.2em 0.5em;
color: #454545;
}

h3:after{
position: absolute;
content: ”;
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #a8d4ff;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

 


h3 {
position: relative;
padding: .75em 1em .75em 1.5em;
border: 1px solid #ccc;
}
h3::after {
position: absolute;
top: .5em;
left: .5em;
content: ”;
width: 6px;
height: -webkit-calc(100% – 1em);
height: calc(100% – 1em);
background-color: #e4007f;
border-radius: 4px;
}

 

⑤h3{
background: linear-gradient(transparent 70%, #ffea00 70%);
}

 

⑥h3 {
position: relative;
color: #111;
background: #fff;
font-size: 20px;
line-height: 1;
border :2px solid #00a3af;
margin: 30px -10px 10px -10px;
padding: 15px 5px 12px 10px;
border-radius: 3px;
}
h3:after,h3:before {
content: “”;
position: absolute;
top: 100%;
height: 0;
width: 0;
}
h3:after {
left: 33px;
border: 11px solid transparent;
border-top: 11px solid #fff;
}
h3:before {
left: 30px;
border: 14px solid transparent;
border-top: 14px solid #00a3af;
}

コピーしたら、【ダッシュボード】から【サイトカスタマイズ】をクリック。

左下の【追加CSS】に貼り付けます。

追加CSSの中に、他のコードがあれば最後の文字から

2行ほど改行してから貼り付けてくださいね。

そして最後に必ず上にある『公開ボタン』をクリックしてください。

「変な所消しちゃったりしたー!!」って方は

パニックにならずに公開ボタンをクリックせずに「戻る」をすれば

変更前に戻りますよ。

文章で使える設定にしておこう

今の段階ではまだ見出しを使うことはできません。

普通に文章中に見出しを使うときは、

編集モードを「テキスト」にして見出しにしたいキーワードの両端に

タグを打ちます。

例)<h3> 美味しいランチのご紹介 </h3>

でも毎回このように打つのはメンドクサイので、

事前に入れてある【AddQuicktag】に定型文としていれておきましょう!

左の【インストール済みのプラグイン】からAddQuick Tagを見つけて設定をクリックしましょう。

そうすると、下の方に新しく「ボタン名」などが空欄になっているのがあるので

下のように4カ所記入していきます。

最後に変更を保存を忘れずに!

 

こうやっておくことで、

見出しにしたい文字をタグコードを打たずに、

ワンクリックで見出しにすることができますね!

やり方は簡単!

まず見出しにした文字を打ち込んで、そこをカーソルで選択します。

右上にある「Quicktag」をクリックし、その中にある見出しを選んでクリックするだけで

さっきの文字が見出しになっています。

いかがですか?

自分のブログをよりスタイリッシュにもできる見出し、

使わない手はありませんね!