stinger5のサイドバー見出し（タイトル）の背景をグラデーションにしてアイコンフォントも挿入してオシャレにカスタマイズした。
私のブログの色はブルー系（ロイヤルブルー）を基調としています。
なのでサイドバー見出しの背景色もブルー系でグラデーションしてみました。
stinger5サイドバー見出しの背景をグラデーション
- ここで紹介するstinger5のカスタマイズは、私の備忘録です。
- バックアップは忘れずに！！！
以下記事はワードプレス(WP)や、テーマのstinger5をカスタマイズしたやり方等を忘れないために書き留めた備忘録です これらを参考にカスタマイズする時は、自己責任でお願いします。 ソースコードを変更する場合は、ＦＴＰソフトを使ってサーバーにアップ。または各サーバーのオプション（ファイルマネージャー）等（例はさくらサーバーです）でカスタマイズを行ってください。
stinger5のサイドバー見出し（タイトル）の背景をグラデーションにして、アイコンフォントも挿入してオシャレにするためのカスタマイズした。
スタイルシートに以下コードを追記する。（私の場合子テーマに追記した）
[css]
/*—————————–
サイドバー内見出しのカスタマイズ
——————————*/
/* サイドバーの見出し */
aside h4 {
font-size: 17px;
font-weight: bold;
background: #7db9e8; /* Old browsers *//* ↓背景のグラデエション */
background: -moz-linear-gradient(top, #7db9e8 0%, #2989d8 50%, #207cca 51%, #1e5799 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#7db9e8′, endColorstr=’#1e5799′,GradientType=0 ); /* IE6-9 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#7db9e8′, endColorstr=’#1e5799′,GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); /* W3C *//* ↑背景のグラデエション */
margin: 20px 0 20px 0;
padding: 12px 10px;
color:#FFF;
-webkit-border-radius:5px;/* ↓角丸とボックスシャドウ */
-moz-border-radius:5px;
border-radius:5px;
text-shadow:1px 1px 2px #333;
-webkit-box-shadow:inset 0 0 50px rgba(0,0,0, 0.1);
-moz-box-shadow: inset 0 0 0 50px rgba(0,0,0,0.1);
-o-box-shadow: inset 0 0 0 50px rgba(0,0,0,0.1);
-ms-box-shadow: inset 0 0 0 50px rgba(0,0,0,0.1);
box-shadow: inset 0px 0px 50px 0.1 #000000;/* ↑角丸とボックスシャドウ */
font-family: “Lucida Grande”, “segoe UI”, “ヒラギノ丸ゴ ProN W4”, “Hiragino Maru Gothic ProN”, “メイリオ”, Meiryo, Verdana, Arial, sans-serif;
}
aside h4:before {/* ↓アイコンフォントの設置 */
content: “\f0a4”;
font-family: FontAwesome;
font-size: 20px;
color: #E0FFFF;
position:relative;
top:2px;
margin-right:15px;
}/* ↑アイコンフォントの設置 */
[/css]
コードの簡単な説明
コード内に簡単な説明的なコメントがあります。
見出しタイトル文字のサイズと太字を指定した。 私のブログの色はブルー系（ロイヤルブルー）を基調としています。
なので「/* ↓背景のグラデエション */」内のカラーコードを、自分好みのカラーコードに変更して、おしゃれにカスタマイズしてみてください。
「border-radius:5px;」でボックスの角を丸くします。数値を変更すると丸みの大きさが変わります。
「box-shadow」のところでボックスにシャドウを付けていますが、この場合はボックスの内側に付けています。
まとめ
背景のグラデーションは、「/* ↓背景のグラデエション */」部分のコードだがいちようie６～９用のコードを記述してるが、実際にグラデーションになってるか確認はとれていない。
角丸とボックスシャドウについても同様に、ie６～９バージョンのブラウザで見ている人は、なっていないかも？
まだまだie８、９のブラウザで観ている人は約２０％いるようです。
その人達にはたいへん申し訳ないのですが、グラデーションになっていないかも知れません。
コードの統一規格を作成して、どのブラウザで観ても同じ表現で観れる日を節に願う今日このごろで～す。
アイコンフォントを付けてオシャレにしたかったので、「/* ↓アイコンフォントの設置 */」のコードを記述した。
追記
アイコンフォントに関して以下の記事でも紹介してますので、ご参考までに
stinger5見出しをカスタマイズしてドレスアップ
参考までに私が愛用している「HTMLおよびCSSカラーコード一覧表」も紹介しておきます。
以上でした。
コメント