(cache) 幅を制限したエントリーで、一部の要素のみ幅100%で表示する | a-blog cms | CMSテクニック集

最近は、高解像度のディスプレイを大胆に使ったデザインが人気です。
CMSベースのサイト構築でも、上の画像のような「最大幅を制限したエントリーの本文内で、一部の要素だけが幅100%になっているデザイン」が来ることがあります。

段組機能が利用できるCMS、特にa-blog cmsは、このような実装が難しくなっています。
仕様上、エントリーの本文全体をコンテナで囲まなければ、段組が成立しないからです。

<!-- bootstrapベースでテーマを作る場合 -->
<div class="container">
    <div class="row">
      （エントリーの本文）
    </div>
</div>

このようなデザインを実装する方法を2種類ご紹介します。a-blog cmsの記事として書いていますが、他のCMSで同じような状況になった時にも応用できます。

要素の開始前にコンテナタグを閉じる

よく利用されるのが「要素の開始前にコンテナタグを閉じてしまい、終了後に再びコンテナタグの開始タグを書く」という方法です。

HTMLを直接書くか、a-blog cmsであれば、表示用のテンプレート（/include/unit.html）をカスタマイズしておきます。

    </div>
</div>

<h2>見出し大(h2)です</h2>

<div class="container">
    <div class="row">

この方法には、いくつかの問題があります。

divタグが分断されてしまう: ログイン中にページが崩れる・ダイレクト編集機能が使えない・JavaScriptのエラーが起きやすくなるなどの不具合が生じます。
コンテンツ側でレイアウトを定義している: リニューアルなどでbootstrapベースではなくなった場合、該当箇所を全て修正する必要があります。エントリー中にHTMLを直接描いていた場合は目も当てられないことになります。

実は、CSSだけでこの問題を解決できます。以下の記事を参考に解説します。

ページ全体を任意のdiv要素で包括し、overflow:hiddenを指定します。

.outer-wrap {
overflow:hidden;
}

これをしておかないと横スクロールバーが出てしまいます。当然ですが、body要素やhtml要素に指定するとスクロールができなくなります。
もしも、コンテナタグやエントリー本文にoverflow:hiddenを指定していた場合は、解除しておいてください。

100%にしたい要素に、任意のクラスを指定しておきます。ここではh2要素に「entry-container-full」クラスを付けました。
a-blog cmsであれば、編集設定で設定することができます。

CSSの定義を以下の通り追加します。画面幅を大幅に超えるネガティブマージンと同値のパディングを指定すると、その要素は背景だけ100%になります。
a-blog cmsで公式テーマを仕様している場合、既存の定義の方が優先されてしまうので、idなどを追加して優先度をあげたほうが良いでしょう。

.entry-container-full {
    margin-left: -9999px;
    margin-right: -9999px;
    padding-left: 9999px;
    padding-right: 9999px;
}

CSSを使う方法は欠点が少なく、かつダイレクト編集機能も問題なく使えるのでおすすめですが、コンテナより内側にoverflow:hiddenを指定しなければならない場合は利用できません。

また、背景を画像にする場合、とても幅が広くなるためbackground-size: coverが使えません。画像が伸びきってトホホなことになります。

IE9以下、Android4.3以下を無視してよいなら、calcを使って適切な値を算出する手があります。一瞬崩れますが、同様の計算をjQueryで行ってもよいでしょう。