ブログを開設し、ある程度複数記事を投稿した方は、
ブログのデザインやレイアウト変更に挑戦するのではないでしょうか？
特に、ブログの一番上部に表示され、
常に訪問者の方に見られる場所といえば、
「ヘッダー部分」になります。
ブログのタイトルやキャッチフレーズなど、
言わばブログの顔とも言えるべきスペースなので、
ブログのロゴなどを配置して見栄えを良くしたいですよね！
当ブログでもヘッダーにロゴを配置したところ、
「記事に掲載した画像などに反映される影のエフェクトがロゴにも反映されてしまう」
という不具合が発生し大変困りました。
本記事ではこの不具合に対して筆者が調査し対応して解決できた方法を紹介しています。
ブログ初心者の方の参考になれば幸いです。
ブログ初心者向けの記事も掲載しています。
こちらも参考にしていただけると幸いです。
ヘッダーロゴにも影がついてしまう現象
ヘッダーロゴを作成し、ブログヘッダーに掲載したところ、
ヘッダーロゴには必要が無いのに影がついてしまいました。
実際に起きた不具合
ヘッダーロゴは背景を透過させ、枠線も無しにしていましたが、
上図赤枠の中のように影が出てしまいました。
ヘッダーの中で浮いてしまって、
ヘッダーとの一体感が損なわれる形になってました。
これを何とかしようとしましたが、
Cocoonの設定には画像に影を作る設定はなく、
設定画面から変更できないことが分かりました。
原因：スタイルシートの記述
原因を探っていくと、スタイルシートの中の記述にあることが分かりました！
ブログ初心者向けの解説サイトに記載されていた
「基本設定でやっておくべきこと」的なものを色々調べて設定してました。
その中でも、
「ブログ全体を整えるCSS（スタイルシート）の記述」に原因がありました。
そのコード記述が以下です。
img{/*すべてのイメージに影を*/
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.2);
}つまりブログに掲載される画像すべてに影のエフェクトが付与されるものでした。
これがなかなかクセもので、
ブログデザイン全体に影響するコードとなっていますので、
ヘッダー画像の影を消そうとこのCSS記述を削除すると、
今度はブログ全体の画像に影のエフェクトがつかなくなってしまいます。
従って、安易にこのコードだけを消すことができませんでした。
ヘッダーロゴの影を消す方法
上記の影をつけるコードを安易に消すことができなかったため、
別の方法を試すことにしました。
その方法とは、
「影をつけるエフェクトのコードを、ヘッダーでのみ無効にする」
というものです。
スタイルシートに記述すべきこと
ブログ全体に影響しているコードを
ヘッダーでのみ無効にするために記述したコードは以下の通りです。
/*ヘッダーの画像から影を消す*/
.logo-header img{
box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
}.logo-header の部分でヘッダーロゴにだけ効果が出るように指定しています。
このCSSコードについては、以下の手順で記述すればOKです！
- WordPress管理画面から外観設定をクリック
- テーマエディターをクリック
- 画面右側のスタイルシート欄を選択し記述欄に追加
コード記述前に、
既に記載されているコードのバックアップを取っておくことをおすすめします。
これは、メモ帳でもいいので記載されたコードをコピーして保存しておきましょう。
対策した結果
ご覧のとおり、ヘッダーロゴの影が見事に消えました！
投稿記事の画像にはちゃんと影のエフェクトはかかっているので、
ヘッダーにのみ機能したことが分かります。
ブログのヘッダーロゴに出る影を消す方法 まとめ
ブログのデザインを整えていく中で、
ヘッダーロゴの作成と掲載をすると思います。
ヘッダーロゴを背景透過で作成し、ヘッダー背景となじむデザインにする方もいると思いますが、
そこに思いもよらぬ落とし穴がありました。
ブログに掲載される画像に影をつけるというCSSコードを記述していたため、
ヘッダーロゴにも影が出る状態でした。
そこで、ヘッダー画像には影をつけないというCSSコードをテーマエディターで追記しました。