【賢威カスタム】その5 背景を白くしたい関連

賢威のクール版って、背景が黒くって、
結構ダークな印象を受けちゃうんですよね。

黒っぽい背景もかっこいいけど、
すがすがしい白も素敵♪

でも、背景が白いテーマって、1個しかなくって、
緑×白×黒以外に選択肢がないんですよ。

でもね。好きな色を選んで、背景だけを白くしちゃう方法があるので、
それを解説しますね。


実は、賢威の背景に使われる画像を、
手持ちの画像ツールで塗っていく手法もあるんですけど、
正直、きれいに塗れない・・・まず、塗れません><

ちっちゃくって、細かい、アーチを描く部分を、
絶妙なテクで塗らなきゃいけないので結構神業です。

しかも、塗れた\(*´▽`*)/と思ってGIFで保存したら、
画像がぐっちゃりつぶれちゃいます><

ですので、好きな色に塗りなおす、というより、
すでにあるパーツを流用するという方法でやってみますね。

    用意するもの

  • 自分の使っているテンプレートとおんなじテンプレート
  • 自分のテンプレートのカラムと同じカラムの「クール版(白)テンプレート」

※画像をクリックしたら拡大します。



白いテンプレートをダウンロードしたら、
その中から、流用できるパーツをパーツ取りします。

まず、「image」フォルダの中の、「common」フォルダを見てください。

「bg-header.gif」という細っこい画像をみつけてね。



これを、ものすごく拡大して、オーバーに着色してみたんだけど、


1番左は、「クール版(白)」のデフォルト。
真ん中の2番は「クール版(黄)」のデフォルト。
右端の3番は、「クール版(黄)」の黒いところを塗ってみたもの。

この部分を塗るのは、さほど難しくは無いので、
自分の使っているテンプレートの画像の中から探し出して、
画像ツールで、黒い部分を塗っていってもいいし、

面倒&別にこだわらないって場合は、クール版(白)(1番のもの)を流用します。

次いで、「bg.jpg」を探します。



で、コイツは無地ですので、ペイントとかで、ちゃちゃっと塗ってくださいね。


でね、ここから、なんだけど。


ちょっと見えにくかったらごめんね。
この、赤丸で囲んだとこ、
このすみっちょだけ、デフォルトでは黒いんだ。

で、画像ツールなんかで、この黒いのを、上記画像みたいに、
白く塗ればいいんだけど、これ、マジできれいに塗れません。

で、画像がつぶれたりしてろくなことにならないから、
あるもので流用しましょ、ということなのね。

で、流用するのは、これ。



「bg-sidebar-top.gif」
「btn-pagetop_off.gif」
「btn-pagetop_on.gif」

この3つは、「common」フォルダの中。

次いで、「title」フォルダから、「bg-contents-h2.gif」。




後は、この画像たちを、FTPソフトでアップロードします。

アップロードの場所は、
「WP-content」→「themes」→「keniWP_C○_カラー」→「WP」→「image」→

    ● 「common」フォルダ内に、
  • bg-header.gif
  • bg.jpg
  • bg-sidebar-top.gif
  • btn-pagetop_off.gif
  • btn-pagetop_on.gif

  • ● 「title」フォルダ内に、
  • bg-contents-h2.gif

をアップロードします。(上書きしちゃうのだ)

すると、多分、タイトル文字と、パンくずナビが、
文字色が白いんで、見えなくなっちゃったハズ。

そこを変えていくんだけど、ヘッダーはすでにこちらで書いたので参考に。

あとはパンくずナビの色だね。
ワードプレスのダッシュボードから、
「外観」→「テーマ編集」→「cool-orangeg●.css」を選択。
以下の2箇所を変更します。





/*--------------------------------------------------------
パン屑ナビ
--------------------------------------------------------*/

#breadcrumbs{
	position: absolute;
	top: 230px;/*▲ページ最上部からの距離*/
	left: 0;
}


#breadcrumbs li{
	float: left;
	padding: 0 10px 0 15px;
	background: url(images/icon/icon-breadcrumbs.gif) left 5px no-repeat;
	font-size: 1.2em;
	color: #000000;
}

/*パン屑ナビの先頭*/
#breadcrumbs li.first{
	padding-left: 0;
	background: none;
}


#breadcrumbs li a:link,
#breadcrumbs li a:visited{ color: #000000; }

#breadcrumbs li a:active,
#breadcrumbs li a:hover{ color: #cc6600; }

これでOK!!


>>>賢威カスタマイズ一覧に戻る

>>>賢威についてもっと詳しく!

あわせて読みたい関連記事


もりりんコンテンツのご案内

初心者コーナー

当ブログの歩き方

サポート対象商品

デザインブログ

ご購入者様専用

無料プレゼント

これからネットで起業するために知らなきゃいけない
webマーケティングの基礎講座ネットで稼ぐ秘訣
メールセミナーでお届けします。今なら無料!

※は必須項目です



コメントは停止中です。

サブコンテンツ

このページの先頭へ