【SVG Artista】 WordPressで反映させる方法

目次

おしゃれなサイトを作りたい!

HP制作を楽に、おしゃれに、もっと自由に!をモットーにしているMISAWAです。
Googleで「SWELL おしゃれ」で検索するとたくさんのサイトが出てきます。
その中でもトップ画面が目を引いたサイトがこちら。

文字が描かれていくようなアニメーションを自分のサイトに取り入れてみたいと思い、
見よう見まねで作ってみることにしたものの、挫折の連続。

なんとか作ることができたのが現サイトのトップ画面。
今回は同じように『SVG Artista』でつくったアニメーションをTOPページに設定する手順を忘備録としてまとめました。

『SVG Artista』とは?

SVG Artistaは、簡単に言うと『イラレで作ったSVGデータ』に『アニメーションをつけられる』WEBサイトです。

画面は上記のようになっていて、svgファイルをアップロードするとアニメーションの設定を行ってくれます。
以下に、使い方含めた全工程を記載しておきます。

全工程まとめ

STEP
IllustratorでSVGファイルを書き出す。

①アニメーションをつけたい文字を入力
 ※この時、テキストボックスをいくつも分けて作らないで、
  一つのテキストボックス内で完結させるのがおすすめ。
  (私は最初分けてなんかうまくいきませんでした)

②テキストボックスのオブジェクト選択を行い、『書式』→『アウトラインを作成』をクリック

③文字の『塗りと線』をどちらも黒にする
 ※ここが重要!

④『ファイル』→『書き出し』→『書き出し形式』より『ファイル形式:SVG (svg)』を選択し書き出し

STEP
SVG Artista を開く

①画面左上『OPEN SVG』より先ほど書き出したファイルを読込

②お好みのアニメーションに設定
 ※Illustrator側で線の色を黒にしていないと、アニメーションが非活性になってしまいます。

③アニメーションが決まったら、画面右上『GET CODE』をクリック
 画面左側の『COPY SVG』画面右側の『COPY TRANSRATION CODE』をそれぞれクリックし、
 メモ帳に保存しておく

STEP
ワードプレス画面で固定ページを作成

①ワードプレスで固定ページを作成。フルワイドを挿入します。

②リッチカラムを選択し、左から20%、60%、20%の順でカラムを作成

③真ん中のカラムに『カスタムHTML』を設定し、コピーしたSVGコードを貼り付け
 ※貼り付けた後、先頭行に<div class=”top”>、末尾行に</div>を追加
  この”top”は任意文字列でいいですが、後ほど効いてきます

④CSSコード欄にコピーしたCSVを貼り付け(これはそのままでおk)

⑤JS用コードの欄には、以下を貼り付け

<script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script> 
<script type="text/javascript">
jQuery(function() {
jQuery('.クラス名').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
if(isInView){
jQuery(this).children('svg').addClass('active');
}
});
});
</script>

⑥上記の『クラス名』には、先ほど③にて決定した文字列を入れる。
 ※私は『top』といれました。
 これにより、ページが表示されてすぐに描画がはじまるようになります。
参考にしたサイトは以下。

STEP
レスポンシブ対応

このままだと、画面には表示されますが、ウィンドウの大小によって画像サイズが変わらないので、
上記で設定したコードの一部を削除します。
svgタグにwidth,height属性を指定せず、viewBox属性のみを指定した場合、親コンテンツ幅に合わせてSVGビューポートが広がり、そのSVGビューポートの幅と高さを、<width>値、<height>値としてコンテンツを描画するため、貼り付けたHTMLの部分から<width>値、<height>値の削除を行います。

変更前

<svg id="_レイヤー_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1712.46 410.8" width="1712.4599609375" height="410.79998779296875">

変更後

<svg id="_レイヤー_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1712.46 410.8">

上記を設定すれば、レスポンシブになります。参考サイト以下。
真ん中の方にレスポンシブについての記載があり、こちらをヒントにしました。

完成したトップ画面

まとめ

今回は、いつかまた何かのタイミングで行うかもしれないので忘備録として方法記載してみました。
完成まで半日かかりましたが、おしゃれに、HPを自由に表現するための方法としては優秀だな〜と
思いました。やり方がわかればすぐに設定できるのもいい所です。

またHP制作忘備録をためていきたいと思います。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次