WordPressテーマSANGOの質問

フッターウィジェット(左・中・右)のような画面の端一杯背景を1カラムの記事中にも使いたい

アバター
ツヨシ

フッターウィジェット(左・中・右)の背景のように「画面の端から端まで色付き背景」を1カラムの記事中にも使いたいです。
やり方をご教授いただければ幸いです。

使用用途は、LPやTOPページ(1カラム)のデザインとして使いたいと考えております。

お忙しいところ恐縮ですが、何卒宜しくお願い致します。

SANGO
SANGO 質問ガイドライン
コメントへの回答
サルワカくん
サルワカくん
2020/03/20

記事中で画面幅いっぱいに表示するのは簡単なようで難しかったりします。例えるなら、「10階建てのビルのうち4階だけ改装してフロアの面積を広げたい」みたいな感じです。
ただ、すっごいテクニック的なことをすれば可能なので参考までに紹介させていただきます(1からオリジナルのテンプレート作る方が楽かもしれませんが)。

まず、その部分を次のようなHTMLにします。

<div class="alignfull">
  <div class="alignfull-inner">
     中身  
  </div>
</div>

そのうえで次のようなCSSを指定します。

/* ここで無理やり画面いっぱいに広げる */
.alignfull {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  max-width: 100vw !important;
  background: #EFEFEF; /* 背景色 */
}
.alignfull-inner {
  max-width: 920px; /* 中身の幅 */
  margin: 0 auto; /* 中身を中央寄せ */
  padding: 2.5em 1em; /* 中身の余白 */
}

細かい調整などはCSSがある程度書けないと難しいかもしれません・・・。
よろしくお願いします。

アバター
2020/03/22

お忙しいところご返信頂き、またとてもわかりやすくご教授いただきましてありがとうございます。
そして、幅一杯に調整するのは難しいのですね…。

サルワカさんに教えて頂いたコードにてデザインさせていただきました!
幅一杯に表示されたのですが、左側に余白が発生してしまいました…。

こちらの原因についてご教授頂けたら幸いです。
度々で申し訳ございませんがよろしくお願い致します。

サルワカくん
サルワカくん
2020/03/22

ご理解いただきありがとうございます!
おや、本当ですか…
どこかのページで問題が発生している状態にしていただき、そのURLを教えていただくことは可能ですか?

アバター
2020/03/22

サルワカさん、お忙しいのに度々申し訳ございません。

「トップページ用1カラム(タイトル出力なし)」でページを作成すると、左側に空欄が寄ってしまう事がわかりました。

1カラム表示(サイドバー無し)であれば、問題なく表示されました!

トップページ用1カラムで利用したいと考えておりましたm(_ _)m
お忙しいところ申し訳ございませんがもし可能であれば改善方法をご教授いただきたく思います。

サルワカくん
サルワカくん
2020/03/22

なるほど!そういうことですね。
調べたところ、さきほどのCSSにくわえて以下のCSSも追加しておくと、トップページ用1カラムテンプレートでもズレがなくなるのではないかと思います。

.page-template-page-forfront #inner-content {
    display: block;
}

よろしくお願いします!

アバター
ツヨシ
2020/03/22

サルワカさん、何から何まで教えて頂き本当にありがとうございました。
無事に表示される事ができました。

今後ともよろしくお願い致します。
お忙しいところ、ありがとうございました。

サルワカくん
サルワカくん
2020/03/22

うまくいったようで良かったです!
丁寧なご報告ありがとうございました。