Xeory Extensionのカスタマイズ トップページの大きいスペースを小さく
トップページのヘッダーのすぐ下の大きなスペースを小さくしたいのですが、 どうやらCSSでもPHPファイルでも無く、javascriptで修飾されているようなので手間取っています。
今のトップページのスクリーンショット
CSS、PHP、javascriptの判断はchromeなどを使っていれば、 調べたい箇所で左クリックして「検証」を押すと分かります。
検証を押すと大きなスペースはmain_visualである事が分かりました。 ここまで分かればPHP側でチョチョイのチョイかと思ったのですが、
<div id="main_visual"> <div class="wrap"> <h2><?php echo nl2br(get_option('top_catchcopy'));?></h2> <p><?php echo nl2br(get_option('top_description'));?></p> </div><!-- .wrap --> </div>
PHPでは特に指定がされていないようです・・・。 今分かる事はPHPではstyleの指定はされていない、 CSSでも指定はされていない。 仮にPHP側のファイルに直接styleを記述しても後からjavascriptによって修飾されてしまうので、意味がない。 →該当のjavascriptを修正。
先ほど検証で開いたchromeのデバックツールから上のタブのSourcesを選択します。 javascriptによって修飾される要素名を頼りに検索します。
そうするとjavascriptの中にそれっぽい記述がありました。
$(function() { h = $(window).height(); hp = h * .3; $('#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'); } });
chromeで該当の箇所で止めてみると、広がっていない事も確認出来ました。
次に該当のjavascriptが書かれているファイルを探すと、footer.phpの中に該当の箇所がありました。 ただ今更ですが、IDを指定して修飾しているので、要素のID名を書き換えればおそらく問題は解決出来そうなんですよね・・・。
<div id="main_visual_custom">※自分でID名を指定 <div class="wrap"> <h2><?php echo nl2br(get_option('top_catchcopy'));?></h2> <p><?php echo nl2br(get_option('top_description'));?></p> </div><!-- .wrap --> </div>
ただそうすると、またCSSの指定だったり色々と作業が発生するので、 修飾時に適応されるサイズを2分の1にしてみたいと思います。
// トップページメインビジュアル $(function(){ h = $(window).height(); h = h/2; //追加 hp = h * .3; $('#main_visual').css('height', h + 'px'); $('#main_visual .wrap').css('padding-top', hp + 'px'); }); $(function(){ if(window.innerWidth < 768) { h = $(window).height(); h = h/2; //追加 hp = h * .2; $('#main_visual').css('height', h + 'px'); $('#main_visual .wrap').css('padding-top', hp + 'px'); } });
上記に変更したところ、下記のようになってトップ画面のスペースが小さくなりました。 そもそも何も表示していないので、無くてもよさそうですが、なんか表示してシャレオツな感じにします。