ショップサーブっぽいフッターを変更する
Posted under: ショップサーブのフッターナビの部分は通常、
デザイン設定→ヘッダとＳＥＯの設定→フッタの設定 の項目で
特定商取引法の表示
個人情報の取り扱いについて
お店案内
上記３箇所のうち右側のフォームエリアにタイトル記入することでしか表示することができませんが、
好みの項目を表示するためのカスタム方法です。
例えば、こんな感じ↓
今回のカスタムで注意する点としては、
特定商取引法の表示
個人情報の取り扱いについて
の上記２項目だけはかならずフォームエリアにタイトルは入れておいてください。
ここの項目を表示しない一番簡単な方法は、フォームエリアに何もタイトルを記入しないことですが、
記入しないと、それぞれのページのタイトルも表示されなくなっちゃます ＾＾；
お店案内は必要がなければ、無記入でも大丈夫です。
まずは、スタイルシートから
使っているテーマの
.footnavi
っていうのを探します。
ご存知かと思いますけど、文字列を検索するときは、
キーボードの「 Ctrl 」＋「 F 」で簡単に見つけることができます。
.footnavi というクラスに
display: none;
を追加します。
これで見た目はとりあえず表示されなくなります。（ソース上は表示されています）
さて、次はそれっぽいフッターナビを作るスタイルシートを。。
と、その前に、コピーライトの項目で単純に項目 ｜ 項目 ｜ 項目 っていうやりかたもありです ＾＾；
スペースと右側につける ｜ が面倒くさいときは、このスタイルシート↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | #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は↓
1 2 3 4 5 6 7 8 | <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> |
これで好きな項目を表示することができます。
あとは、
1 2 3 | <div class="footnavi"> と <div id="copyright"> |
っていうところのマージンとかパディングを調整して見た目を整えれば完成です。
そのあとの、コピーライト部分は普通に記述してください。
こちらも合わせてご覧ください - このページの内容と関連がある記事 -
コメントをいただけると励みになります！よろしくお願いします。
Blog info
Recommend Servers
