ショップサーブのヘッダーナビをオリジナルにする
これはちょっと高度なテクニックになるので、
もし挑戦される場合は、本当に自己責任でお願いします。
もともとのテーマファイルのバックアップは必ずとりましょう ＾＾；
あとは、そこまでカスタムするのであれば、
外部の業者さんに依頼された方が懸命かもしれません。
私の場合は、何でも自分でやる性格なので、
今後も自分でやり続けますが・・自己責任で 笑
っというわけで、ヘッダーをオリジナルにする方法です。
やり方はいくつかあるのですが、私がやった方法です。
まずは、デフォルトのヘッダーナビを非表示にします。
使っているテーマに .headnavi というクラスがあるので、
そこに下記のスタイルを追加します。
display: none;これで、現在のヘッダーナビは非表示になります。
ついでに私の場合は、デザイン設定→ヘッダとＳＥＯの設定で
カートをみる
ご利用案内
マイページへログイン
お客様の声
サイトマップ
お問い合せ
上記のテキストは無しにしています。
さて、ここからがミソです。
独自にヘッダーナビを表示するためのエリアを確保します。
下記のCSSを追加します。
.headnavi_tomisen {/* クラス名は何でも良いです（左のクラス名は例です） */
height: 25px;/* 表示するエリアの高さ */
width: 840px;/* 表示するエリアの幅 */
position: absolute;
top: 140px;/* 要素の上からの位置指定 */
left: 50%;/* 要素の横からの位置指定 ページが中央寄せの場合はこのまま */
margin-left: -422px;/* ここがミソですが、使っているテーマにより違うので適宜調整して下さい */
}追加したCSSをヘッダーのフリーエリアから呼び込みます。
<div class="headnavi_tomisen"></div>表示される内容は上記の間に入れます。
表示するメニュー自体は各自で作ってくださいね ＾＾；
テーブルでも、リスト要素でもお好きなもので♪
それと、使っているテーマによっては、見た目の間隔とかを調節するために、
#header の高さとかを必要があるかもしれません。
なにはともあれ、これで好きな項目・デザインで表示できます。
最後に、くれぐれも自己責任で。。。
この件に関しては、直接使っているテーマ・ソースを見ないと
ハッキリとしたことがわからないので、お助けすることができません。
： ： このページの内容と関連がある記事 ： ：
