サポート » 使い方全般 » グローバルメニューを3列表示させてたい

14件の返信を表示中 - 1 - 14件目 (全14件中)
  • CSSに

    ul.menu-stinger{overflow:hidden;}
    li.menu-item{
    float:left;
    width;calc(33% -10px);
    margin-right:10px;
    }
    li.menu-item a{width:100%; overflow:hidden;}
    li.menu-item a img{width:100%; height:auto;}

    なんて書くと一番楽かもしれませんが。
    ソースさらっと見ただけなので、CSSの部分でもうちょっとシビアに見れば良いと思います。
    (↑結構はしょって書いてますので、サイズ見て設計してくださいね)
    li要素は特に指定しなければ、ブロック要素なので下の落ちます。
    古典的なやり方だと、フロートするか
    最近の、海外の雛形みるとdisplay:inline-block;などしてるものとかも多かったりします。

    ここの部分はCSSのサイトなど調べるといろいろ出てくると思います。
    古いブラウザーなどきにされないなら、CSS3なんかつかうと結構楽ですが
    フロートが無難といえば無難だと思います。

    liタグの後ろのスペースが厄介ですね。
    そのスペースを消してもいい場合、
    例えば以下のCSSで3列になります。

    header > nav ul {
        font-size: 0;
        list-style: none;
        padding: 0;
    }
    
    header > nav ul * {
        font-size: medium;
    }
    
    header > nav li {
        display: inline-block;
        vertical-align: top;
        width: calc(100% / 3);
    }
    
    header > nav img {
        width: 100%;
    }
    
    header > nav a {
        display: block;
    }

    スペースを消さずに使いたい場合は、
    以下のCSSで3列になります。
    widthの値が違います。

    header > nav ul {
        list-style: none;
        padding: 0;
    }
    
    header > nav li {
        display: inline-block;
        vertical-align: top;
        width: calc(100% / 3 - .21em);
    }
    
    header > nav img {
        width: 100%;
    }
    
    header > nav a {
        display: block;
    }

    では、よいWordPressライフをm(__)m

    トピック投稿者 dyagaimo

    (@dyagaimo)

    mura0403さん
    ありがとうございます!

    8suzuran8さん
    具体的なアドバイス、大変感謝いたします。

    さっそくCSSに入れました!
    ・・が変わりません。。

    ご指導よろしくお願いいたします。

    子セレクタのカッコがエスケープされて「>」になってしまってます(>ε<)

    トピック投稿者 dyagaimo

    (@dyagaimo)

    8suzuran8さん
    ありがとうございます!

    本当に素人な質問ですみません。
    子セレクタのカッコがエスケープされて「>」になってしまってます(>ε<)

    とは、どこを直せばいいんでしょうか??

    トピック投稿者 dyagaimo

    (@dyagaimo)

    8suzuran8さん
    たびたびすみません。

    「子セレクタのカッコがエスケープされて「>」になってしまってます(>ε<) 」
    は解決できたんですが、、
    3列でなくなってしまいました。。

    解決方法、お願いします!

    すいません、IEでダメでしたね><

    width: calc(100% / 3);

    width: calc(100% / 3 - .01px);

    に変更してくださいm(__)m

    トピック投稿者 dyagaimo

    (@dyagaimo)

    8suzuran8さん
    ありがとうございます!
    できました!ipad だけちょこっとおかしいですが。。

    ありがとうございます!

    すみません。
    もう少し質問させてください。
    9つのメニューの大きさを均等にしたいのですが、

    どのように指定するのがベストでしょうか?

    現在、それぞれの画像はwidth=”33%” height=”120″
    で指定してあります。
    pxを指定するの画面の大きさなどで見え方が変わる、、
    と聞いたので、どうしたものかと。。

    ご教授お願いします!

    「大きさを均等に」とは具体的にどんな感じですか?

    上下位置の場合、

    vertical-align: top;

    vertical-align: middle;

    に変えると、文字の上下位置は揃います。

    また、高さを同じにする場合、
    画像を、同じサイズに作りなおすのがベストだと思います。
    CSSで行う場合、僕なら、

    header > nav li {
    	height: 25vw;
    }
    
    header > nav a,
    header > nav img {
    	height: 100%;
    }

    でヤります。

    トピック投稿者 dyagaimo

    (@dyagaimo)

    8suzuran8さん
    おはようございます。
    ありがとうございます!ありがとうございます!
    画像はサイズを統一しました。
    おかげさまで3列表示になりました!!

    本当に感謝です。

    すみません、、、もしよろしければ。
    スマホも同じように常に記事上にメニューが並んでいるように表示したいのですが、、
    どのようにすればいいでしょうか。

    いまはメニューボタンを押すと
    縦長に9つメニューがでてきます。

    常にメニューが9つ表示されているようにしたいです。

    ご教授お願いします!!

    おはようございますm(__)m

    上で追加した
    「/* 複数列表示 */」の上で、一つカッコを閉じます。

    そして、一番下に、

    .smanone {
        display: block;
    }
    #menuarea {
        display: none;
    }

    を追加すると、出来ると思います。

    今回の件で追加したものも含めると、以下のようになります。

    }
    
    /* 複数列表示 */
    header > nav ul {
     font-size: 0;
     list-style: none;
     padding: 0;
    }
    header > nav ul * {
     font-size: medium;
    }
    header > nav li {
     display: inline-block;
     vertical-align: top;
     width: calc(100% /  3 - .01px);
    }
    header > nav img {
     width: 100%;
    }
    header > nav a {
     display: block;
    }
    .smanone {
     display: block;
    }
    #menuarea {
        display: none;
    }

    どうでしょうか?

    トピック投稿者 dyagaimo

    (@dyagaimo)

    8suzuran8さん
    できました!

    感激です><
    ありがとうございます。

    ここまで教えていただけるなんて
    全然思っていなかったので・・・

    欲がでてしまってます。。

    表示速度が遅く、
    Google pagespeed で調べるとモバイルが55です。

    サーバーを変えたり、色々とプラグインを変えているのですが
    なかなか改善されません。。

    もしアドバイスあれば、ご教授お願いします。

    ・・・欲張りすぎですよね。。

    いえ、いいと思いますよ(^^)

    でも、
    「グローバルメニューを3列表示させてたい」
    という内容とは、少し離れすぎなので、
    別の質問として出したほうが、
    色んな意見が集まっていいと思いますよ(^^)b

    トピック投稿者 dyagaimo

    (@dyagaimo)

    8suzuran8さん
    おっしゃる通りです。

    アドバイス、ありがとうございました!
    今後ともよろしくお願いいたします☆

14件の返信を表示中 - 1 - 14件目 (全14件中)
  • トピック「グローバルメニューを3列表示させてたい」には新たに返信することはできません。