PCソフトウェア＞記事の一部を四角で囲む

ブログで文章を書く時、段落の一部を四角で囲みたい時があるが、その時の方法について。

①スタイルシートの記述を、Bloggerのスタイルシートに追加する画面を出す

赤矢印の部分をクリック

画面左側のテンプレート→カスタマイズ→上級者向け→CSSを追加をクリック

②スタイルシートを記述

.sikaku{
  border-style:solid;
  border-width:1px;
  padding:10px 10px 10px 10px
}

特にsikakuでなくとも、他とダブらなければ、名称は何でも良い

●ｂｏｄｅｒ-ｓｔｙｌｅ→線種(赤色、10pxの例)

one	ボーダー非表示・太さ0・他の指定を優先(初期値)
hidden	ボーダー非表示・太さ0・当指定を優先
solid	1本線
		．．．．．．．．．．．
double	2本線
		．．．．．．．．．．．
groove	立体的に窪んだ線
		．．．．．．．．．．．
ridge	立体的に隆起した線
		．．．．．．．．．．．
inset	上と左のボーダーが暗く、下と右のボーダーが明るい線
		．．．．．．．．．．．
outset	上と左のボーダーが明るく、下と右のボーダーが暗い線
		．．．．．．．．．．．
dashed	破線
		．．．．．．．．．．．
dotted	点線
		．．．．．．．．．．．

●ｂｏｒｄｅｒ-ｗｉｄｔｈ→線の太さ
数値で指定(px、em、ex)
キーワードで指定(thin=細い、medium=普通、thick=太い)

●ｐａｄｄｉｎｇ→本文と四角の線との間隔
上下左右の順で指定
数値で記述
四角の枠そのものの位置を調整する時は、ｍａｒｇｉｎ：上下左右　を書き加える。ただ、これは別のclass名で指定した方が、使いやすいと思う。(class="aaa bbb ccc"などと半角スペースで区切って並べて書いてゆく)

●その他
ｂｏｄｅｒ-ｃｏｌｏｒ：＃XXXXXX;→色指定で、＃カラーコードか、色名称(red、greenなど)で指定
その他は、ｂｏｄｅｒ－何とかで指定してゆく

③投稿入力画面で、文章を入力

例えば
123456789
とする

④作成→HTMLモードにして、該当する文章を＜ｄｉｖ＞～＜／ｄｉｖ＞で囲む

例えば
＜ｄｉｖ＞123456789＜/ｄｉｖ＞
とする

⑤divタグのclass指定と、styleの指定で幅を記述

＜ｄｉｖ＞を＜ｄｉｖ　ｃｌａｓｓ＝’ｓｉｋａｋｕ’　ｓｔｙｌｅ＝’ｗｉｄｔｈ：200ｐｘ；’＞とする
＜ｄｉｖ＞タグに何も書かないと(class指定など)、エディッタに消されてしまう
使い勝手を考えて、ｗｉｄｔｈ指定は別にした
ｗｉｄｔｈの値は、ブログの画面の広さや記事の状況に応じ、調整する
ｃｌａｓｓに、複数のスタイルを指定する時は、半角スペースで区切って続けて書いてゆく

⑥'プレビュー'で確認

画面右上のボタンの中の、'プレビュー'をクリックし、正しく機能しているか確認する。

一旦、'公開'で保存した後、スタイルシートの記述部分に行き、数値を調整する。
プレビューが下に表示されるので、やりやすい。

++