【STORKカスタマイズ】通常のヘッダーメニューをLIG風の追従型ヘッダーメニューに修正する方法

スポンサーリンク

どうも、「オウンドメディアHACKS」編集長の山田です。

突然ですが、僕自身が好きで目指しているオウンドメディアの一つに「LIG(リグ)」さんという会社があります。

LIGさんのサイトはこちら

そのLIGさんのサイトのヘッダーメニューが下にスクロールしても追従してきてオシャレだなーと思っていまして、今回自分のサイトでも実装してみました。

今回は、「通常のヘッダーメニューをLIG風の追従型ヘッダーメニューに修正する方法」について解説して行きます。

はじめに




まず、今回は「STORK(ストーク)」というワードプレスのテーマを使用している前提で進めて行きます。

もし持っていない場合は、めちゃくちゃ良いテーマ(このサイトでも使用している)なので、GETしておいてください!

おすすめワードプレステーマ「STORK」の購入はこちら

LIG風の追従型ヘッダーメニューに修正する方法

まず、ダッシュボードから「外観」を選択します。

その「外観」の中から一番下の「テーマを編集」をクリックします。

この中から「style.css」をこれから修正して行きます!

まずは、「style.css」の編集画面で「Ctr+F」(Macは「command+F」)を押します。

すると下記のように検索窓が出てきますのでそこに「#in」と打ち込みます。

すると、9件ヒットします。

その中から5つめあたりにある下記のような記述を探します。

では、これからこのコードの記述を修正して行きます。

CSSを触る場合は、必ずバックアップを取っておいてくださいね!

修正前

この記述を下記のように修正します。

今回は、ヘッダーメニューの背景が「白」でメニューがわかりにくかったので、ヘッダーメニューの下部に薄いグレー(#bfbfbf)の下線を加えました。(LIGさんのヘッダーにも薄いグレーの下線が入っています)

修正後

修正を完了し、保存すると修正は完了です。

実際に実装が完了すると、こんな感じでヘッダーメニューが追従するようになりました!

 

イメージ動画

今回は、STORKの機能にある「ヘッダー下お知らせ」「トップページヘッダー」を設定していないので、margin-bottom:60px;に設定しましたが、「ヘッダー下お知らせ」「トップページヘッダー」を設定している場合、+20px追加してください。

まとめ

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

今回は、「通常のヘッダーメニューをLIG風の追従型ヘッダーメニューに修正する方法」について解説しました。

今回のヘッダーメニューのように同じテーマを使っていても少しカスタマイズを加えるだけで差別化できますので、ぜひ参考にしてみてくださいね!

スポンサーリンク

参考になりましたら応援ボタンをポチッとお願いします!

コメントを残す

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

ABOUTこの記事をかいた人

IT企業でセミナーやメディア運営を行いながら個人でもWEBデザインやネットビジネス、映像など色んなことを勉強中!(特に海外のマーケティング情報が大好物)このブログでは主に学んだことを中心に、個人や小規模ビジネスを対象にしたオウンドメディアやコンテンツマーケティングに関する情報を中心に書いています!