ブログ記事欄に小見出しを付ける方法
こんにちワ。ワンタンです。
わてくちめ、文章力、表現力が無い！！！
てか、一応、文章を書くのは書けるんですが、自分で読み返してみて何を言いたいんだか自分自身がよく解らなくなるという・・ヾ(▼ﾍ▼；)
で、その「表現力の無さ」を補う意味でも、小見出しを使って、記事をなるだけ項目毎に分けるようにしてます。
どちらかというと文脈がとっちらかっちゃてる文章でも、一応項目を設けて段落毎に分けた書き方をすれば、多少は閲覧者さんにとって解りやすくなるのではないかと思うわけでして・・
この小見出しのつくり方、以前にも、このブログに書いたんですが、また改めて書いてみたいと思います。
HTMLタグを使って見出しを設置する方法
※HTMLタグコードの使えるウェブサイトであれば、全てに通用すると思います。
こんな感じのものです（↓）。
縦緑、マーク、横線グレー
上の「小見出し」は、Hタグで表すと、このようになります（↓）。
<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;">縦緑、マーク、横線グレー</div>
1.水色の箇所は、小見出しの左側に、ちょこんと付いてるマークの画像ＵＲＬです。（※上のは、自分が作ったものです。もし良かったら、お使い下さい。）（注：このペンのようなマークは、横幅30px、縦20pxのものです。御自身のサイトで採用されてる文字の大きさに合わせて画像のサイズを調整して下さい。ちなみに、このブログの文字のサイズは、15pxです。）
2.赤字の箇所が左端の四角い箇所の色です。（※上の例では、ライムグリーン。）
3.ピンクの数字が下線の太さです。（※数字が多くなると太くなります。）
4.ライムグリーンの箇所が、横線（下線）の色です。（※上の例では、グレー。）
■左側のマーク（画像）を外したサンプルを、いくつか作ってみました。
<div style="border-left:10px solid #000099; border-bottom:2px solid #000099; padding-left:10px; font-weight:bold;">青の小見出し</div>
⇓
青の小見出し
・幅、短め
<div style="border-left:10px solid #000099; border-bottom:2px solid #000099; padding-left:10px; font-weight:bold;width:400px;">青の小見出し</div>
⇓
青の小見出し
______
<div style="border-left:10px solid #ff1493; border-bottom:2px solid #ff1493; padding-left:10px; font-weight:bold;">ピンクの小見出し</div>
⇓
ピンクの小見出し
・幅、短め
<div style="border-left:10px solid #ff1493; border-bottom:2px solid #ff1493; padding-left:10px; font-weight:bold;width:400px;">ピンクの小見出し</div>
⇓
ピンクの小見出し
______
<div style="border-left:10px solid #ff0000; border-bottom:2px solid #ff0000; padding-left:10px; font-weight:bold;">赤の見出し</div>
⇓
赤の見出し
・幅短め
<div style="border-left:10px solid #ff0000; border-bottom:2px solid #ff0000; padding-left:10px; font-weight:bold;width:400px;">赤の見出し</div>
⇓
赤の見出し
※カラーコード、#～～をお好みで変えてみて下さい。（縦と横の２ヶ所あります）
＊参考までに
⇒HTML,CSS カラーコード一覧表 ｜ 背景色や文字色の設定
※width:400px;の数値を変えると横幅を変えられます。（少なくすると、狭くなります。このコードを記入しない場合は、記事幅と同じになります。）
〇思うこと
御自身のお好みの見出しを何種類か作っておいて、パソコンの「メモ帳」等に保存しておけば、長い記事を書くとき等に、便利なのではと思います。
“わかりやすい!” は社会を変える!とか云いますから^^;
御自身のお好みの見出しを何種類か作っておいて、パソコンの「メモ帳」等に保存しておけば、長い記事を書くとき等に、便利なのではと思います。
“わかりやすい!” は社会を変える!とか云いますから^^;
☆ブィブィ ('-^*)/
ｽﾘｽﾘ(〃'ω'人'ω'〃)ｽﾘｽﾘ・・ハッ！！
ね！？