2カラムページの横幅を変えたいです。

VWSとは フォーラム Lightning 2カラムページの横幅を変えたいです。

2カラムページの横幅を変えたいです。

  • このトピックには6件の返信、3人の参加者があり、最後にVektor,Incにより5年前に更新されました。
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #25852

    et
    参加者

    度々お世話になります。
    Lightning proと訪問介護サービスのコンテンツを利用しています。
    現在1カラムの固定ページと2カラムの固定ページの両方でコンテンツを
    作っているのですが、2カラムのページのみメインページ幅を広く、サイドバー幅を狭くしたく、
    CSSを利用すると、サイドバーの利用者の声ボタンや採用情報のバナーが
    下に落ちてしまうと共に、1カラムページの記事幅も同時に変わってしまいます。
    2カラムページのみ幅を変更する方法はないでしょうか。
    文字を横に多めに書きたいので、幅を広げたいのですがどうも上手く行きません。。。

    #25855

    DRILL LANCER
    モデレーター

    使用しているスキンによって対応方法が変わってきます。
    (特に Bootstrap 3 ベースのスキンなのか Bootstrap 4 ベースのスキンなのかが重要です。)

    【重要】Lightning 7.0 / Lightning Pro 2.0 での仕様について


    なのでどのスキンを使用しているのか教えていただけますか?
    スキンは 外観 > カスタマイズ > Lightning デザイン設定 から変更できます。

    P.S.
    1行あたり全角 35 ~ 40 文字あたりが読みやすいという説をよく目にします。
    そこを踏まえて幅を設定したほうがいいと思います。

    #25858

    et
    参加者

    失礼いたしました!スキンは
    Origin ||(Bootstrap 4)を使用しています。
    写真画像の横に文字を並べたい関係で、もう少しだけ記事幅を広げたいのですが
    なかなか上手くいかなくて…苦戦しております。

    #25871

    DRILL LANCER
    モデレーター

    下記をベースに調整すると良いでしょう。

    @media (min-width: 992px) {
    	/*メインセクション*/
    	.mainSection-col-two {
    	    width: 66.6667%;
    	}
    	/*サイドバー*/
    	.sideSection-col-two {
    	    width: calc(33.3333% - 3em);
    	}
    }

    ちなみに、66.6667% + 33.3333% = 100% となることを踏まえて調整してみてください。

    #25944

    et
    参加者

    RICKさん、いつも有難うございます!!!
    無事に設定する事が出来ました。
    ちなみになのですが、 別件でヘッダーロゴをもう少し左に寄せる方法はないでしょうか?
    というのも、メニュー項目が多く、段落ちしてしまいます。
    過去ログを検索したところロゴ画像サイズを小さくするか、メニューの文字サイズを小さくするかで
    解決すると拝見したのですが、元々のロゴの位置の左に余白があるのが気になります。
    もっとロゴを左に寄せる、またはメニューの右にも余白があるのでどちらかを寄せる設定をして
    段落ちを防げないでしょうか?

    #25951

    DRILL LANCER
    モデレーター

    定規を使えばわかると思いますが・・・
    ロゴの左端はサイト全体(全幅エリアを除く)の左端と一致していて、
    メニューの右端はサイト全体(全幅エリアを除く)の右端と一致しています。

    なので安易にそこを変更することはおすすめできません。

    あえて、メニューを段落ちさせて、ロゴを中央揃えにするのが最も早い解決策のような気がします。

    @media (min-width: 1200px) {
        .gMenu_outer,.gMenu {
            float: none;
            right: unset;
            margin-left: auto;
            margin-right: auto;
        }
        .siteHeader_logo {
            float: none;
        }
        .navbar-header {
            text-align: center;
        }
    }
    #26032

    Vektor,Inc
    キーマスター

    メニュー項目が段落ちするほど多いという事は、ユーザーがぱっと見て自分の目的を判断し辛い数という事なので、親子メニューに纏められるものは纏めてメインメニューの項目は減らし、アピールしたい項目であれば、トップページメインエリアやサイドバーなどにバナーを配置して導線を強化する方が良いかと思います。

7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • このトピックに返信するにはログインが必要です。