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

[瑛梨香滝原]

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

[RICK]

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

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

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

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

[瑛梨香滝原]

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

[RICK]

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

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

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

[瑛梨香滝原]

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

[RICK]

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

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

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

@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;
    }
}

[Vektor,Inc]

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

[投稿者]

投稿