Simplicityのサイドバーのタイトルデザインを装飾する

カテゴリー別今日の人気ランキング
スポンサーリンク

Simplicity のサイドバータイトル

Simplicity のサイドバー「タイトル」のタグ「<h4></h4>」のスタイルは Simplicity の style.css で定義されています。このタグのデザインを変更するだけで、ブログのイメージはガラッと変わります。是非トライしてみてください。

style.css で定義されているサイドバーのCSS

子テーマのCSSにスタイルを追加

親テーマで定義されているCSSは継承されるので、親テーマで定義されていない以下の定義を子テーマに追加します。子テーマへの追加方法はこちらをご覧ください。

子テーマによるテーマの編集方法 WoedPressのテーマは、 配置するコンテンツを設定したり、テーマの機能を設定するためのphpフ...

デザインサンプル

CSS3未対応のブラウザ(IE8以下など)では、サンプル3以降の、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)

装飾ボーダー

外枠と左右のワンポイントのデザインです。

人気・新着記事

上下2重ライン

上下2重ラインのシンプルなデザインです。

人気・新着記事

角丸ボーダー

角丸のシンプルなデザインです。

人気・新着記事

影付きボーダー

影付き外枠のデザインです。

人気・新着記事

影付き文字

外枠と影付き文字のデザインです。

人気・新着記事

メタリック風プレート

border、box-shadowで、1pxのハイライト/影をつけることでボタンのような特殊効果を、背景色のグラデーションでメタリック感を出しています。

人気・新着記事

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 関連 おススメ記事

スポンサーリンク
wp_レクタングル (大)
wp_レクタングル (大)
☆最後までお読みいただきましてありがとうございます。
☆この記事がお役に立ちましたらシェア・フォローしていただけると嬉しいです!

シェアする

フォローする