ページの途中で全幅コンテンツを掲載する方法（Lightning対応）

WordPressで固定ページや投稿ページを作る際、通常はテーマの中央幅にコンテンツが制限されます。しかし、ページの途中で「画面の端から端まで広がる全幅コンテンツ」を掲載したい場合があります。function.phpにコードを追加して、ショートコード[fullwidth]で自由に記事中に全幅コンテンツを埋め込めます。

1 function.phpにコードを追加

//-------------------------------------------
// 全幅セクションを出力するショートコード
//-------------------------------------------
function shortcode_fullwidth_section( $atts, $content = null ) {
    return '
    <div class="l-full-width-section">
        <div class="l-inner">' .
        do_shortcode($content) .
        '</div>
    </div>';
}
add_shortcode('fullwidth', 'shortcode_fullwidth_section');

2 汎用CSS

/* -----------------------------
 * 全幅セクション
----------------------------- */

/* 基本構造：全幅セクション */
.l-full-width-section {
  position: relative; /** 位置基準を設定 **/
  left: 50%; /** 親の中央基準に寄せる **/
  right: 50%; /** 左右基準を中央に **/
  width: 100vw; /** ビューポート全体の幅を使用 **/
  margin-left: -50vw; /** 左側のはみ出しを補正 **/
  margin-right: -50vw; /** 右側のはみ出しを補正 **/
  background: linear-gradient(180deg, #ffe8b3 0%, #ffffff 100%); /** 背景グラデーション（hero用） **/
  text-align: center; /** 中央寄せ **/
  padding: 100px 20px; /** 上下余白 **/
  box-sizing: border-box; /** パディング含めて幅を計算 **/
}

/* 内側の中央整列用 */
.l-full-width-section .l-inner {
  max-width: 1200px; /** コンテンツ中央寄せ用（お好み） **/
  margin: 0 auto;
}

/* hero セクション（中の文字スタイル） */
.hero h1 {
  font-size: 2.2em;
  font-weight: 700;
  line-height: 1.5;
  color: #6b4a24;
  margin-bottom: 20px;
}

.hero-sub {
  font-size: 1.1em;
  color: #7a5a2e;
}

3 HTML構造

[fullwidth]
<section class="hero">
  <div class="hero-inner">
    <h1>柴犬の笑顔で毎日に癒しを。<br>優しい時間をあなたのそばに。</h1>
    <p class="hero-sub">今日も元気にしっぽをふる柴犬と過ごす、心温まるひとときを。</p>
  </div>
</section>
[/fullwidth]

記事内で表示する場合：

[fullwidth]
[/fullwidth]
  

4 完成イメージ

Lightning デザイン設定で「１カラム」に設定する。

ショートコートを入れると

▶ 全幅コンテンツ

5 まとめ

• Lightning： ショートコードとCSSを組み合わせることで、ページ途中にも全幅コンテンツを安全に表示できます。
• Gutenbergの全幅ブロック機能に加え、CSSを使えばクラシックエディタでも柔軟に対応可能です。
• [fullwidth][/fullwidth] ショートコードを使えば、本文の中で簡単に全幅セクションを挿入できます。
• 背景色や画像を設定することで、ページの区切りや強調セクションとして効果的に使えます。

この方法を活用すれば、見出し直後に大きなビジュアルブロックを配置したり、キャンペーン情報などをページ幅いっぱいに見せることができ、デザインの自由度が大幅に向上します。