Wordpress:PHPとCSSを使った余白の消し方を教えてほしい

優しい方の回答をお待ちしております。(´･ω･`)

Wordpressについての質問です。

作成中のブログで、「トップページだけは画面をフルで使いたい」と思って、
サイドバーを消してカラムを1カラム（中心よせ）にしたら、このようになってしまいました。

＊ご覧の通り、両端に余白ができてしまっている。
この、両端の余白の部分は使うことができない。

###試したこと
トップページのwrapperの余白を消すために、
子テーマでトップページにID（or タグ）をつけて、
外観のカスタマイズの追加CSSで、先程子テーマでつけたIDをもとに、widthを変えたいのですが、書き方が分かりませんでした。

要望

どんなコードを子テーマと追加CSSに書けば、トップページ（wrapperの部分）の余白を消すことができるでしょうか。
###子テーマに書いたコード

PHP
1
2<?php if( is_front_page() ): ?>
3	ここに何を入れればいいのかがわからない。
4<?php endif; ?>

###：追加CSSに書いたコード

（ここに、トップページだけ判定する条件式を入れればいいのだが、その書き方がわからない。おそらく＃XXXを使うのだろうが...）  
.l-wrapper{
    position: relative;
    display: flex;
    width: 1100px;
    margin: 0;	
    width: 100%;
    max-width: auto;
    width: 1500px;
    }

試したこと

上に書いたコードを入力した。（重要な部分が欠けているため、当然動かない）

　　下記のサイトを調べ上げた
-（PHPでの条件分岐についてのページ）https://webdesignday.jp/inspiration/wordpress/4765/
-（トップページのときに、特別な処理を加える方法についての記事）
https://noumenon-th.net/programming/2016/06/30/is_home_is_front_page/

補足情報

サイトのURLはこちらです:https://idealsblog.com/
Wordpressのバージョンは5.4.2です。
使用中のテーマは「lionblog」です

行動規範の内容に同意します

回答1件

ベストアンサー

<body class="home ...">というように、bodyタグに「home」というクラスがあれば、
ホーム (≒トップページ) だけ固有のCSSを指定することが可能だと思います。

CSS
1/* 「body.home」 */
2body.home .l-wrapper {
3    /* 省略 */
4}

参考URL:
テンプレートタグ/body class - WordPress Codex 日本語版

HTML側にidやclassを追加し、CSSセレクタで特定のページにのみ効くCSSを記述できるようにする方法として、以下の記事も役立つかもしれません。

参考URL:
WordPress：body_class()に独自のclassを追加する方法＋代替で独自のidやclassのみをbodyに指定する方法

投稿2020/07/14 23:25

new1ro

総合スコア4528

idealsblog

2020/07/14 23:48

スマートなコードを教えてくれて、ありがとうございます！このコードでうまくいくか試してみます！＊また何か問題があったら、今日中にこのページに追記します。早朝から質問に答えてくださり、本当にありがとうございます！ (｀･ω･´)ゞ

idealsblog

2020/07/15 14:45

追記：実の事を言うと、この方法を試してみたのですが、どこかのコードを書き間違えているのか、まだ解決していません.... ですがこのトラブルは、new1roが教えてくださった方法を改良し続ければ解決するタイプの問題、いわゆる時間の問題だと思われますので、ご安心ください。これ以上new1roさんの時間を取るわけにもいかないので、あとは自分でなんとかして見せます(｀・ω・´)

new1ro

2020/07/15 22:50

bodyタグに、以下の記述はありますか? <body <?php body_class(); ?>> 別の方法として、以下の条件文など if (is_front_page()) { } https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/is_front_page ---- WordPressの場合、何もしなくてもbodyのクラスにそのページ固有のクラスが存在することがあると思うので、「home」に限らず固有のものがないか探してみてもいいかもしれません。

idealsblog

2020/07/20 20:54

アドバイスありがとうございます！そして、お返事が遅くなり申し訳ありません。あの後いろいろと調べた結果、lionsblogというテーマは、 <body <?php body_class(); ?>>の中のタグがいじれないようになっているようです.... new1roさんのおっしゃる通り、if(is_front_page()){}を使うのがいいのかもしれません。少し試してみます。もしかしたら、またWordpressについて何か質問するかもしれませんが、その時はよろしくお願いします。

行動規範の内容に同意します