stinger3のサイドバーを自分好みにカスタマイズしてみたよ！サイドバーの見出し背景色変更&下線追加&見出しフォントの文字色変更！検索ボタン変更も！

公開日： 2014/10/31 : 最終更新日：2015/01/22 stinger3カスタマイズ, WordPress系 Inkscape 無料, stinger3 カスタマイズ, stinger3 カスタマイズサイドバー, stinger3 カスタマイズ検索ボタン, stinger3 カスタマイズ見出し背景色変更, WordPress カスタマイズ, サイドバー見出しフォント変更

どうもです、いろはすです。

当ブログはENJIさんが作成・配布している『Stinger3』というテーマを使用しているのですが、デフォルトのままだと似たようなブログが沢山目に付くので、無性にカスタマイズしたくなってきました！

正直いじりたい箇所だらけなのですが、まずはサイドバーからいじってみる事に！

メニュー見出しの背景色の変更&下線の追加！

メニュー見出しの色とアンダーバーの色で悩む・・

まず色々なブログを参考に、組み合わせパターンを作ってみます！

「アレもイイな～、いやコレも捨てがたいな。。」と悩むのですが、こういう時間が楽しかったりするんですよねｗ

カラーチャートはココのサイトを参考にしました！
⇒colordic.org

「どれがイイかな～」と眺めて気に入った色があれば、そのまま数値が分かるので便利ですね！

メニュー見出しの背景色を変更！

最初は赤枠のメニュー見出しの背景色を変えてみます！

さっき作ってみた組み合わせを元に、濃い目のグレーにチェンジだぜ！！
毎回変更する時はドキドキしますね。。ｗ

変更後はこんな感じ！

完全に文字が見えにくくなってますが、後で文字色も変更するので問題なし！

次にCSSに追加していきます！

スタイルシートの場所は
「WordPress管理画面の外観⇒テーマ編集⇒下の方にあるスタイルシート (style.css)」になります。

次の1行をスタイルシート (style.css)に追加していきます！

background:#555;/*背景追加*/

「#○○○」の部分は、カラーチャートから選んだ数値を入れる感じですね。

下記の「/*サイドの各タイトル見出し*/」という塊があると思うので探して、8行目と9行目の間に追加してください！

/*サイドの各タイトル見出し*/
.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;
}

追加後に、ファイルを更新ボタンを押します。成功すると、先ほどのように背景色が変わります～！

参考ブログはコチラ！
⇒きちデンさんの【stinger3】見出し画像変更など！サイドバーをカスタマイズしてみた

かなり細かく解説されているのでメチャクチャ助かりました。。
ありがとうございます！

言い忘れてましたが、変更前コードのバックアップをお忘れなく！！！
忘れるとミスるとかなりの確率でテンパるので。。ｗ

メニューバーに下線も追加してみるよ！

オッ、下線の大きさは適当に入れたのですが、一発でイイ感じに出来ました！
（でもやっぱ太すぎたので、後で細めに変更しましたｗ）

CSSに追加するのはコレ！

border-bottom: 7px #○○○ solid;/*下線追加*/

先ほどと同じ塊の1番下の12行目の「}」の前に追加してください！
ココもカラーチャートを参考に色の数値を、お好みで変更ですね～！

全体だとこんな感じ！

/*サイドの各タイトル見出し*/
.menu_underh2 {
	margin-bottom: 20px;
	margin-top: 20px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 35px;
	background:#555;/*背景追加*/
	background-image: url(images/ca3.png);
	background-repeat: no-repeat;
	background-position: left center;
	border-bottom: 7px #○○○ solid;/*下線追加*/
}

フォント色の変更方法に苦戦・・・

見づらいメニューバーのフォント色の変更方法を探すも、ニッチなのか全く見つからないｗｗ

苦戦しながらも何とか出来ました。。

今回は白文字にしたかったので、その数値を指定しました！

	color:#ffffff;/*フォントカラー変更*/
	font-size: 15px;/*フォントサイズ変更*/

フォントサイズも変更出来るので、やりたい方はついでに変更しておくとイイですね！

そして「font-family」という塊を見つけてそこの後に追加する感じですが、「font-family」の場所は下のようなコードが同じCSS内にあるので、ページ内検索して見つけてください！

そこの「font-family」の部分をコピペする感じです！


/*-----------------------------
BASE
------------------------------*/

* {
	font-family: arial, helvetica, osaka, "MS PGothic", sans-serif;
	margin: 0px;
	padding: 0px;
}

記事内で使用するフォントですが、僕は変更しているので上記の様になってますが、デフォルトは違うフォントになっているかと思います。確か。。ｗ

参考ブログはコチラ！
⇒1MA*MEMOさんの【できた！WORDPRESS ORIGIN】好きなフォントにカスタマイズしよう

今度は別のトラブルが！！

あっ、何か余白がなくなってるやん！！ｗ

コードを見てたら、コイツらが悪さをしてましたｗ

	margin: 0px;
	padding: 0px;

削除したら直ったよ！一句出来ました！

『無くして気付く　余白の大事さかな』

歌丸です。

文字色の変更は先程と同じ部分に、そのまま追加しましたよ！

全体の変更したコードはこんな感じ！


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

.menu_underh2 {
	margin-bottom: 20px;
	margin-top: 20px;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 35px;
	background:#555;/*背景追加*/
	background-repeat: no-repeat;
	background-position: left center;
	border-bottom: 7px #○○○ solid;/*下線追加*/

font-family:  arial, helvetica, osaka, "MS PGothic", sans-serif;
	color:#ffffff;/*フォントカラー変更*/
	font-size: 15px;/*フォントサイズ変更*/
}

コード的にコレで正しいのか分からないですが、とりあえず上手く表示されてるので、まぁコレでイイかなとｗ