興味のある所からお読み下さい
Simplicity のサイドバータイトル
Simplicity のサイドバー「タイトル」のタグ「＜h4＞＜/h4＞」のスタイルは Simplicity の style.css で定義されています。このタグのデザインを変更するだけで、ブログのイメージはガラッと変わります。是非トライしてみてください。
style.css で定義されているサイドバーのCSS
|
1 2 3 4 5 6 7 |
/************************************ ** サイドバー（Sidebar）・ウィジェットなど ************************************/ #sidebar h4{ margin-bottom: 10px; font-size:20px; } |
子テーマのCSSにスタイルを追加
親テーマで定義されているCSSは継承されるので、親テーマで定義されていない以下の定義を子テーマに追加します。子テーマへの追加方法はこちらをご覧ください。
デザインサンプル
CSS3未対応のブラウザ（IE8以下など）では、サンプル３以降の、border-radius、text-shadow、box-shadow、linear-gradientは無視され、角丸は角枠、文字の影なし、枠の影なし、グラデーションなしの表示になります。
CSS3 の設定のみで、
- Chrome 40（最新41）はすべて表示できますが
- Safari 5.1.7（Windows版の最終バージョン、Mac版は最新8.0.2）はlinear-gradientが
- IE9（最新11）はtext-shadow、linear-gradientが表示されません（IE10以降はOK）
装飾ボーダー
外枠と左右のワンポイントのデザインです。
人気・新着記事
|
1 2 3 4 5 6 7 8 9 10 |
/************************************ ** サイドバー（Sidebar）・ウィジェットなど ************************************/ #sidebar h4{ text-align:center; /* タイトルの中央寄せ */ border-top:1px solid #004488; /* 枠線色 */ border-right:5px solid #4b0082; /* ワンポイント色 */ border-left:5px solid #4b0082; border-bottom:1px solid #004488; } |
上下２重ライン
上下２重ラインのシンプルなデザインです。
人気・新着記事
|
1 2 3 4 5 6 7 8 |
/************************************ ** サイドバー（Sidebar）・ウィジェットなど ************************************/ #sidebar h4{ text-align:center; /* タイトルの中央寄せ */ border-top: 3px double #6896e1; /* 枠線色 */ border-bottom: 3px double #6896e1; } |
角丸ボーダー
角丸のシンプルなデザインです。
人気・新着記事
|
1 2 3 4 5 6 7 8 |
/************************************ ** サイドバー（Sidebar）・ウィジェットなど ************************************/ #sidebar h4{ text-align:center; /* タイトルの中央寄せ */ border: 2px solid #b92a2c; /* 枠線色 */ border-radius: 10px; } |
影付きボーダー
影付き外枠のデザインです。
人気・新着記事
|
1 2 3 4 5 6 7 8 |
/************************************ ** サイドバー（Sidebar）・ウィジェットなど ************************************/ #sidebar h4{ text-align:center; /* タイトルの中央寄せ */ border:solid 1px #004488; /* 枠線色 */ box-shadow: 5px 5px 0 #ccc; /* 影付けと影色 */ } |
影付き文字
外枠と影付き文字のデザインです。
人気・新着記事
|
1 2 3 4 5 6 7 8 |
/************************************ ** サイドバー（Sidebar）・ウィジェットなど ************************************/ #sidebar h4{ text-align:center; /* タイトルの中央寄せ */ border:solid 1px #004488; /* 枠線色 */ text-shadow: 3px 2px 3px #ccc; /* 影付けと影色 */ } |
メタリック風プレート
border、box-shadowで、1pxのハイライト/影をつけることでボタンのような特殊効果を、背景色のグラデーションでメタリック感を出しています。
人気・新着記事
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
/************************************ ** サイドバー（Sidebar）・ウィジェットなど ************************************/ #sidebar h4{ text-align:center; /* タイトルの中央寄せ */ color:#666; /* 文字色 */ background:#ccc; /* 背景色 */ border-top:#ccc solid 1px; border-right:#999 solid 1px; border-bottom:#999 solid 1px; border-left:#ccc solid 1px; text-shadow:1px 1px 0 rgba(255,255,255,1); box-shadow:0 0 0 1px rgba(255,255,255,0.5) inset; background: linear-gradient( /* CSS3 */ rgba(220, 220, 220, 1.0), rgba(240, 240, 240, 1.0) 25%, rgba(235, 235, 235, 1.0) 30%, rgba(240, 240, 240, 1.0) 36%, rgba(235, 235, 235, 1.0) 50%, rgba(215, 215, 215, 1.0) 80%, rgba(210, 210, 210, 1.0) ); background: -webkit-linear-gradient( /* chrome,safari用 */ rgba(220, 220, 220, 1.0), rgba(240, 240, 240, 1.0) 25%, rgba(235, 235, 235, 1.0) 30%, rgba(240, 240, 240, 1.0) 36%, rgba(235, 235, 235, 1.0) 50%, rgba(215, 215, 215, 1.0) 80%, rgba(210, 210, 210, 1.0) ); background: -moz-linear-gradient( /* firefox用 */ rgba(220, 220, 220, 1.0), rgba(240, 240, 240, 1.0) 25%, rgba(235, 235, 235, 1.0) 30%, rgba(240, 240, 240, 1.0) 36%, rgba(235, 235, 235, 1.0) 50%, rgba(215, 215, 215, 1.0) 80%, rgba(210, 210, 210, 1.0) ); } |
2015年現在は、Trident系（IE）のブラウザが約40%(徐々に減少中)、Gecko系（Firefox）のブラウザが約20%(横ばい)、Webkit系（Chrome／Safari）のブラウザが約40%(上昇中)、といった割合で普及しています。Operaは2％前後。
このサンプルではSafari用にベンダープレフィックス-webkit-linear-gradientを、Firefox用に-moz-linear-gradientを追加しています。
（参考）グラデーション（linear-gradient）はブラウザによって対応がまちまちでしたが、最近はCSS3に準拠しつつあります。下の記述は、ベンダープレフィックスを付記したスタイル表記です。（ブラウザの（）内は実装バージョン）
- background:linear-gradient(開始色,終了色); /* 標準（CSS3） */
- background:-webkit-linear-gradient(開始色,終了色); /* Chrome(17.0～), Safari(5.1～) */
- background:-moz-linear-gradient(開始色,終了色); /* Firefox(10.0～) */
- background:-o-linear-gradient(開始色,終了色); /* Opera(11.61～) */
Simplicity 関連 おススメ記事
- インストール
- 設定
- カスタマイズ
- 使い方
- 子テーマ
- チューニング
