どうも、まさひろです。

今日も元気に情報を配信していきます!

 

ブログに訪問して下さった方にストレスを与えずに

記事を読み進めていってもらう方法の一つに記事の合間に見出しをつけるというのがあります。

 

見出しを付けることで、

  • 話題を変えるときなどにわかりやすい
  • 読者の方が読み進めるうえで飽きたり疲れたりしずらい
  • 要点ごとに分けられるので内容がわかりやすくなる

といった効果があるので、できれば見出しを付けることをおすすめします。

 

WordPressのテンプレートには大抵オリジナルの見出しがはいっています。

このブログのテンプレートにも初期設定ではこんな感じの見出しがはいっています。

 

 

 

もちろんこういったのを使ってもいいのですが、

どうせならもっとオリジナリティのあるものを使って

ほかのサイトとの差別化をはかるのも一つの手です。

 

そこでひとつ簡単に使える見出しを紹介します。

 

サンプル

 

使い方は簡単で、以下のソースをテキストエディタに貼り付けて

「サンプル」のところに文字を入れるだけです。

 

<div style=”padding: 10px 10px; border-color: #2561ed; border-width: 0 0 1px 8px; border-style: solid; background: #FFFFFF;”><span style=”font-size: 14pt;”><b>サンプル</b></span></div>

 

また、文字の大きさや、線の色や太さなども変更が可能ですので変更方法を説明します。

 

padding: 10px 10px

最初の10pXで縦線の長さを変更し、次の10pXで縦線と文字の間隔を変更します。

border-color: #2561ed 

ここのカラーコードを変更すると線の色が変更できますので

あなたの好きな色に変更してください。

border-width: 0 0 1px 8px 

001pxのところで横ライン、8pxのところで縦ラインの太さを変更します。

background: #FFFFFF

ここで背景色の設定をします。

font-size: 14pt

文字のサイズを変更するときはここの数値を変更します。

 

カラーコードに関してはこちらのサイトに載っていますので

参考にしてみてください。

 

http://www.colordic.org/

 

いろいろ試してみてあなたの好きな見出しを作ってみてください。

 

最後までお読みいただきありがとうございました。

 


アフィリエイトランキング

にほんブログ村 小遣いブログ ブログアフィリエイトへ
にほんブログ村

 ランキングに参加してます

応援クリック頂けると励みになります