文章をかっこよく囲む

まず管理画面の 『 カスタマイズ / 管理 』 のタブをクリックして、『 デザインの設定 』 ＞ 『 カスタマイズ 』 ＞ で、ＣＳＳ （ スタイルシート ） を呼び出します。次に ＣＳＳ （ スタイルシート ） に以下の記述を追加します。


赤字の部分を、自分のブログに合わせて適宜変更して下さい。青字の shikaku の部分は、別にどんな指定文字でも良いですよ。自分の解り易い文字で設定して下さい。（例えば ： waku とか kakomi とかね ）

ライブドアのリニューアル後のスタイルシートには、初めから blockquote （ 引用部を罫線で囲む時に使用する本来のタグ ） の指定文字が存在しているのですが、わかりやすくスタイルの指示を併せて説明する為に、今回はこの blockquote を使用しない方法を記事に書きました。

blockquote （ 文字の前に " . " ドットが付いてないでしょ？ ） を使用して四角く囲む罫線を表示させる場合は、また別のやり方を憶える必要があります。ここにそれを書くと、頭の中でこんがらがっちゃうかも知れないので、今回はあえて、それの説明を割愛させて頂きます。

border は四角く囲む罫線の種類をあらわしています。1px solid #C0C0C0 は、1px のグレー色 （ #C0C0C0 ） の直線を指定しているのですが、線を太くしたかったら、2px ・・・ 3px ・・・ という具合に数字を変えて下さい。線の種類を点線や破線、二重線に変えたい時は、solid の部分を dotted ・ dashed ・ double という具合に変更すれば OK です。

double の場合は 3px ぐらいにしておかないと、綺麗な二重線にはならないと思います。#C0C0C0 の部分は好きな色に変更して下さい。

padding は囲んだ四角の内側の余白です。左から上右下左の指示を表します。background は、囲んだ四角の背景色です。ＡＱ のところでは、背景色は白で指定しています。（ 背景色をつける必要が無い場合は、必要ありません ） 画像も指定できますが重くなりますし、本文がゴチャゴチャになりますから、あまりお薦めは致しません。

幅を指定したかったら、width: ○○○px; と追加すれば良いです。サイドバーと囲んだ線が引っ付いてしまうような場合は、見苦しいので指定した方が良いかもしれません。その際は overflow: auto; も一緒に追加しておくと安心です。あふれた文字は自動的に改行してくれます。

高さを指定したかったら、height: ○○○px; と追加して下さい。そのさい文章行の高さよりも囲んだ線が低い場合は、スクロールバーが出現します。○○○px の部分を auto にしておくと、書いた文章の改行に合わせて自動的に調節してくれます。必要であるならば、高さの数値指定をして下さい。

さて好みの指定ができたら、ＣＳＳ （ スタイルシート ） を元のところで保存し、Blog の再構築 ＞ ＣＳＳ ＞ 再構築をする ・・・ で完了です。あとは、本文の記事中で四角く囲みたい部分の文章の前に ・・・
<div class="shikaku"> と記述し、その文章の末尾の文字の後ろに </div> と記述すれば OK です。

1回 ＣＳＳ に記述して保存しておけば、本文文章の四角く囲みたい部分に <div class="shikaku"> 〜 </div> を記述するだけで、いつでも呼び込むことができます。たとえば、こんな風に文章を囲むと ・・・

<div class="shikaku">こんな風に表示されるようになるんですよ (^^)</div>





その組み合わせは自由自在です。あとはあなたのセンスの問題です。ブログの目的を考えると、いたずらに派手でゴチャゴチャとした罫線を用いる事は、やめておいた方が無難のような気がします。^^;
頑張って下さい