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

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

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

文章にメリハリがでるだけじゃなく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」をクリックし、その中にある見出しを選んでクリックするだけで

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

いかがですか?

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

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

関連記事

  1. 絶対に忘れてはいけない!記事を書いたら【fetch as google…

  2. 【フォトスケープ】という画像編集は神ソフトだという件

  3. 色の組み合わせサイトで、誰でもハイセンスになっちゃう件

  4. アドセンスのクリック率が低い時の改善点はここだ!!

  5. リンク先を新しいタブで開く設定方法

  6. 自分のブログを採点してみよう

  7. アナリティクスの直帰率と離脱率の違いは?

  8. ワードプレス5.0に更新したら投稿画面が激変した時の解決方法!

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。