ショップサーブっぽいフッターを変更する : そば どっと びず

そば どっと びず

そば どっと びずの新着記事
↓ 一度使ったら手放せません ^^; とにかく動作が軽くて安心!オススメです ↓
USBメモリウイルスの感染にご注意を!

ショップサーブのフッターナビの部分は通常、
デザイン設定→ヘッダとSEOの設定→フッタの設定 の項目で

特定商取引法の表示
個人情報の取り扱いについて
お店案内

上記3箇所のうち右側のフォームエリアにタイトル記入することでしか表示することができませんが、
好みの項目を表示するためのカスタム方法です。

例えば、こんな感じ↓
フッターナビ部分

今回のカスタムで注意する点としては、
特定商取引法の表示
個人情報の取り扱いについて
の上記2項目だけはかならずフォームエリアにタイトルは入れておいてください。

ここの項目を表示しない一番簡単な方法は、フォームエリアに何もタイトルを記入しないことですが、
記入しないと、それぞれのページのタイトルも表示されなくなっちゃます ^^;

お店案内は必要がなければ、無記入でも大丈夫です。

まずは、スタイルシートから

使っているテーマの

.footnavi

っていうのを探します。

ご存知かと思いますけど、文字列を検索するときは、
キーボードの「 Ctrl 」+「 F 」で簡単に見つけることができます。

.footnavi というクラスに

display: none;

を追加します。

これで見た目はとりあえず表示されなくなります。(ソース上は表示されています)

さて、次はそれっぽいフッターナビを作るスタイルシートを。。

と、その前に、コピーライトの項目で単純に項目 | 項目 | 項目 っていうやりかたもありです ^^;

スペースと右側につける | が面倒くさいときは、このスタイルシート↓

#footer ul {
margin: 0px auto;
text-align:center;
padding: 0;
}

#footer ul li {
display: inline;
margin-right: 5px;
padding-left: 5px;
line-height: 1.1;
border-left: 1px solid #333;
}

#footer ul li.utilityHome {
border-left: 0;
}

※各数値はそれぞれのサイトに合わせてカスタムしてください

コピーライトの部分に記述するhtmlは↓

<ul>
<li class="utilityHome"><a href="http://www.">HOME</a></li>
<li><a href="http://www.">マイページ</a></li>
<li><a href="http://www.">個人情報の取り扱いについて</a></li>
<li><a href="http://www.">特定商取引法に関する表示</a></li>
<li><a href="http://www.">サイトマップ</a></li>
<li><a href="http://www.">お問い合わせ</a></li>
</ul>

これで好きな項目を表示することができます。

あとは、

<div class="footnavi">

<div id="copyright">

っていうところのマージンとかパディングを調整して見た目を整えれば完成です。

そのあとの、コピーライト部分は普通に記述してください。

posted by そば富泉

Categories: ショップサーブ

コメントをどうぞ