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

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

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

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

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

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

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

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

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

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

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

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