【Xeory Extension】カスタマイズ：メインビジュアルを画像に変更する（レスポンシブ）

前書き

バズ部さんの無料テンプレートXeory Extensionをカスタマイズする機会がありました。
見た目がかっこよく、シンプルかつ大きめの要素でインパクトのあるテンプレートです。

メインビジュアルはデフォルトでは、「シンプルなテキスト」のみです。
キャッチコピーというかんじです。

xeory4

ですが画像にします。

テンプレート自身はレスポンシブなのですが、メインビジュアルに画像を設定し、かつレスポンシブとするのに
ちょっと迷いました。
Xeoryカスタマイズ関連で検索しても、記事が見当たりませんでした。

そのため自分のためのメモです。

メインビジュアルを画像にする

メインビジュアルを一時的にPAKUTASOの猫にしました。

レスポンシブです。

編集ファイル

テーマの編集ファイルは2ファイルです。

front-page.php

id=main_visualの下に画像を挿入する。
画像のwidthとheightを必ず記述する。heightを記述しないと表示されない。

<div id="main_visual">
<img src="http://aldila.ciao.jp/wp-content/uploads/2015/06/HIR93_sofa-deneteiruneko-e1435643916782.jpg" width="2000" height="1325" />
  <div class="wrap">
    <h2><?php echo nl2br(get_option('top_catchcopy'));?></h2>
    <p><?php echo nl2br(get_option('top_description'));?></p>
  </div><!-- .wrap -->
</div>

footer.php

「トップページメインビジュアル」から下のfunction2つ（#main_visualが関わるところ）を両方コメントアウト。
これをしないと、スマホ幅になったときに画像下に余分すぎる余白が入る。
デフォルトのメインテキストを利用するときのみに必要なものなので、画像にする場合は必要ない。

// トップページメインビジュアル
/*
$(function(){
  h = $(window).height();
 // hp = h * .3;
 hp = h;
  $('#main_visual').css('height', h + 'px');
  $('#main_visual .wrap').css('padding-top', hp + 'px');
});

$(function(){
	if(window.innerWidth < 768) {
  h = $(window).height();
  hp = h * .2;
  $('#main_visual').css('height', h + 'px');
  $('#main_visual .wrap').css('padding-top', hp + 'px');
	}
});
*/