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

１．タイトルの背景の変更

２．アイコンの変更

３．タイトルフォントの変更

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

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

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

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

新型コロナウイルス北海道の感染場所最新情報!

 

新型コロナ北海道内の感染者数動向の最新情報!

新型コロナの5類移行に伴い、指定した医療機関からの「定点把握」による全国の感染状況を初めて発表。そこで北海道内（特に釧路・札幌）で感染された動向の最新の状況を配信しています。

www.net.y-taka.biz

 

 

１．タイトルの背景を変更する

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

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

[css]
/*サイドの各タイトル見出し*/
.menu_underh2 {
margin-bottom: 20px;
margin-top: 20px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 35px;
background-image: url(images/ca3.png);
background-repeat: no-repeat;
background-position: left center;
}
[/css]

だったと思います。

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

[css]<br />background:#666;/*背景追加*/<br />[/css]

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

[css]
border-radius: 5px;
color: #fff;
[/css]

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

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

上記のコード例だと

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

[css]
/*サイドの各タイトル見出し*/

.menu_underh2 {
margin-bottom: 20px;
margin-top: 20px;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 35px;
background: #666;/*背景追加*/
border-radius: 5px;
color: #fff;
background-image: url(images/ca3.png);
background-repeat: no-repeat;
background-position: left center;

}
[/css]

２．アイコン画像を変更する

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

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

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

変更後

[css]
/*サイドの各タイトル見出し*/

.menu_underh2 {
margin-bottom: 20px;
margin-top: 20px;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 35px;
background: #666;/*背景追加*/
border-radius: 5px;
color: #fff;
background-image: url(ここにアップロードしたURL);
background-repeat: no-repeat;
background-position: left center;

}
[/css]

上記コード内の

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

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

３．タイトルのフォントを変更

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

追加コードは

[css]
font-family: “Lucida Grande”, “segoe UI”,
“ヒラギノ丸ゴ ProN W4”, “Hiragino Maru Gothic Pr
oN”,
“メイリオ”, Meiryo, Verdana, Arial, sans-serif;
[/css]

を下に追記した。

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

[css]
/*サイドの各タイトル見出し*/

.menu_underh2 {
margin-bottom: 20px;
margin-top: 20px;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 35px;
background: #666;/*背景追加*/
border-radius: 5px;
color: #fff;/*文字を白に変更*/
background-image: url(ここにアップロードしたURL);
background-repeat: no-repeat;
background-position: left center;
font-family: “Lucida Grande”, “segoe UI”,
“ヒラギノ丸ゴ ProN W4”, “Hiragino Maru Gothic Pr
oN”,
“メイリオ”, Meiryo, Verdana, Arial, sans-serif;
}
[/css]

とりあえず以上です。

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