「ブログ記事に見出しを入れてみたいけれどやり方が分からなくて。」

 

という声をお客様から頂いたので

 

今日は見出しのカスタマイズについて書いていきます。

 

 

まず、記事内における「見出し」というのは例えばこういうの↓

 

 

見出し

 

 

見出し

 

 

 

長い記事や告知記事などでよく見かけますよね。

情報が整理されて見えるので、読みやすくなるのが利点。

わたしもたまに使っています。

 

 

【参考】

リンク→pk ターゲットの好む色、こんなのもあります

 

 

見出しのカスタマイズの方法は色々あるのですが
今日はその中のひとつをお伝えしますね。

 

 

例えばこの見出し、

 

見出し

 

<div style="border-left:8px solid #600c63; border-bottom:1px solid #600c63; padding:0 0 4px 8px; font-weight:bold;">見出し</div>

 

 

というhtmlソースで出来ています。

 

 

この見出しを使いたい場合には、

 

<div>~</div>までの部分をコピーして

ブログ管理→記事の編集・削除→記事の編集画面を開いて
見出しを入れたい箇所にペーストします。

 

 

このとき、「通常表示」ではなく「HTML表示」を選択してペーストしてください。

 

 

 

あとは「見出し」のテキストを編集するだけ。

 

 

色を変えたいときは、

2か所ある「#600c63」のところを変更すると色が変わります。

 

 

好きな色のコードをコピペして、
自分のブログに合うようにカスタマイズしてください。

 

 

▼カラーコード表

http://www5.plala.or.jp/vaio0630/hp/c_code.htm

 

 

参考までに、他の色バージョンも少し載せておきます。

 

見出し

 

<div style="border-left:8px solid #FF007D; border-bottom:1px solid #FF007D; padding:0 0 4px 8px; font-weight:bold;">見出し</div>

 

 

 

見出し

 

<div style="border-left:8px solid #FF7FBE; border-bottom:1px solid #FF7FBE; padding:0 0 4px 8px; font-weight:bold;">見出し</div>

 

 

 

見出し

 

<div style="border-left:8px solid #005379; border-bottom:1px solid #005379; padding:0 0 4px 8px; font-weight:bold;">見出し</div>

 

 

 

見出し

 

<div style="border-left:8px solid #666666; border-bottom:1px solid #666666; padding:0 0 4px 8px; font-weight:bold;">見出し</div>

 

 

見出しを入れることで、

見やすさ、読みやすさが随分変わるので

ぜひ使ってみてくださいね。

 

 

【こちらの記事もどうぞ】

アメブロで見出しをつけるときにはジャンプ率も考えよう

 

 

 

 無料メルマガ 
 
 note 
 

矢印メインブログはこちら

http://saitoumasami.com/


矢印イメージコンサルタントブログも運営中

http://i-design-web.com/