Wordpress：ブログの余白を消すことができない。

Question

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

Wordpressについての質問です。

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

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

要望

私は、このトップページだけ余白を消したいのです。
どうやったら余白を消すことができるでしょうか？

###：CSSコード

<?php /* Template Name:シングルカラムTPL */?>
<?php get_header(); ?>
    
  <!-- l-wrapper -->
  <div class="l-wrapper">
	
    <!-- l-main -->
    <main class="l-main l-main-single<?php if ( get_option('fit_theme_singleWidth') == 'value2' ):?> l-main-w740<?php endif; ?>
    <?php if ( get_option('fit_theme_singleWidth') == 'value3' ):?> l-main-w900<?php endif; ?>
    <?php if ( get_option('fit_theme_singleWidth') == 'value4' ):?> l-main-w100<?php endif; ?>">
	
	  <?php fit_breadcrumb(); ?> 
      
      <article> 
      <h1 class="heading heading-primary"><?php the_title(); ?></h1>
	  
	  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
      <section class="content content-page">
	    <?php the_content(); ?>
      </section>
	  <?php endwhile; endif; ?>
      
      </article> 
 
      
    </main>
    <!-- /l-main -->
    
  </div>
  <!-- /l-wrapper -->

<?php get_footer(); ?>

試したこと

• メインテーマの、余白の部分をいじってみた（しかし、余白は消えなかった）
• 余白の消し方についての記事を約8時間探した（しかし、見つからなかった）

補足情報

Wordpressのバージョンは5.4.2です。
使用中のテーマは「lionblog」です

Answer 1

URLのサイトを参考に、修正案の提示

Lhankor_Mhyさんが教えていただいたURLのページを参照しまして、
修正案の提示をもって回答といたします。

1. div.l-wrapperに対して、トップページである場合に、特別クラス、ないし、IDを付与

仮に、#topModeを付与します。
（トップページであるかどうかの特別付与に関しては、テーマファイル（PHP）を提示いただかないと回答しようがない）
0. CSSにて下記を追加。

.l-wrapper#topMode {
  width: 100%;
  max-width: auto;
}

トップページに特別付与を行うのは、
テーマファイル（PHP）を提示いただければ、修正案を提示できますが、
いただけなければ、ご自身で頑張ってください。

下記は元回答

ソースコードの記載がないためなんとも、言えないので、やり方の例示の一つを回答しようと思います。

1. 余白が出る該当のブロックに、トップページの場合にだけ、特別クラスを付与する。

（WordPress関数一発で、トップの場合のみの処理が可能です）
0. その該当ブロックのセレクタ＋上記で指定したクラスが両方付いていた場合のみ、余白を調整するようなセレクタのスタイルを書く

以上でだいたいいけるかと思います。
構文は、質問者さんの現状のソースコードをいただけないと、書きようがありませんので、ご了承下さい。

Comments

[idealsblog]

大変申し訳ございません！
ソースコードを書き忘れました。
今日の21:20までに
ソースコードを載せますので、
しばしお待ちください！m(_ _)m

[miyabi_pudding]

わかりました。

その間に自身でも、WordPress トップページ だけCSS
などで、調査していきましょう。

[idealsblog]

まず、こちらがテーマのコードとなります。

[idealsblog]

html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6{font-size:100%;}
ol,ul,li,dl{list-style-position: inside;}
button,input,select,textarea{margin:0;}
html{
box-sizing:border-box;
line-height:1;
font-size: 62.5%;
}
*,*:before,*:after{box-sizing:inherit;}
img,embed,iframe,object,audio,video{max-width:100%;}
iframe{border:0;}
table{
border-collapse:collapse;
border-spacing:0;
}
td,th{
padding:0;
text-align:left;
}
hr{
height: 0;
border: 0;
}

/*ベース
/************************************************************/
body {
width:100%;
font-family: "Lato", "游ゴシック体", "Yu Gothic", "YuGothic", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo, Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
font-size: 1.4rem;
font-weight:500;
background:#F2F2F2;
color:#191919;
}
button, input, select, textarea{
font-family:inherit;
font-weight:inherit;
font-size: inherit;
}
a{
color:inherit;
text-decoration:none;
}

/*レイアウト
/************************************************************/

/*ヘッダー*/
.l-header{
display: flex;
flex-flow: column-reverse nowrap;
}

/*ヘッダーエクストラ*/
.l-hExtra{
position:relative;
width:100%;
background:#191919;
padding-top:10px;
}
.l-hExtra::after {
content: "";
display: block;
clear: both;
}

/*ヘッダーメイン*/
.l-hMain{
width:100%;
background:#323232;
}
.l-hMain::after {
content: "";
display: block;
clear: both;
}

/*ラッパー*/
.l-wrapper {
position:relative;
display: flex;
width:1100px;
max-width:95%;
margin: 0 auto;
}

