メニュー

2014年11月22日土曜日

メッセージボードのカスタマイズ例1

・説明に利用しているテンプレートは、『CSS編集用デザイン』の『3カラム・右ワイドメニュー』です。 ・説明に使われている画像はFirefoxでのスクリーンショットです。他のブラウザでは表示に違いが生じる場合があります。 ・CSSの初期化はできますが、例えば編集した1つ前の状態に戻すことはできません。 したがってCSSを編集する際には、編集前にメモ帳等に全文を貼り付けて保存する等、バックアップをとることをお勧めします。


メッセージボードを実線で囲ってみます。

/* (3-5) メッセージボード
--------------------------------------------*/


.skinMessageBoard{
/* 注 ベースのcssに margin-bottom の記述有り */
border: 1px solid #979797;
background:#ffffff;/* ←メッセージボードに背景を敷きたいとき */
}

↓のようになります。
囲み枠の設置


メッセージボードを実線で囲い、角を丸くしてみます(CSS3を使用)。

/* (3-5) メッセージボード
--------------------------------------------*/


.skinMessageBoard{
/* 注 ベースのcssに margin-bottom の記述有り */
border: 1px solid #979797;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background:#ffffff;/* ←メッセージボードに背景を敷きたいとき */
}

↓のようになります。
囲み枠の設置


角を丸くし、全体に影を付けてみます。(CSS3を使用)。

/* (3-5) メッセージボード
--------------------------------------------*/


.skinMessageBoard{
/* 注 ベースのcssに margin-bottom の記述有り */
border: 1px solid #979797;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 0 5px #979797;
-moz-box-shadow: 0 0 5px #979797;
box-shadow: 0 0 5px #979797;
background:#ffffff;/* ←メッセージボードに背景を敷きたいとき */
}

↓のようになります。
囲み枠の設置


角を丸くし、右下に影を付けてみます。(CSS3を使用)。

/* (3-5) メッセージボード
--------------------------------------------*/


.skinMessageBoard{
/* 注 ベースのcssに margin-bottom の記述有り */
border: 1px solid #979797;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 3px 3px 3px #979797;
-moz-box-shadow: 3px 3px 3px #979797;
box-shadow: 3px 3px 3px #979797;
background:#ffffff;/* ←メッセージボードに背景を敷きたいとき */
}

↓のようになります。
囲み枠の設置


CSS3で追加されたプロパティは、すべてのブラウザで対応できているわけではありません。
Internet Explorer8以前のものではほとんど適用されません。
CSS3ジェネレータを使用すれば、CSS3のソースコードは比較的簡単に作成できます。


2014年11月18日火曜日

フッターナビ用素材2

フッターナビ(『次へ』『前へ』『記事一覧』等のナビボタン)用の素材です。
指定方法はフッターナビのカスタマイズ例3を参照ください。

フッターナビ用素材 フッターナビ用素材 フッターナビ用素材 フッターナビ用素材 フッターナビ用素材 フッターナビ用素材


2014年11月8日土曜日

3カラム・右メニューの幅広・幅狭サイドバーの位置を入れ替え

・説明に利用しているテンプレートは、『CSS編集用デザイン』の『3カラム・右ワイドメニュー』です。 ・説明に使われている画像はFirefoxでのスクリーンショットです。他のブラウザでは表示に違いが生じる場合があります。 ・CSSの初期化はできますが、例えば編集した1つ前の状態に戻すことはできません。 したがってCSSを編集する際には、編集前にメモ帳等に全文を貼り付けて保存する等、バックアップをとることをお勧めします。


↓の画像のように、3カラムレイアウトのサイドバー2つを右寄せしてみます。
3カラム・右メニューの幅広・幅狭サイドバーの位置を入れ替え
使用するレイアウトは『3カラム・左ワイドメニュー』です。

メインエリアを左寄せ、幅広サイドバーを右寄せにします。

/* その他、拡張があれば記述 */

.columnD .skinMainArea {
float: left;
}
.columnD .skinSubA {
float: right;
}

↓のように左からメインエリア、幅広サイドバー、幅狭サイドバーの順に並ぶようになります。
3カラム・右メニューの幅広・幅狭サイドバーの位置を入れ替え