サイドバーの背景色を透かし設定にカスタマイズする方法

背景をカフェ風の画像にしたのは良いものの、サイドバーが背景画像と同化して見づらくなった仙台カフェです。

背景を画像にするだけで一気にオシャレ度がアップして、デザインセンスのない僕でも一味違うブログデザインができるのでオススメですね♪

ただ、サイドバーの背景が透明になっているためか、画像の中にテキストが同化してしまって見づらいのなんのって…。

STINGERをカスタマイズしている方の中で同じような壁にぶつかっている方のために今回はサイドバーの背景を設定する方法と背景に透明色を設定して、透かしを入れる方法についてご紹介します！

はじめに

無料のWordpressテンプレートであるSTINGERをお使いの方向けに解説していますが、ご要望があれば他のテンプレートの背景設定方法についても解説します。

まー調べれば親切な解説サイトがたくさんあるので僕の出番はなさそうですが…。

TCDテンプレート、賢威なら対応できますので、他サイトを見ても分からない！という方だけ個別にメッセージを頂ければと思います。

では、早速サイドバーに透かし背景を設定してみましょう！

サイドバーに背景色を追加する方法

STINGERのサイドバーの背景はデフォルトでは設定されていないため、サイト背景と同色になってしまいます。

STINGER管理の背景設定で色や画像を選択すると、サイドバーも同様の色になりますよね？

仙台カフェもこんな感じでした。

で、この見づらくなったサイドバーをどうすれば見やすくできるかってことなのですが、対処方法は２つあります。

サイドバーを見やすくする２つの対処方法

1. 個別の背景をサイドバーに設定する
2. サイドバーのテキストカラーを変更する

１つ目はサイト全体の背景とサイドバーを色分けして区切るという方法ですね。

２つ目は背景と同化した文字色を変えて目立たせるという方法です。

２番目の方法を仙台カフェで行うなら白色にすることで、画像の中に紛れ込んで見づらくなっていた文字がくっきり目立つようになるはずです。

しかし、今回は白色透かしの背景を設定し、背景画像も見せつつサイドバーのテキストも魅せたいので１つ目の方法でカスタマイズをしました。

追加するCSSコード

方法はめちゃくちゃ簡単で一瞬で実装することができます♪

#side > aside {
background: #808080;
box-sizing: border-box;
padding: 10px;
}

上記コードをスタイルシート（style.css）にコピペするだけ♪

子テーマの場合はテーマ編集画面に貼り付けるだけです^^

上記コードを貼り付けると見事にサイドバーに背景が！

このままだとグレー背景なので、背景色を白色にしてさらに透明にするためのコードを追加しましょう。

透かしを入れるカスタマイズ方法

グレー（#808080）のカラーコードをホワイト（＃FFFFFF）に変更し、さらに透明度を指定する以下のコードを追加します。

background-color: rgba(255,255,255,0.55);

すると、

お〜！背景画像も見せつつ、サイドテキストも見やすくなった！

現在のサイドバーは右をご覧ください。→

（PCの方のみ）

仙台カフェの完成系コード

以下が今回採用したサイドバーのCSSコードです。

/* サイドバー背景 */
#side > aside {
background: #FFFFFF;
background-color: rgba(255,255,255,0.55);
box-sizing: border-box;
padding: 10px;
}

どこのカスタマイズを行ったか後で分かるように見出しも付け加えてあります。

rgba(255,255,255,0.55)の数字の部分を任意で変更すると色々とカスタマイズが楽しめます。

#FFFFFFはW3C色、rgbaは１０進数で表したカラーコードなので、透明色を設定しない場合はrgbaのコードは不要です。

一応後で好みが変わった時のために両方書いてあるので、不要の方はどちらかを削除していただいても構いませんよ^^

あとがき

いかがでしたでしょうか？

コピペで簡単にサイドバーの背景色をカスタマイズすることができましたね♪

仙台カフェでは運営者の佐々木が気になったことや実際につまづいたことの覚え書きが中心となっていますが、言い換えれば僕と同じような初心者が気になる疑問がまとまっているということです。

おそらく、こんなカスタマイズしたかった！そうそうそれ！と喉から手が届く記事作成を常に心がけていますので是非他の記事もご覧になってみてください^^