Diviサイドバーの境界線を削除する方法

公開: 2021-07-25

ほとんどすべてのDiviユーザーがDiviテーマの操作方法を知りたがっているのは、サイドバーの境界線を削除することです。幸い、これは簡単な作業です。これはコードで実行できますが、さらに重要なのは、Divi ThemeBuilderを使用して簡単に実行できることです。この記事では、両方の方法を使用してDiviサイドバーの境界線を削除する方法と、Diviテーマビルダーを使用すると最良の結果が得られる理由を説明します。

デフォルトのDiviサイドバー

Diviのデフォルトのページと投稿のレイアウトは、コンテンツとサイドバーの間に線を引きます。サイドバー要素の多くは、テーマカスタマイザーを使用してスタイル設定または調整できますが、この行はそれらの1つではありません。これは、WordPressのオプションが不足している領域です。

デフォルトのDiviサイドバー

Diviテーマオプションを使用すると、サイドバーを右または左に移動できますが、スタイリングオプションは含まれていません。

デフォルトのDiviサイドバー

Diviは、ページと投稿レベルでサイドバーのレイアウトを選択できる設定も追加します。これには、ウィジェットが表示されないようにサイドバーを削除するオプションも含まれているため、コンテンツ領域でWebページの全幅を使用できます。

これらのオプションを使用すると、レイアウトを制御できますが、スタイルを制御することはできず、サイドバーの境界線は削除されません。 Diviサイドバーの境界線をスタイル設定または削除する2つの方法を見てみましょう。

コードを使用したDiviのサイドバー境界線の削除またはスタイリング

まず、Diviにコードを追加して、Diviテーマのサイドバーの境界線を削除またはスタイル設定する方法を見てみましょう。

DiviテーマオプションのカスタムCSSフィールドにCSSを追加する必要があります。 [カスタムCSS]フィールドにアクセスするには、WordPressダッシュボードメニューの[ Divi] > [テーマオプション]に移動します。 [全般]タブにとどまり、設定の一番下までスクロールしてコードを貼り付けます。

必要なCSSは次のとおりです。

#main-content .container:before {
width:0;
}
.et_pb_widget_area_right { border-left:0 !important; }
.et_pb_widget_area_left { border-right:0 !important; }

このコードは、ウィジェット領域の境界線に幅がなく、表示されないことをWordPressに通知します。

コードを使用したDiviのサイドバー境界線の削除またはスタイリング

コードを[カスタムCSS]フィールドに貼り付けて、変更を保存します。

コードを使用したDiviのサイドバー境界線の削除またはスタイリング

境界線が削除されました。 CSSはDiviテーマと連携してサイドバーの境界線を削除しますが、理想的ではなく、すべての人があらゆる種類のコードを処理したいとは限りません。 Divi Builderを使用してブログページを作成する場合はどうなりますか？最良のオプションは、Diviテーマビルダーを使用することです。

Diviのテーマビルダーを使用してコードなしでDiviサイドバーの境界線を削除する方法

Diviテーマを使用して、コードなしでサイドバーの境界線を削除することもできます。 WordPressダッシュボードメニューでDivi > Theme Builderを選択して、Divi ThemeBuilderに移動します。ブログのレイアウトがまだない場合は、[新しいテンプレートの追加]を選択します。

このテンプレートは、ブログページ、アーカイブページ、またはその他の必要なページに割り当てられるため、最初にこのページを作成しておく必要があります。