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

by ブログ工房　「 Simplicity 」記事で、今日一番読まれているページ TOP 5
子テーマを利用してサイトデザインをカスタマイズする方法 WordPress テキストウィジェットでショートコードを使う方法当サイトで行っているWordPress/Simplicityの各種設定 Simplicity2 HTMLエディター文章装飾スタイルのクイックタグ活用法 Simplicity2 クイックタグのカスタマイズ～ボタン色の変更

興味のある所からお読み下さい

1 Simplicity のサイドバータイトル
- 1.1 style.css で定義されているサイドバーのCSS
2 子テーマのCSSにスタイルを追加
3 デザインサンプル
4 Simplicity 関連おススメ記事

Simplicity のサイドバータイトル

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

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

/************************************
** サイドバー（Sidebar）・ウィジェットなど
************************************/
#sidebar h4{
  margin-bottom: 10px;
  font-size:20px;
}

/************************************

** サイドバー（Sidebar）・ウィジェットなど

************************************/

#sidebar h4{

margin-bottom: 10px;

font-size:20px;

}

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

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

子テーマを利用してサイトデザインをカスタマイズする方法

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

wp.kikuchisan.net

2015-04-13 03:57

デザインサンプル

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）

装飾ボーダー

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

人気・新着記事

/************************************
** サイドバー（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;
}

/************************************

** サイドバー（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;

}

上下２重ライン

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

人気・新着記事

/************************************
** サイドバー（Sidebar）・ウィジェットなど
************************************/
#sidebar h4{
  text-align:center; /* タイトルの中央寄せ */
  border-top: 3px double #6896e1; /* 枠線色 */
  border-bottom: 3px double #6896e1;
}

/************************************

** サイドバー（Sidebar）・ウィジェットなど

************************************/

#sidebar h4{

text-align:center; /* タイトルの中央寄せ */

border-top: 3px double #6896e1; /* 枠線色 */

border-bottom: 3px double #6896e1;

}

角丸ボーダー

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

人気・新着記事

/************************************
** サイドバー（Sidebar）・ウィジェットなど
************************************/
#sidebar h4{
  text-align:center; /* タイトルの中央寄せ */
  border: 2px solid #b92a2c; /* 枠線色 */
  border-radius: 10px;
}

/************************************

** サイドバー（Sidebar）・ウィジェットなど

************************************/

#sidebar h4{

text-align:center; /* タイトルの中央寄せ */

border: 2px solid #b92a2c; /* 枠線色 */

border-radius: 10px;

}

影付きボーダー

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

人気・新着記事

/************************************
** サイドバー（Sidebar）・ウィジェットなど
************************************/
#sidebar h4{
  text-align:center; /* タイトルの中央寄せ */
  border:solid 1px #004488; /* 枠線色 */
  box-shadow: 5px 5px 0 #ccc; /* 影付けと影色 */
}

/************************************

** サイドバー（Sidebar）・ウィジェットなど

************************************/

#sidebar h4{

text-align:center; /* タイトルの中央寄せ */

border:solid 1px #004488; /* 枠線色 */

box-shadow: 5px 5px 0 #ccc; /* 影付けと影色 */

}

影付き文字

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

人気・新着記事

/************************************
** サイドバー（Sidebar）・ウィジェットなど
************************************/
#sidebar h4{
  text-align:center; /* タイトルの中央寄せ */
  border:solid 1px #004488; /* 枠線色 */
  text-shadow: 3px 2px 3px #ccc; /* 影付けと影色 */
}

/************************************

** サイドバー（Sidebar）・ウィジェットなど

************************************/

#sidebar h4{

text-align:center; /* タイトルの中央寄せ */

border:solid 1px #004488; /* 枠線色 */

text-shadow: 3px 2px 3px #ccc; /* 影付けと影色 */

}

メタリック風プレート

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

人気・新着記事

/************************************
** サイドバー（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)
  );
}

/************************************

** サイドバー（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～) */

本日　昨日	Since 2015.2.15
© 2015- ブログ工房 All rights reserved.

Simplicity のサイドバータイトル

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

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

デザインサンプル

装飾ボーダー

上下２重ライン

角丸ボーダー

影付きボーダー

影付き文字

メタリック風プレート

Simplicity 関連 おススメ記事

メタ情報

Simplicity 関連おススメ記事