ショップサーブのヘッダーナビをオリジナルにする
Posted under: これはちょっと高度なテクニックになるので、
もし挑戦される場合は、本当に自己責任でお願いします。
もともとのテーマファイルのバックアップは必ずとりましょう ＾＾；
あとは、そこまでカスタムするのであれば、
外部の業者さんに依頼された方が懸命かもしれません。
私の場合は、何でも自分でやる性格なので、
今後も自分でやり続けますが・・自己責任で 笑
っというわけで、ヘッダーをオリジナルにする方法です。
やり方はいくつかあるのですが、私がやった方法です。
まずは、デフォルトのヘッダーナビを非表示にします。
使っているテーマに .headnavi というクラスがあるので、
そこに下記のスタイルを追加します。
1 | display: none; |
これで、現在のヘッダーナビは非表示になります。
ついでに私の場合は、デザイン設定→ヘッダとＳＥＯの設定で
カートをみる
ご利用案内
マイページへログイン
お客様の声
サイトマップ
お問い合せ
上記のテキストは無しにしています。
さて、ここからがミソです。
独自にヘッダーナビを表示するためのエリアを確保します。
下記のCSSを追加します。
1 2 3 4 5 6 7 8 | .headnavi_tomisen {/* クラス名は何でも良いです（左のクラス名は例です） */ height: 25px;/* 表示するエリアの高さ */ width: 840px;/* 表示するエリアの幅 */ position: absolute; top: 140px;/* 要素の上からの位置指定 */ left: 50%;/* 要素の横からの位置指定 ページが中央寄せの場合はこのまま */ margin-left: -422px;/* ここがミソですが、使っているテーマにより違うので適宜調整して下さい */ } |
追加したCSSをヘッダのバナーエリアから呼び込みます。
1 | <div class="headnavi_tomisen"></div> |
表示される内容は上記の間に入れます。
表示するメニュー自体は各自で作ってくださいね ＾＾；
テーブルでも、リスト要素でもお好きなもので♪
それと、使っているテーマによっては、見た目の間隔とかを調節するために、
#header の高さとかを調整する必要があるかもしれません。
なにはともあれ、これで好きな項目・デザインで表示できます。
最後に、くれぐれも自己責任で。。。
この件に関しては、直接使っているテーマ・ソースを見ないと
ハッキリとしたことがわからないので、お助けすることができません。
追記 ：
現在はこのような面倒なことをしなくてもカスタムできるように仕様が変更になっています。
でもやっぱりある程度のCSSの知識は必要です。
こちらも合わせてご覧ください - このページの内容と関連がある記事 -
5 Comments + Add Comment
コメントをいただけると励みになります！よろしくお願いします。
Blog info
Recommend Servers
はじめまして。
ショップサーブで、ヘッダーナビエリアをカスタマイズできないか悪戦苦闘していたのですが、、、まさに探していたcssテクニックでした！
お陰様で無事設置する事が出来ました！
ありがとうございました(^^)
取り急ぎお礼まで。。
> junmikanさま、
コメントありがとうございます ＾＾*
ヘッダーナビの部分って結構好みにしたいですよね、やっぱり。。
うまく設置できましたようで何よりです。
ショップ作成・運営がんばってください！
はじめまして、ショップサーブ、ナビカスタマイズでこちらに引き寄せられませ居た。
一つご質問なのですが、私のショップサーブ管理画面に「ヘッダーのフリーエリア」というページがどこを探してもなく、どこにナビのhtmlを記述していいか分かりません・・・
お手数をお掛けしますが、ご教授願えればと思います・・・
> KENさま、
はじめまして。
よく見たらちょっと文字が違っていました ＾＾； （修正済み）
「 ヘッダーのフリーエリア 」ではなく、「 ヘッダのバナーエリア 」です。
デザイン設定→ヘッダとＳＥＯの設定→ヘッダのバナーエリアに記述です。
大変失礼いたしました。
店長様
早速のお返事ありがとうございます！
バナーエリアありました！
こちらを設定していろいろと試してみたいとも居ます。ありがとうございました！！