本文へ移動
Webstudio YAS
  • About
  • Price
  • Work
  • Blog
  • Contact
  • About
  • Price
  • Work
  • Blog
  • Contact
  1. ホーム
  2. Blog
  3. 【WordPress】LION BLOGのカラム幅の割合を変更する方法

公開日: 2019.08.29

【WordPress】LION BLOGのカラム幅の割合を変更する方法

【WordPress】LION BLOGのカラム幅の割合を変更する方法

LION BLOGのページ幅を変更する記事「【WordPress】LION BLOGのページ幅を変更する方法」を書きましたが、2カラムの場合の記事とサイドバーの幅のバランスも変更したくてやってみました。
こちらもページ幅の変更と同じで、「追加CSS」に下記のように書き込むだけで可能です。今の所不具合ありませんが、これで正解なのかなぁ?

/* 2カラム記事の幅 */
.l-main {
    width: 75%;
}
@media only screen and (max-width: 767px){
    .l-main {
        width: 100%;
    }
}
/* 2カラムサイドバーの幅 */
.l-sidebar {
    width: 25%;
}
@media only screen and (max-width: 767px){
    .l-sidebar {
        width: 100%;
    }
}
/* 2カラム真ん中のライン */
.l-main::before {
    right: 25%;
}

l-mainというクラスが記事部分、l-sidebarというクラスがサイドバーのようです。それぞれ足して100%になる割合でwidthを指定してあげればOK!
ちなみにデフォルトでは、67.5%:32.5%という微妙な割合でした。

@media only screen and (max-width: 767px)というところは、スマホの場合の幅を指定する部分ですが、こちらはデフォルトのままです。デフォルトのままなら書く必要ないと思ったんですが、書かないと動いてくれないようです。(なんで?)

最後の、2カラム真ん中のラインというのは、サイドバーとの境目のラインの事で、これも指定しないと見た目がおかしいです。rightをサイドバーの幅の割合と同じにするといいようです。

タグ

  • css
  • LION BLOG
  • WordPress
  • カラム幅
  • 割合
  • 方法

関連記事

2022.01.21

Crayon Syntax Highlighterからhighlight.jsに乗り換える

Crayon Syntax Highlighterからhighlight.jsに乗り換える

2022.01.28

All-in-One WP Migrationのインポート容量(最大アップロードサイズ)を増やす

All-in-One WP Migrationのインポート容量(最大アップロードサイズ)を増やす

2019.05.08

WordPress内で自作のプログラム(PHPやJavaScript)をincludeして動かす方法

WordPress内で自作のプログラム(PHPやJavaScript)をincludeして動かす方法
Webstudio YAS
  • About
  • Price
  • Work
  • Blog
  • Contact
YAS プロフィール画像

長野県長野市在住
WEBエンジニア YAS

LINKS

  • X
  • Instagram
  • GitHub
Design
  • スタンダード
  • 和モダン
  • エンジニア
  • 信州ナチュラル
プライバシーポリシー

@ Webstudio YAS