/*メイン*/
.l-main {
width: 67.5%;
padding:60px 3.5% 60px 0;
}
.l-main::before {
position: absolute;
top: 0;
right:32.5%;
bottom: 0;
left:-100vw;
content: "";
background: #ffffff;
border-right:#E5E5E5 1px solid;
z-index: -99999;
}
.l-main.l-main-single {
width: 820px;
max-width:100%;
padding:60px 30px;
margin: 0 auto;
background: #ffffff;
border-left:#E5E5E5 1px solid;
border-right:#E5E5E5 1px solid;
}
.l-main.l-main-single::before {content: normal;}
.l-main.l-main-w740 {width: 740px;}
.l-main.l-main-w900 {width: 900px;}
.l-main.l-main-w100 {width: 100%;}

/*サイドバー*/
.l-sidebar {
width: 32.5%;
padding:60px 0 60px 3.5%;
}

/*フッター*/
.l-footer {
position:relative;
width:100%;
background:#191919;
}

[idealsblog]

これ以外のコードは、記事の中で使う機能（カレンダーやリスト等...）についてのコードだったので、恐らく関係ないと思われます。

[miyabi_pudding]

コメントではなく、
質問本文に、コードブロックを使って記載してください。質問文は修正できます。
```ここに言語名
ソースコード
```
という形式です。

あと、CSSだけでは解決できないので、
テーマのPHPのコードも、該当ブロックの部分でいいので記載ください。

[idealsblog]

PHPコードも載せますので少しお待ちください。

[idealsblog]

PHPコードを載せました！(｀･ω･´)ゞ

因みに私は、
PHPの中にある、「1カラム時の横幅」が、解決の糸口となっているのではと、勝手に解釈しております。

[miyabi_pudding]

PHPは・・・、これおそらく、function.phpの方ですよね？
できれば、HTMLが記載されているテンプレートの方を記載お願いしたいのですが、
難しいでしょうか？

[idealsblog]

HTMLが記載されているPHPテンプレートですか....
申し訳ございませんが、まだそれは見つかっていません。（5分の捜索では発見できなかった）
もうしばらくお待ちください...

もしよろしければ、
「一般的なテーマの場合、HTMLが載ってるテンプレートが、どこら辺にあるのか」
を、おおざっぱでいいので教えていただけると捜索が捗ります。m(__)m

[miyabi_pudding]

/wordpressがインストールされているディレクトリ/wp-content/themes/テーマ名/
にあります。

[idealsblog]

ありがとうございます！
大至急確認してくるので、しばしお待ちください。

[idealsblog]

夜遅くに返信をしてしまい申し訳ありません。
調査結果を報告します。

結論：
・HTMLが載ってるテンプレートは、ディレクトリ内から見つかりました

・but.少しの行しか見つかりませんでした。↓
上の「ＣＳＳのコード」から抜粋html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6{font-size:100%;}
ol,ul,li,dl{list-style-position: inside;}
button,input,select,textarea{margin:0;}
html{
box-sizing:border-box;
line-height:1;
font-size: 62.5%;
}
*,*:before,*:after{box-sizing:inherit;}
img,embed,iframe,object,audio,video{max-width:100%;}
iframe{border:0;}
table{
border-collapse:collapse;
border-spacing:0;
}
td,th{
padding:0;
text-align:left;
}
hr{
height: 0;
border: 0;
}
HTMLを利用している部分は、wp-contentのファイルの中ではここの部分しかありませんでした...
（少なくとも私が調べた限りでは）
ここに何かが隠れているのでしょうか。

[miyabi_pudding]

・・・・・
HTMLと言ったのが語弊があったようですね。
HTMLという文字列のことではなく、
Hyper Text Markup Language形式で記載されているプログラムファイルのことです。
WordPressの場合は、PHPファイルのことです。
WordPressのPHPテーマファイルには、HTML形式の記述がありますので。
HTMLという文字列で検索したら、そりゃ見つからないでしょうね。

[Lhankor_Mhy]

横からすみません。
直接サイトを見ちゃった方が早いのでは？

https://idealsblog.com/

[miyabi_pudding]

Lhankor_Mhyさん >
なんと、ユーザーIDがそのままドメインとは・・・。

[idealsblog]

＊削除済みです＊

[miyabi_pudding]

> おかげで、この問題は解決に進んでおります！

おお・・・、よかったですね。

> 私の技術不足が原因です

いえいえ、誰しも最初から技術なんてありませんよ。
次もまた疑問が出た時、teratailなどで質問する時も、
"要件定義"を意識して、質問してみてください。
実は、この要件定義をすることは、プログラミングの技術向上に重要なポイントです。
質問するために要件定義を整理していくうちに、質問する前に解決できちゃった、
なんてなればめっけもんです。
質問まで至っても、回答がすぐつくと思いますよ。

どうか頑張ってください。

[idealsblog]

ありがとうございます。

要件定義で、思考を整理しながら、今後も精進していきます。(｀・ω・´)

[idealsblog]

追記：私と同じ悩みを持ちながら、この記事を見つけた方向けに、問題となる箇所のPHPコードを
乗せときました。これで、一人でも多くの人が、楽に悩みを解決できると思います。