ウェブサイトに幾何学模様を追加した時の手順

①社長から要請され、調査開始

会社のホームページが静止画（JPEGやGIF）のみで作成されており、ホームページに動きを入れたいという要望を受け、色々と調査を開始し現状を把握する。

②幾何学模様の作り方を調査

　幾何学模様の動きが、個人的にイケていると思った。
　幾何学模様を、javascriptで作っている天才エンジニアを発見。
　『vincentgarreau.com』という下記のサイトで公開されている『particle JS』というJSライブラリを採用した。
　　particleJS のダウンロード

　particle JS を会社のホームページに取り込む方法は、下記のサイトを参考にした。
　　動くWebデザインアイデア帳

　上記のサイトは、近年の動きがあるウェブサイトやコーディング方法をまとめたサイト。
　デジタルハリウッドSTUDIO 講師が情報を提供している。
　情報量がいい感じの量◎、実際の作り方も手順を付けて説明してくれているのでわかりやすい◎

③テストページを作成し、３つのファイルの設定値を微調整

common.min.js のダウンロードサイトで、自分で設定をいじって、自分が作りたい図形・動きを行うソースコードを生成する。ソースコードは、『CodePen』ボタン押下することで、HTML／CSS／Javascript　の３つのソースコードが出力される。

④テストコードを本番サイトへ埋め込む

テストページを作成し、そこで作成したテストコードを微修正して、本番環境のウェブサイトへ埋め込む。

管理画面で実施したこと

追加CSSを定義する画面で「#particles-js」のスタイルを追加

　# 外観 > カスタマイズ > 追加CSS
　追加CSSにスタイルを記載すると、既存のCSSを読み込んだ後、定義したスタイルを追加で読みこんでくれる。

htmlに幾何学模様を表示させるためのタグを追加

　# 外観 > テーマエディター > home.php

『particle JS』 を既存のJSファイルに移植

『particle JS』の模様を作成するためのライブラリ「particles.min.js」のコードを全てコピーして「common.min.js」の一番最後に張り付ける。（移植する）
　# 外観 > テーマエディター > common.min.js

学んだこと

・cssの「z-index」の使い方。
　このスタイルを追加することで、どのを上に表示するのか調整できる。

・「particles.min.js」を読み込ませるために 『vincentgarreau.com』 上のダウンロードファイルの格納先を直接指定して、読み込ませようとしたが、 wordpress内でエラーが発生して参照できなかった。外部のURLは直接参照できない仕組みになっていることがわかった。

・会社のホームページがwordpressで作成されており、wordpressの管理画面からparticleJS を埋め込む必要があった。つまり、FTP等で新規ファイルをアップロードすることができないため、wordpressの仕組みを研究しながら進めた。

以上