レスポンシブデザインで共通パーツを読み込む

PCとスマホの共通パーツを埋め込む場合、PCとスマホにそれぞれ独自ページを作成するとそれぞれのデバイス向けに最適化された表示がされていいのですが、運用上手間が１つ増えてしまう問題があります。
そこで、PCとスマホの共通パーツをPCの独自デザインを利用して読み込み、レスポンシブに表示する方法をご紹介します。

PC版のブランクページBを利用して独自ページにて作成

PCとスマホ、共に独自デザインが用意されていますが、共通パーツとして利用するためには、PCの独自ページを利用する必要があります。今回は共通パーツですから、ページのどこかにjs等でロードして利用することを想定しています。

また共通で読み込むために、ページヘッダ情報や余計なhtmlの情報を入れたくはありません。そういう場合は、PCの独自ページの設定にて「独自ページタイプ」を「ブランクページB」を利用する必要があります。この「ブランクページB」のみが唯一、ヘッダ情報を出力しないページの作成方法となります。

brankBを利用

サンプルコード

html側はロードする箇所を次のようにします。この#loadWrapの中にコンテンツを読み込みます。

<!--
ロード（表示）する側のhtmlの例
PC・SP共通です。
※読み込む独自ページのuriが/html/page2.htmlとする場合
-->

<div id="loadWrap"></div>
<script>
$(function(){
 $('#loadWrap').load('/html/page2.html');
});
</script>


<!--
makeshopの独自ページ例
独自ページはブランクページBにて設置
-->
<div class="loadArea">
 <div class="content">
  <h3>ロードされるコンテンツタイトル</h3>
  <p>ロードされています</p>
 </div>
</div>


<!--
結果
id=loadAreaの中に、/html/page2.htmlが読み込まれる形になる
-->
<div id="loadWrap">
<div class="loadArea">
 <div class="content">
  <h3>ロードされるコンテンツタイトル</h3>
  <p>ロードされています</p>
 </div>
</div>
</div>

CSSの例

cssはPCとSPそれぞれに書いても良いのですが、共通項目ですので、例えば次のように記載すると便利です。

#loadWrap .loadArea {
/* CSSもPCとSPの共通パーツとして利用するので、相対値を利用する。 */
width:94%;
margin:auto;
}

#loadWrap .loadAra h2 {
font-size:1.25rem;
font-weight:800;
}