Stinger3のメニュー、メイン・サイドバーを半透明にしてみました

スポンサーリンク
スポンサーリンク

背景に画像を入れることによりでたデメリットを解消する

前回のブログで、アドインを入れて、背景に画像をしましたが、デメリットとしてサイドバーの文字が見えにくくなるという話をしました。

久々のwordpressのアドオン「Background Manager」は便利に背景が設置できる
...

このデメリットを解消するために、今回サイドバーの背景を作り、背景を半透明にすることにしました。今回のお世話になったブログはこちらです。

http://sakihaya.com/2013/12/16/wrap-background/

まずは、サイドバーに背景を追加

まずはメインとサイドバーに背景を追加します。style.cssファイルにある「#wrap #wrap-in #side」内を以下のように変更します。

次に、メインとサイドバーの背景を半透明化する

次に、メインとサイドバーの背景を半透明化します。そのために、このコードをstyle.cssの中にある、「background-color: #FFF;」と入れ替えます。

アーカイブのタイトルだけ白地が残るのは

これをやっていると、どうしてもアーカイブのタイトルの白地が残ってしまいますので、「.entry-title-ac」タグの中にある「background-color: #FFF;」をのぞきました。

これによって、アーカイブのタイトルの白地がなくなりました。よりいい感じのサイトイメージになりましたね。

大雅写真事務所(StudioTAIGA).jpg

一番大変だったのはこれ

この作業の中で一番大変だったのは、アーカイブないのタイトルの白地を透明かさせるということです。

いろいろなブログを読んでいたのですが、アーカイブのタイトルの下地を透明化させるための、タグが最初見つからなくて、いろいろと探してしまいました。

最終的には見つかったのですが、バージョンによって、タグの名称が違ってくるのでしょうか。この辺はどうしても、仕方のないことですね。

次回は、検索フォームをいじってみる

タイトルもいじりたいと思っているのですが、まずは検索フォームの色やボタンのイメージなんかを変えてみようと思います。

コメント