Xeory Extensionのトップページを改造
トップページ上部のスペースの修正に苦戦しました。 内容としては、背景をパーティクルに変更しています。 現在は何とかキレイに収まって下記の画像の様になっています。
今回の作業内容は、 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を使う時はすんなり使いたいです。