ナビゲーションを線で区切りたい(非推薦)

ナビゲーションを線で区切れることは出来るが、あまりオススメはしません

新しいテンプレートでは、線を入れないことで窮屈感をなくしています。

例えば、上記のようなナビゲーションの場合、あまり違和感を感じることはありません。

ところが線を入れてしまうと、ナビゲーションのメニューが窮屈に見えてしまいます。

これをするなら文字列と線までの間にもっと余白がほしくなります。もちろんこれも可能です。

ですが、これをやると、メニューの数が増えた時に、改行が発生してしまいます。見苦しい

最初からこうならないように余白を狭くしてあるわけです。

このように区切り線が無い方がスッキリしますよね?だから区切り線を入れてないのです。

解決方法としては、予め背景色を入れること

ナビゲーションのデザインにもよりますが、最初からナビゲーションに薄い背景色を入れる方法があります。スタイルで、ナビゲーションをクリックして、予め薄い背景色を入れておきます。

でも、何もしないほうがスッキリ見えませんか? だからオススメしません。

それでも区切り線を入れたいんだよ!!っていう方のために

<style type="text/css">    

    .cc-nav-level-0 li a{border-right:1px solid rgba(0,0,0,0.2);}

    .cc-nav-level-0 li:first-child a{border-left:1px solid rgba(0,0,0,0.2);}

</style>

何もしていない状態

区切り線を入れた状態

背景色を当てた場合

線入りだけど余白も追加した例

余白を追加するには、赤い文字の部分を追加します。

<style type="text/css">    

    .cc-nav-level-0 li a{
    border-right:1px solid rgba(0,0,0,0.2);

    padding-left:30px;

    padding-right:30px;
}

    .cc-nav-level-0 li:first-child a{border-left:1px solid rgba(0,0,0,0.2);}

</style>

すべてのテンプレートで使用可能という訳ではありません。
一通り確認しましたが6割くらいのテンプレートでは使えるかなぁ~?
どうかなぁ?微妙かなぁ?って感じでした。

ご自分のテンプレートのスタイルと、メニューの数など、ご自分の目で確かめて使ってください。
ナビゲーションにメニューを突っ込むだけ突っ込んでいる人を見かけますが、クリックしてもらいたくないように思います。

1.情報は本当に見せたいものだけを見せる。
2.まとめることが出来るものは、まとめて階層化(子供のメニューにまとめる)させる

3.クリックしてもらいたいものを前にもって来るなど、並び順も大切ですね。

どうやってまとめたら良いかわからないという場合には、ご相談ください。
作業を伴わないのであれば、無料電話相談で承ります。>> 無料電話相談はこちらへ

▼ タグの貼り付け方はここ マウスを当てると画像が開きます。

この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。
メールアドレスを入力して登録ボタンを押してください。

コメントをお書きください

コメント: 2
  • #1

    川合勝 (金曜日, 07 8月 2015 16:33)

    有難う御座いました!!
    私の場合せいぜいページはトップも入れて7個程度で、背景色を付けているので色が混ざって、隣りのページだと2つのページが重なるので困っていました。
    此れで無事解決して嬉しい限りです。

  • #2

    PIK 村井 (土曜日, 08 8月 2015 12:26)

    川合さん

    非推薦の方法ですが、解決してよかったです!
    リクエストいただき、ありがとうございました。m(_ _ )m

株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422