stinger5サイドバー見出しの背景をグラデーションにしてカスタマイズ

stinger 5グラデーション, サイドバー, 背景, 見出しstinger 5, サイドバー, 背景, 見出し

stinger5

 

stinger5のサイドバー見出し(タイトル)の背景をグラデーションにしてアイコンフォントも挿入してオシャレにカスタマイズした。

私のブログの色はブルー系(ロイヤルブルー)を基調としています。

なのでサイドバー見出しの背景色もブルー系でグラデーションしてみました。

 

stinger5サイドバー見出しの背景をグラデーション

 

  • ここで紹介するstinger5のカスタマイズは、私の備忘録です。
  • バックアップは忘れずに!!!

以下記事はワードプレス(WP)や、テーマのstinger5をカスタマイズしたやり方等を忘れないために書き留めた備忘録です これらを参考にカスタマイズする時は、自己責任でお願いします。 ソースコードを変更する場合は、FTPソフトを使ってサーバーにアップ。または各サーバーのオプション(ファイルマネージャー)等(例はさくらサーバーです)でカスタマイズを行ってください。

 

stinger5のサイドバー見出し(タイトル)の背景をグラデーションにして、アイコンフォントも挿入してオシャレにするためのカスタマイズした。

 

スタイルシートに以下コードを追記する。(私の場合子テーマに追記した)

 

 

 

コードの簡単な説明

 

コード内に簡単な説明的なコメントがあります。

見出しタイトル文字のサイズと太字を指定した。 私のブログの色はブルー系(ロイヤルブルー)を基調としています。

 

なので「/* ↓背景のグラデエション */」内のカラーコードを、自分好みのカラーコードに変更して、おしゃれにカスタマイズしてみてください。

 

「border-radius:5px;」でボックスの角を丸くします。数値を変更すると丸みの大きさが変わります。

 

「box-shadow」のところでボックスにシャドウを付けていますが、この場合はボックスの内側に付けています。

 

まとめ

 

背景のグラデーションは、「/* ↓背景のグラデエション */」部分のコードだがいちようie6~9用のコードを記述してるが、実際にグラデーションになってるか確認はとれていない。

 

角丸とボックスシャドウについても同様に、ie6~9バージョンのブラウザで見ている人は、なっていないかも?

 

まだまだie8、9のブラウザで観ている人は約20%いるようです。

 

その人達にはたいへん申し訳ないのですが、グラデーションになっていないかも知れません。

 

コードの統一規格を作成して、どのブラウザで観ても同じ表現で観れる日を節に願う今日このごろで~す。

 

アイコンフォントを付けてオシャレにしたかったので、「/* ↓アイコンフォントの設置 */」のコードを記述した。

 

追記

 

アイコンフォントに関して以下の記事でも紹介してますので、ご参考までに

 

stinger5見出しをカスタマイズしてドレスアップ

 

参考までに私が愛用している「HTMLおよびCSSカラーコード一覧表」も紹介しておきます。

 

HTMLおよびCSSカラーコード一覧表

 

 

以上でした。