文章を強調する方法には


*サイズを大きくする。


*色を変える。


*太字にする


など、ありまして。


また、引用文などについては、『』で囲む以外には、イタリックにしたりするのも一般的です。




以上のように、文章に変化をつける方法は、ご存知だと思います。

「ブログを書く」ところの上部にあるもので全部できますよね。


で、今日は「罫線で囲む」こと文章を強調する方法を。

これはちょっと厄介で、「ブログを書く」編集ページの「HTMLタグを表示」画面から、文章を編集しなくてはいけません。



たとえば・・・

 

○○○ここに文章を入れてね!


このように普通の罫線で囲む場合。


下の<div ~></div>を、「HTMLタグを表示」を使って罫線枠を挿入したい場所にコピー&ペーストで入れます。


<div style="BORDER-TOP: 1px solid; BORDER-RIGHT: 1px solid; BORDER-BOTTOM: 1px solid; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; PADDING-LEFT: 5px; BORDER-LEFT: 1px solid; PADDING-RIGHT: 5px">○○○ここに文章を入れてね!</div>


これを、線の色を変えたり、罫線のスタイルを変えたい、ということであれば



○○○ここに文章を入れてね!

<div style="BORDER-TOP: #cc0000 3px double; BORDER-RIGHT: #cc0000 3px double; BORDER-BOTTOM: #cc0000 3px double; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; PADDING-LEFT: 5px; BORDER-LEFT: #cc0000 3px double; PADDING-RIGHT: 5px">○○○ここに文章を入れてね!</div>


とか


○○○ここに文章を入れてね!

<div style="BORDER-TOP: #006600 2px dashed; BORDER-RIGHT: #006600 2px dashed; BORDER-BOTTOM: #006600 2px dashed; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; PADDING-LEFT: 5px; BORDER-LEFT: #006600 2px dashed; PADDING-RIGHT: 5px">○○○ここに文章を入れてね!</div>

とか


○○○ここに文章を入れてね!


<div style="BORDER-TOP: #ff9900 2px dotted; BORDER-RIGHT: #ff9900 2px dotted; BORDER-BOTTOM: #ff9900 2px dotted; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; PADDING-LEFT: 5px; BORDER-LEFT: #ff9900 2px dotted; PADDING-RIGHT: 5px">○○○ここに文章を入れてね!</div>


とかね。


そして、文章を入れる際には、「タグの非表示」画面で、普通に罫線の中身に文章を入れてOKです。もちろん、そのままHTMLタグの中に入れてもOKです。



ちなみに、最後の罫線枠を参考にHTMLタグの説明をしてみます。

<div style="BORDER-TOP(上の枠線を次のように指定する): #ff9900(色指定) 2px(太さ) dotted(線の種類); BORDER-RIGHT(右の枠線の指定): #ff9900 2px dotted; BORDER-BOTTOM(下の枠線の指定): #ff9900 2px dotted; PADDING-BOTTOM(下余白の指定): 5px; PADDING-TOP(上余白の指定): 5px; PADDING-LEFT(左余白の指定): 5px; BORDER-LEFT(左の枠線の指定): #ff9900 2px dotted; PADDING-RIGHT(右余白の指定): 5px">○○○ここを見てね!</div>

「BORDER」でそれぞれの線の、「PADDING」でそれぞれの余白の指定をしているのです。

なので、赤字の箇所は、書き換えが可能ですOK



習うより慣れキラキラ


チャレンジしてみてくださいラブラブ