一回折れた人

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

Xeory Extensionのトップページを改造

トップページ上部のスペースの修正に苦戦しました。 内容としては、背景をパーティクルに変更しています。 現在は何とかキレイに収まって下記の画像の様になっています。

f:id:hpptms:20170921224116p:plain

今回の作業内容は、 1、ParticlegroundをDLしてwordpressで読込 2、ParticlegroundをHTML要素に適用 3、他パーツとの位置調整

30分くらいで出来ると思っていましたが、3時間くらいかかりました。

1、ParticlegroundをDLしてwordpressで読込 DLしてテーマフォルダに入れてあげてください。 次に使いたい箇所で読み込む必要がありますが、僕の場合はトップページなので、

<div id="main_visual">
    <!--パーティクル背景に設定-->
    <script src="http://hpptms.dip.jp/wp-content/themes/xeory_extension-child/js/particleground-master/jquery.particleground.min.js"></script><!--ファイルだけ読込-->
    <div id ="main_visual_wrap"class="wrap">
        <h2><?php echo nl2br(get_option('top_catchcopy'));?></h2>
        <p><?php echo nl2br(get_option('top_description'));?></p>
    </div><!-- .wrap -->
</div>

読込はこれだけです。

2、ParticlegroundをHTML要素に適用 先ほどのファイルに記述しても良いのですが、僕の場合、「footer.php」というファイルで実行させました。 理由は、Particlegroundの読み込みを行ったファイルに記述した場合、[Uncaught TypeError: $ is not a function]というエラーが出たからです。 このエラーは「$」という定数が使えない(jQueryが使えないよ)という意味だそうです。

ですが、仮にjqueryが読み込まれている場合(WordPressはページを表示する際ほぼ読み込んでいます)、

jQuery(function($){
//中では$を使ったコードが読み込める
});

上記のように書いて、中にコードを書けば動作するようです。 僕の場合は、main_visual要素が修飾される箇所でjQueryを使用している場所があったので、そこに追記しました。

// トップページメインビジュアル
$(function(){
  h = $(window).height();
  h = h/2; //追加
  hp = h * .3;
  $('#main_visual').css('height', h + 'px');
  $('#main_visual .wrap').css('padding-top', hp + 'px');
    //main_visualをパーティクルに
    $('#main_visual').particleground({
        dotColor: '#5cbdaa',
        lineColor: '#5cbdaa',
        parallax: false
    });
});

これで背景はパーティクルになりました。

3、他パーツとの位置調整 次に元々あった文字のスペースを調整します。 これが手間取りました。 位置調整はCSSで行うのですが、HTMLの要素を重ねる場合、いくつか方法があって、 positionというプロパティを使用すれば比較的簡単に調整が出来ます。

今回設定したCSSが下記になります。

/*トップページのmain visualの背景をパーティクルに設定して、背面に回り込み*/
#main_visual{
    z-index: 1;
    position: relative;
}

.pg-canvas {
    z-index: 2;
    position: absolute;
}

#main_visual_wrap{
    z-index: 3;
    position: absolute;
    width: 100%;
}

使っているプロパティは3つだけです。 z-index:要素が重なった時の順番、右の数字の値が大きいほど上に表示される 机の上にお皿があって、お肉がある場合。 机(1)の上にお皿(2)があって、お肉(3) の様なかんじです。

width:横の幅です。100%とした場合、他のプロパティの影響もありますが、出来る限り横に広くスペースを取ります。

position:指定出来るオプションが「static、relative、absolute、fixed」 最初のstaticはデフォルトで指定されているので、それ以外を使用します。 今回このpositionに手間取って時間がかかってしまいました。 次回positionを使う時はすんなり使いたいです。