Vektor WordPress Solution
VWSとは › フォーラム › Lightning › 2カラムページの横幅を変えたいです。
度々お世話になります。 Lightning proと訪問介護サービスのコンテンツを利用しています。 現在1カラムの固定ページと2カラムの固定ページの両方でコンテンツを 作っているのですが、2カラムのページのみメインページ幅を広く、サイドバー幅を狭くしたく、 CSSを利用すると、サイドバーの利用者の声ボタンや採用情報のバナーが 下に落ちてしまうと共に、1カラムページの記事幅も同時に変わってしまいます。 2カラムページのみ幅を変更する方法はないでしょうか。 文字を横に多めに書きたいので、幅を広げたいのですがどうも上手く行きません。。。
使用しているスキンによって対応方法が変わってきます。 (特に Bootstrap 3 ベースのスキンなのか Bootstrap 4 ベースのスキンなのかが重要です。)
【重要】Lightning 7.0 / Lightning Pro 2.0 での仕様について
なのでどのスキンを使用しているのか教えていただけますか? スキンは 外観 > カスタマイズ > Lightning デザイン設定 から変更できます。
P.S. 1行あたり全角 35 ~ 40 文字あたりが読みやすいという説をよく目にします。 そこを踏まえて幅を設定したほうがいいと思います。
失礼いたしました!スキンは Origin ||(Bootstrap 4)を使用しています。 写真画像の横に文字を並べたい関係で、もう少しだけ記事幅を広げたいのですが なかなか上手くいかなくて…苦戦しております。
下記をベースに調整すると良いでしょう。
@media (min-width: 992px) { /*メインセクション*/ .mainSection-col-two { width: 66.6667%; } /*サイドバー*/ .sideSection-col-two { width: calc(33.3333% - 3em); } }
ちなみに、66.6667% + 33.3333% = 100% となることを踏まえて調整してみてください。
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; } }
メニュー項目が段落ちするほど多いという事は、ユーザーがぱっと見て自分の目的を判断し辛い数という事なので、親子メニューに纏められるものは纏めてメインメニューの項目は減らし、アピールしたい項目であれば、トップページメインエリアやサイドバーなどにバナーを配置して導線を強化する方が良いかと思います。