賢威でWordPress~背景色を変えた後のこまごま設定

賢威の背景色を変更した後で出てくる、
色の変更などのこまごました変更を解説します。

賢威テンプレートの背景色を変更するには、
こちらのページを参考にしてください。

⇒ 賢威でWordPress~背景色を変更する

パンくずナビの色変更

まずは、背景色を思いっきり明るい色に変えたとき、
パンくずナビの色がデフォルトの白色だと見えなくなってしまいます。

そのパンくずナビの色を変更する方法を解説します。

管理画面から、「外観」⇒「テーマ編集」⇒「cool-blueg12.css」とすすみ、
この部分を探します。

/*——————————————————–
パン屑ナビ
——————————————————–*/

#breadcrumbs{
position: absolute;
top: 223px;/*▲ページ最上部からの距離*/
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: #fff;
}

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

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

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

この2箇所を変更します。
例えば、#000で黒くなりますので、
両方とも、#000としてもいいですね。

ボタンなどの画像の小さな隅っこを変更する

賢威クール版では、角丸のボタンや背景が使われています。
背景色を思いっきり変更した際には、
こういうボタンなどのほんのちょびっとだけ、
元のグレー背景色が残ってしまうんです。

四角い画像に角丸のボタンを描いているため、
どうしても、細かなところで元の色が残ります。
これを、自分で塗って埋めていくんですね。
※ 分かりやすいように背景に黄色い色をつけています。

お手持ちの画像加工ソフトで、塗っていってくださいね。

塗っていく画像は、「common」フォルダ内の、

  • btn-pagetop_on.gif
  • btn-pagetop_off.gif
  • bg-sidebar-top.gif

そして、「title」フォルダ内の

  • bg-contents-h2.gif

です。

で、今回は、名前を一切変えないでください
うまく作動しない原因にもなりますので、
元の名前、画像の形式(gifファイル)で保存し、
そのまま、元のデータを上書きする形でアップロードします。

だから、今回はメディアアップロードではなく、
FTPソフトから、アップロードして、「上書き」してくださいね。

どうしてもうまく画像が塗れない人のための荒業

これ、私もやってみたんですけど、
きれいに角だけ塗るのは結構難しいんです。

中には、gif形式で保存したら、画質が悪くなってしまうケースも。

そんな時、最後の裏技があるので、
そちらも試してみてください。

正直、ほとんど違いが分からないので、
私はもっぱらこっちを使っていますw

それは、
「テンプレートメーカー」を使うという方法です。

まぁ、要するに、賢威のクール版ホワイトのテンプレートを作って、
そこのデータを使ってしまおうという作戦ですね。

デフォルトのきれいな角丸白背景のボタンなどを、
塗る手間なくゲットできます。

こうやって、新しいテンプレートをダウンロードしておき、
必要なパーツだけ抜き取って、流用してしまうんです。

ところどころ、ボタンの色などが元とは違いますが、
パーツ自体の色合いがきれいなので、
さほど気になりません。

ここだけの話、このブログだってさ、
よーく見たら、青いテンプレート使っているくせに、
ほらここ、白いでしょ?ホントは青なんだよ(笑)

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

“賢威でWordPress~背景色を変えた後のこまごま設定” への1件のフィードバック

  1. [...] 賢威でWordPress~サイドバーの背景色変更 賢威でWordPress~背景色を変更する 賢威でWordPress~背景色を変えた後のこまごま設定 トップインフォメーション 記事下にメルマガ登録 [...]

サブコンテンツ

このページの先頭へ