stinger3 備忘録 10

stinger3 備忘録stinger 3, カスタマイズ, サイドバー, ワードプレスstinger3 備忘録, カスタマイズ, サイドバー, ワードプレス

stinger3

サイドバーをカスタマイズ

 

1.タイトルの背景の変更

2.アイコンの変更

3.タイトルフォントの変更

 

以下記事はワードプレス(WP)や、テーマのstinger3をカスタマイズ

したやり方等を忘れないために書き留めた備忘録です

記事内にソースコードを表記してる箇所は、ダブルクリックすると

ソースコードが全選択されるので、コピーして使えます。

 

1.タイトルの背景を変更する

 

サイドバーのタイトルを強調させてわかり易くする。

変更する親のスタイルシートは下記コードです。

 

 

だったと思います。

 

上記「/*サイドの各タイトル見出し*/」コード内に以下のコードを追加する。

 

 

背景色が濃い色を使用するため、文字の色を「白」に変更した

 

 

追記する場所ですが、画像を表示させるコードよりも上に追記する。

そうでないと画像の上に被ってしまいます。

上記のコード例だと

 

「 background-image: url(images/ca3.png);」のより上になりま
す。

 

 

 

2.アイコン画像を変更する

 

アイコン画像をオリジナルの画像に変更した。

 

上記「/*サイドの各タイトル見出し*/」コード内の
「 background-image: url(images/ca3.png);」があるので、

「(images/ca3.png)」のカッコ内にアップロードした画像のURLに
変更する。

 

変更後

 

上記コード内の

url(ここにアップロードしたURL)

カッコ内にアップロードしたURLを貼り付ける。

 

 

3.タイトルのフォントを変更

 

これもタイトルの文字スタイルを変更して見やすくしました。

追加コードは

 

 

を下に追記した。

 

上記カスタマイズ後のコードは以下のようになりました。

 

 

 

とりあえず以上です。

再度変更する可能性があります。