小見出しにマークを付けるには | ちょっとした「Webお役立ち情報」とかを主に書いてます。

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。


テーマ:
ブログネタの無い

ワンタンです(涙目)。

こんばんは。


渡辺麻友

アメブロカスタマイズのパソコン先生が、
こちらで紹介されてました。

長文を読んでもらうための心配りとは|パソコンが好きになるブログ~表技・裏技・便利技伝授!

で、ちょっとだけ自分のアレンジを入れて、

こんな小見出しを作ってみました。


縦緑、横グレー、マーク、下線幅400px


上のような[小見出し]をつけると、
長い記事が読み易くなると思います。

このような[小見出し]を、御自身の、お好みで
自在に作れるように細部がどうなっているのか、
御案内してみたいと思います。


<div style="background: url(https://lh3.googleusercontent.com/-V084tNVTi80/U-WnFxnc2pI/AAAAAAAAcfw/aGK1g-UBEf8/w506-h337/pen30x20.png) no-repeat left center;border-left:10px solid #00CC00; border-bottom:1px solid #bbbbbb; padding-left:35px; font-weight:bold;width:400px;">縦緑、横グレー、マーク、下線幅400px</div>


水色の箇所は、小見出しの左側に
ちょこんと付いてるマークの画像URL
です。(※上のは、自分が作ったものです。
もし良かったら、お使い下さい。著作権など主張
しませんので^^;)

このマークについても、こちらで詳しく
紹介されてます。

長文を読んでもらうための心配りとは|パソコンが好きになるブログ~表技・裏技・便利技伝授!

赤字の箇所が横線(下線)の色です。
(※上の例では、グレー。)

ピンクの数字が下線の太さです。
(※数字が多くなると太くなります。)

ライムグリーンの箇所が、左側の四角形の箇所の
色です。

青色の数字が下線の長さです。多くなると
長くなります。
(※width:400px;を削除すると、記事幅
いっぱいまで下線が引かれます。)

こんな[小見出し]を何種類か、御自身の
お好みのものを作っておくと、長い記事を
書く時に、良いのではないでしょうか。

なにかの参考になれば、うれしいのですが^^;


☆ブィブィ(゚ー゚;


走り続ければ、いつかは・・

ワンタンさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