ベストセラー人気 WordPress テーマTop 30 詳細

Diviでサイドバーの幅を1 / 4で1 / 3に変更する方法

Last Updated:2020年11月14日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

Diviテーマのサイドバーの幅を変更する

Elegant ThemesのDiviテーマでサイドバーの幅(幅)は、基本的には20.875%であり、左側のコンテンツ領域は79.125%に設定されています。

ページでは、サイドバーモジュールを追加して1分の3または1分の4などの幅で追加することができますが、基本的なページ/記事のサイドバーは、デフォルトで固定されています。 場合によっては、デフォルトの設定の幅が非常に狭く見えることがあります。

この場合、次のCSSコードを追加して、右のサイドバーの幅を変更することができます。

#left-area{width: 66.67%;}
#sidebar{width: 33.33%;}
.et_right_sidebar #main-content .container::before {
right: 33.33% !important;
}

DiviテーマでCSSコードは Divi>テーマオプション>一般>ユーザーカスタマイズCSSに追加することができます。 またはチャイルドテーマ(子テーマ)を作成し、スタイルシートファイルに追加することも可能です。

このブログでは、サイドバーの幅が狭すぎるようで、まったくなくしてしまってFull widthにするか考えてから、上記のコードを応用して幅を調整しました。

Diviで全体の幅で文を表示する場合は、次のようなコードを使用してみることができます。

.single-post .container:before {
display: none!important;
}
.single-post #left-area {
width: 100% !important;
}

.single-post #sidebar {
display: none;
}

上記のコードは、テストしてみなかったが、特に問題なく動作します。 ユーザーがコンテンツに集中できるように、全体の幅に調整することもまともな方法です。

Diviテーマはシンプルで強力な機能を提供し、速度面でも大丈夫なようです。 (個人的な経験上 Themeforestの WordPress テーマの場合 Enfoldもまともな速度を示しました。 Enfoldは国内でもユーザーが多いです。)

Diviでサイドバーの幅を1/4から1/3に変更する方法2

メモ:



コメントを残す

コメント