枠線で囲む

今回は、枠線で囲む方法について説明します。
枠線は色や太さ、形状などを指定することができますので、自分好みの枠線にアレンジして、エントリー部分やサイドバーなどを囲んでみてください。

エントリー部分を枠線で囲むには

枠線で囲む方法として、まず、エントリー部分を枠線で囲む方法を例にして説明します。

■ CSS（スタイルシート）の編集
スタイルシートの「.content」内に、下記の記述（赤色の部分）を追加します。

＜スタイルシート　（使用テンプレート：デフォルトテンプレート）＞

.content { border: solid 2px #ff0000; }

＜表示例＞

サンプル

初期設定では、枠線で囲まれていませんが、「border」プロパティを追加することで、枠線で囲むことができます。

編集後は保存して再構築すると完了です。

枠線の指定 ： border

枠線を指定するには、border プロパティを使用します。ここでは、枠線の指定方法について、もう少し詳しく説明します。

■ ４辺まとめて【指定する
枠の「形状、太さ、色」を４辺まとめて指定することができます。

＜記述例＞

border: solid 2px #ff0000;

■ 各辺ごとに指定する
枠の 「形状、太さ、色」を各辺ごとに指定することができます。

＜記述例＞

border-top: solid 1px #ff0000; border-bottom: solid 2px #ff0000; border-left: solid 1px blue; border-right: solid 2px blue;

枠の形状の指定

枠の形状は、下記のキーワードを指定することができます。

キーワード	意味
none	なし
hidden	なし
solid	実線
double	二重線
groove	へこんだ感じの立体枠
ridge	とがった感じの立体枠
inset	内容が沈んだ感じになる立体枠
outset	内容が浮き出た感じになる立体枠
dotted	丸い点線
dashed	四角い点線

他の部分を枠で囲むには

枠で囲むについて、エントリー部分を例として説明しましたが、バナー部分やサイドバー部分などを枠で囲む場合は、その該当クラスで、border プロパティを追加します。

MovableTypeで使用されているクラス、セレクタはMovableTyoeのスタイルシート解析を参考にして、枠で囲みたいクラスを編集してください。

以上、枠線で囲む方法について説明しました。

ブログランキングに参加中です。応援お願いします。