【SANGOカスタマイズ】ヘッダー下にある「影」をCSSで消す方法を解説。

今回はWordPressテーマ「SANGO」のカスタマイズとして、ヘッダー下にある「影」の部分をCSSで消す方法を解説していきます。SANGOのウリでもあるマテリアルデザインのページ構造を崩してしまいかねないデザインカスタマイズではありますが、ヘッダー部分ではフラットな印象を実現したかったので今回のようなカスタマイズに至りました。

そんな当メディアの方向性を感じ取ってか、「ヘッダー部分の影を消したい」という声をいただくことも少なくはありません。今回はそういったケースの備忘としてもカンタンな方法を紹介していくので、ぜひ同様のお悩みを抱えているという場合には、解説を参考に一緒に設定を進めていきましょう。

SANGOのヘッダー下にある「影」をCSSで消す方法

まず、SANGOのヘッダーの下部分にある「影」とはどこのことなのか?というと、次の箇所に当たります。

 

冬なのでちょっと雪もちらつき良い雰囲気ではありますが、どうも僕はこの「影」の部分がヘッダーをあからさまなものにしているなぁと感じていました(ヘッダーは目立って当たり前ですが)。

どちらかと言えばページ構造をあえて目立たなくさせることにより、よりユーザーが平滑かつ快適にサイトを閲覧してもらうことができると考えていうので、影は必要ないなと感じています。もちろんお好みで設定していただいて構いませんが、特に当メディアのヘッダー部分をその参考事例として見ていただければ嬉しいです。

 

それでは早速、このヘッダー部分の影を消すためのカスタマイズ方法について見ていきましょう。

「外観→カスタマイズ」に移動する。

まずは、WordPressのダッシュボード画面から「外観→カスタマイズ」を選択し、カスタマイザーを開きましょう。

「追加CSS」にCSSを追記する。

無事にカスタマイザーを開くことができたら、項目の中にある「追加CSS」をクリックし、以下のコードを追記します。

細かい解説は不要かと思いますが、こちらのコードでは「header(ヘッダー)」部分の「box-shadow(影)」の値を0に設定しています。このようにCSSで記述することにより、シンプルにヘッダー部分の影だけを削除することができます。

 

コードを追記したら「ファイルを更新」をクリックし、実際にサイトでの表示を確認してみましょう。

無事に設定できていますね、このようにヘッダー下部分にある影を削除することができました(もしCSSの設定が反映されていない場合は、ブラウザのキャッシュを削除したりコードに誤字脱字がないかなど確認してみましょう)。

ちなみに、今回のようにヘッダー部分の影を削除する場合には「外観→カスタマイズ→色」で「ヘッダー背景色」を白にするなど、コンテンツ部分と自然に馴染み、ある程度見やすいようなデザインにするよう心がけていくといいですね。

最後に

以上、ヘッダー下にある「影」をCSSで消す方法ということで、WordPressテーマ「SANGO」の小技的なカスタマイズについて解説しました。いかがだったでしょうか?

サイトデザインにこだわっていくということは、サイトに対する愛情そのものですし、何よりそうしてこだわりを持ってサイトを運営していくということはとても大切です。カスタマイズにこだわりすぎて時間が取られてしまうのは考えものですが(本分はコンテンツ作成です)、こういった細かい部分の調節についても、ブログの運営に慣れてきたら積極的に取り組んでいけるといいですね。

当メディアも一応、と言ったらなんですが、デザイン性に優れたテーマ「SANGO」を使用し楽しくメディア運営をさせていただいています。今回の方法以外のカスタマイズに関する内容や、メディア運営におけるお悩みなど何かありましたら、ぜひお気軽にお問い合わせください。

 

また、そういったメディア運営に関するよりコアな内容や、これからの時代でなぜWebを使ったビジネススキルが必要になってくるのか?ということなどは、主宰しているオンラインスクールで詳しくお話ししています。ぜひ少しでも興味があるという方は、ぜひ気軽に参加してみてくださいね。

 

ABOUT ME

RIKU(坂本陸)WEBマーケター及びコンサルタント

オフィシャルメディア「LIVE YOUR LIFE」運営/オンラインスクール「THE LIFE SCHOOL」主催/早稲田大学在学中にPC1台で起業し、その後大学中退の道を選び独立。現在は個人ならびに法人向けのコンサルティング活動・メディア制作や、就職活動・進路選択に悩む大学生のキャリア相談など幅広く活動中。23歳、RADWIMPSと甘いものに目がない。

⇒詳しいプロフィールはこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA