*

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

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

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

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

スポンサーリンク


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

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

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

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

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

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

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

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

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

変更後はこんな感じ!
htr
完全に文字が見えにくくなってますが、後で文字色も変更するので問題なし!

次に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】見出し画像変更など!サイドバーをカスタマイズしてみた

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

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

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

gerh

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

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;/*下線追加*/
}


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

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

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

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

	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;
}

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

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

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

あっ、何か余白がなくなってるやん!!w
htshtr

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

	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;/*フォントサイズ変更*/
}

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

検索ボタンもついでに変更してみる!

コレもカスタマイズが簡単過ぎるせいか、なかなか説明しているブログがなかったので、自力でカスタマイズしてみました~!

コレが変更前で!
検索表示前

変更してみたらこんな感じ!
検索後、変更後

やはりボタンの色を変更するだけでも、だいぶ雰囲気変わりますね~!
ドキドキしながらも、やる価値ありますなww

変更後の画像をアップロードした場所は、FTPサーバー内に直接アップしました!

アップロードのフォルダ先はコチラ!

/あなたのブログのドメイン/public_html/wp-content/themes/stinger3ver20140327/images

何でサーバーにアップしたかというと、元の検索ボタン画像も同サーバ内にあるので変更が楽だったという事ですね!アップロード後に、ファイル名を変更するだけです!

ちなみに元の画像は拡張子がGIFでしたが、PNGでも容量が小さく特に問題ないかと思うのでPNGのままにしてますw

ボタン画像の大きさは50×32でした!

ボタン素材はこのソフトで作りました!

stinger3のボタン画像をダウンロードして、虫眼鏡アイコンをマネて作成!
画像は超優良のデザインソフト『Inkscape』でちゃちゃっと作りました~!fewre

Inkscapeはこういう簡単な素材作成はチャチャッとすぐ出来るので、重宝しますね!しかもInkscapeはフリーソフトですからね。。

視覚的に操作出来るのでオススメです!利用しない手はないでしょう!

そんな感じでまだまだカスタマイズしていくので、楽しみです!

それでは~

いろはす

カスタマイズしてると、どんどんオリジナルっぽく自分色が出てくるので、ブログへの愛着が半端ないですねw 中毒性がありそうですww

ツイッターも気軽にフォローして下さい~!


スポンサーリンク

関連記事

rshse

stinger3をカスタマイズしてヘッダー画像幅の調整してみたよ!何処のコードをいじればイイの!?

どうもです、いろはすです。 前回全体の幅を広くしたので、ヘッダー画像部分の右側に余白が出来てし

記事を読む

ヘッダー画像横に

stinger3をカスタマイズして全体の幅とメイン幅&サイドバー幅を広げてみたよ!余白の微調整も!

どうもです、いろはすです。 先日サイドバーをカスタマイズしたら、他も色々といじりたくなって来た

記事を読む

rehte

ブログ記事内にコードを表示出来るプラグイン『SyntaxHighlighter Evolved』が超便利!!使い方は簡単なの!?【実践レポート記事】

どうもです、いろはすです。 stinger3のカスタマイズにあたって、色々とプラグインを見てい

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • 20代で起業して自由過ぎるライフスタイルを満喫中の♂
    高知生まれ高知育ち、東京なう。
    絵に書いた様な右脳派。
    ほぼ感覚だけで生きてます。

    ⇒ 詳しくはコチラから!
  • follow us in feedly

    ⇒ 「feedlyって何やねん!」という方はコチラを!
  • 2017年12月
    « 10月    
     123
    45678910
    11121314151617
    18192021222324
    25262728293031
PAGE TOP ↑