2005年9月 2日
枠線で囲む
今回は、枠線で囲む方法について説明します。
枠線は色や太さ、形状などを指定することができますので、自分好みの枠線にアレンジして、エントリー部分やサイドバーなどを囲んでみてください。
枠線で囲む方法として、まず、エントリー部分を枠線で囲む方法を例にして説明します。
■ CSS(スタイルシート)の編集
スタイルシートの「.content」内に、下記の記述(赤色の部分)を追加します。
<スタイルシート (使用テンプレート:デフォルトテンプレート)>
<表示例>
初期設定では、枠線で囲まれていませんが、「border」プロパティを追加することで、枠線で囲むことができます。
編集後は保存して再構築すると完了です。
枠線を指定するには、border プロパティを使用します。ここでは、枠線の指定方法について、もう少し詳しく説明します。
■ 4辺まとめて【指定する
枠の「形状、太さ、色」を4辺まとめて指定することができます。
<記述例>
■ 各辺ごとに指定する
枠の 「形状、太さ、色」を各辺ごとに指定することができます。
<記述例>
枠の形状は、下記のキーワードを指定することができます。
枠で囲むについて、エントリー部分を例として説明しましたが、バナー部分やサイドバー部分などを枠で囲む場合は、その該当クラスで、border プロパティを追加します。
MovableTypeで使用されているクラス、セレクタはMovableTyoeのスタイルシート解析を参考にして、枠で囲みたいクラスを編集してください。
以上、枠線で囲む方法について説明しました。
ブログランキングに参加中です。応援お願いします。
枠線は色や太さ、形状などを指定することができますので、自分好みの枠線にアレンジして、エントリー部分やサイドバーなどを囲んでみてください。
| エントリー部分を枠線で囲むには |
枠線で囲む方法として、まず、エントリー部分を枠線で囲む方法を例にして説明します。
■ CSS(スタイルシート)の編集
スタイルシートの「.content」内に、下記の記述(赤色の部分)を追加します。
<スタイルシート (使用テンプレート:デフォルトテンプレート)>
| .content { border: solid 2px #ff0000; } |
<表示例>
| サンプル |
初期設定では、枠線で囲まれていませんが、「border」プロパティを追加することで、枠線で囲むことができます。
編集後は保存して再構築すると完了です。
| 枠線の指定 : border |
枠線を指定するには、border プロパティを使用します。ここでは、枠線の指定方法について、もう少し詳しく説明します。
■ 4辺まとめて【指定する
枠の「形状、太さ、色」を4辺まとめて指定することができます。
<記述例>
| 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のスタイルシート解析を参考にして、枠で囲みたいクラスを編集してください。
以上、枠線で囲む方法について説明しました。
ブログランキングに参加中です。応援お願いします。
パーマリンク | 投稿者 りっち | 2005年9月 2日 17:05
|
|
はてなブックマークに追加
|
Yahooブックマークに登録
関連記事
トラックバック
このエントリーのトラックバックURL:
コメント
コメントしてください
