記事に小見出しをつけて記事にメリハリをつけましょう☆


↑上記のように記事タイトルとは違った記事内につけるタイトルを『小見出し』と言います。

記事の内容を目立たせたい時や、話題が変わるときなど、

文章がダラダラと続くよりはこういったタイトルがある方が

見栄えもいいし、どういった内容の文章が書いてあるのかも一目瞭然ですよね☆

私が行っているやり方は2種類あります。

・記事に直接毎回タグを貼り付ける方法

・CSS(スタイルシート)でタグ指定する方法 ←こっちの方がオススメ☆


今回は簡単な『直接タグを貼る方法』をご紹介しますね☆


記事に直接「小見出しのタグ」を貼り付ける方法


 見本

私が記事に直接タグを貼って使っているものはこのタイプのものだけです。

ブログの色に合わせてこのタグを作成しましたが、

毎回コピペするのが面倒なので今は使っていません(^_^;)

コピペしてすぐ使えるようにタグを色別に用意してみましたので

コピペして使って頂いてOKです(。・ ω<)ゞ(転載はお止め下さいね☆)




 見本1

以下をすべてコピーして貼り付けると上の小見出しになります☆

<div style="padding:3px 3px; border-color:#FF00FF ;border-width:0px 0px 1px 8px; border-style:solid;background:#FFF0F5"><b><span style="color: #FF00FF"> 見本1</span></b></div>




 見本2

以下をすべてコピーして貼り付けると上の小見出しになります☆

<div style="padding:3px 3px; border-color:#00BFFF ;border-width:0px 0px 1px 8px; border-style:solid;background:#F0FFFF"><b><span style="color: #00BFFF"> 見本2</span></b></div>




 見本3

以下をすべてコピーして貼り付けると上の小見出しになります☆

<div style="padding:3px 3px; border-color:#000000 ;border-width:0px 0px 1px 8px; border-style:solid;background:#F5F5F5"><b><span style="color: #000000"> 見本3</span></b></div>




 見本4

文字の大きさを大きくすると小見出しも大きくなります☆

<div style="padding:3px 3px; border-color:#FF8C00 ;border-width:0px 0px 1px 8px; border-style:solid;background:#FFFFFF"><b><span style="font-size:large; color: #000000"> 見本4</span></b></div>




 見本5

すべて枠で囲った小見出しです☆

<div style="padding:3px 3px; border-color:#FFD700 ;border-width:1px 1px 1px 8px; border-style:solid;background:#FFFFE0"><b><span style="color: #000000"> 見本5</span></b></div>




 見本6

二重線で囲った小見出しです☆

<div style="padding:3px 3px; border-color:#FF0000; border-style:double; background:#FFFFFF"><b><span style="color: #FF0000"> 見本6</span></b></div>




こんな感じで色々なパターンを作ってみました。

ご自分のサイトに合うものがあればいいのですけど~

自分好みに変える場合は

background …背景の色

border-color …枠線の色

border-width:1px 1px 1px 8px …枠線の幅 左から順に 上 右 下 左 の線の幅を表す。

                     枠線がいらないところの数値を「0」にすれば線はなくなる。

border-style …枠線の種類 solid(実線)、dotted(点線)、dashed(破線)、double(二重線)など

色の見本はこちら>>色colors table<<を参考にしています。

記事にタグを入れる場合のブログの設定

簡易モードを「OFF」にする

FC2-12.jpg

 ↓ 

下の方にある「記事の設定」の「改行の扱い」を「HTMLタグのみ」にしておく

FC2-102.jpg

ちゃんと表示させるためにもタグを入れる場合は忘れずに設定しておいて下さいね☆




ご自由にお持ち帰りして頂いてかまいませんが

お使いいただく場合、コメント残して頂けると嬉しいです

色々と考えて作ったタグなのでタグの転載、再配布はお止め下さいますようお願い致します。


次回は『小見出しをCSS(スタイルシート)でタグ指定する方法』をご紹介しますね☆


>>小見出しをCSS(スタイルシート)でタグ指定する方法はこちら<<

 カテゴリ
 タグ
None