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

Simplicity のサイドバータイトル

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

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

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

装飾ボーダー

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

人気・新着記事

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

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

• インストール
  1. WordPress テーマ「Simplicity」のインストールとアップデート
• 設定
  1. 当サイトで行っているWordPress/Simplicityの各種設定みんな読んでます
  2. SimplicityにGoogle ウェブマスター ツールとアナリティクスを設定する
  3. Simplicityブログカードの投稿日時を非表示にする方法
• カスタマイズ
  1. Simplicity2 HTMLエディター文章装飾スタイルのクイックタグ活用法
  2. Simplicity2 クイックタグのカスタマイズ～ボタン色の変更
  3. Simplicity のサイドバーのタイトルデザインを装飾するおススメ
  4. WordPressバージョン情報とテーマの名前・バージョンの表示方法
  5. Simplicityの全体レイアウトを変更して低解像度のパソコンでも表示する
• 使い方
  1. 知ってると便利！Simplicity 内蔵の文章修飾用のスタイル
• 子テーマ
  1. Simplicity 子テーマのインストールと運用みんな読んでます
  2. 子テーマを利用してHTMLエディターにタグや定型文のボタンを追加する方法
  3. 子テーマを利用してフッターに最新の新着・更新記事を表示する
  4. 子テーマを利用してサイトデザインをカスタマイズする方法おススメ
• チューニング
  1. WordPressテーマ「Simplicity」の高速化チューニング（.htaccess編）