一回折れた人

日々の出来事をつらつらと

Xeory Extensionのカスタマイズ トップページの大きいスペースを小さく

トップページのヘッダーのすぐ下の大きなスペースを小さくしたいのですが、 どうやらCSSでもPHPファイルでも無く、javascriptで修飾されているようなので手間取っています。

今のトップページのスクリーンショット

f:id:hpptms:20170921221710p:plain

CSSPHPjavascriptの判断はchromeなどを使っていれば、 調べたい箇所で左クリックして「検証」を押すと分かります。

f:id:hpptms:20170921221744p:plain

検証を押すと大きなスペースは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で該当の箇所で止めてみると、広がっていない事も確認出来ました。

f:id:hpptms:20170921221839p:plain

次に該当の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');
    }
});

上記に変更したところ、下記のようになってトップ画面のスペースが小さくなりました。 そもそも何も表示していないので、無くてもよさそうですが、なんか表示してシャレオツな感じにします。

f:id:hpptms:20170921221913p:plain