シンプルで高機能 【 SWELL 】を使用しています

【SWELL】ブログで画像を動かす簡単な方法を解説【アニメーション】

ブログを運営していく上で「画像を目立たせたいな…!」とお悩みではないですか?

また、オシャレなトップページを作って読者の目を引き付けたい!

そのようにお考えではないでしょうか。

今回は、WordPressテーマ「SWELL」において画像を動かす問題点とかんたんな方法を解説していきます。

SWELLの標準ではアニメーションの機能はありません。

しかし、ちょっとした工夫でSWELL使用のブログでもアニメーションを導入することができます。

ぜひ最後まで読んでいって頂いて、あなたのブログにも導入してみてくださいね。

この記事でわかること
  • SWELLでアニメーションを使用する際の問題点
  • 簡単なアニメーション導入方法

ここで少し私の紹介をさせてください。

私はこんな人

どんぐり

  • 国家資格 1級建築施工管理技士
  • マンション大規模修繕工事現場所長 
  • 経済的自由を目指し、節約・副業・投資を実践
  • 副業として当サイト含め4つのブログサイトを運営
  • 長期投資志向(つみたてNISA、米国ETF)で資産運用
  • twitter フォロワー2000人突破
目次

SWELLでアニメーションは導入できるのか?

SWELLでもアニメーションを導入する事ができます。

その証拠に、当ブログのトップページではアニメーションが導入されています。

例としてここに一つ表示させてみます。

左からアニメーション

いかがでしょうか。画像が左から動いてきました。

このように、簡単に画像などを動かす事ができますので是非あなたのブログでも検討してみてくださいね。

また姉妹サイトのブログデザインラボでは、このコードを使ってトップページにアニメーションを導入しています。

ぜひご参考ください。

アニメーションを導入する注意点

私ははじめ、「アニメーション・プラグイン」での導入を目指していました。

理由はプラグインの方がアニメーションの種類が多く、事細かい設定ができるからです。

実際に導入したところ、始めはうまく動作するのですが、

再度そのページを保存しなおすとデザインが崩れる

と、いう事象が頻発し断念致しました。

もちろん詳しい方がしっかりと設定する事でこの様な事象が起こる事はなくなるのでしょうが、とても皆様には紹介する事が出来ないと思い他の方法を模索しました。

アニメーションさせる意味

文を読ませたいブログにおいて、画像などをアニメーションさせる意味ってなんでしょうか。

サイトや企業のイメージづくり

アニメーションを上手に取り入れる事で、ブログ全体の雰囲気を作ります。

大手企業のサイトではいろいろな趣向が組み込まれています。

それはそのサイトを見た読者の興味をひいたり、企業のイメージをアップさせる効果があります。

デザイン系のサイトや企業系のサイトではアニメーションが多く取り入れられ、その企業やサイトのイメージづくりに一役買っています。

動くものには目が止まる

文章を読ませるブログでは、基本的には本を読む様に動かない文字と対峙する事になります。

読者は基本的に読み飛ばす

この言葉をご存じでしょうか。

読者はほとんどの文を読んでくれていません。

大きな見出しや画像、註釈など目立つ所で内容を判断して読み飛ばしています。

そこで役に立つのがこのアニメーションです。

人間は動くものに対して、注意する習性があります。

どうしても読んでほしい所にアニメーションを加える事で、読み飛ばす手を止める事ができます。

アニメーションのデメリット

アニメーションは動きを入れますので、どうしても動作が重たくなります。

また、沢山のアニメーションを同時に使用する場合は表示されるまでに時間が掛かる場合があります。

昨今、Googleの評価基準にサイトスピードも含まれてきていますので、使いすぎには注意しましょう。

アニメーションを使いすぎると表示速度が遅くなる

JAVAスクリプトライブラリを使った方法でアニメーションさせる

CSSのコードを使った方法は避けていました。

なぜならば、ブログ初心者にとってCSSやHTMLのコードを触る事は難易度が高く、紹介しづらいと考えていたからです。

しかしSWELLの機能を使えば、そこまで難しくなく導入する方法が分かりましたのでご紹介いたします。

SWELLのカスタマイズからスクリプトを追記

初心者が実際にコードを書き換えたりすると、ブログが動作しなくなったり、元に戻せなくなったりするリスクがあります。

その点、SWELLにはCSSコード等を設定で追記できる場所が用意されていますので、そこにスクリプトを追記します。

この場合、不具合がでたり、アニメーションを辞めたくなった場合でも、ここを削除するだけで元の状態に戻す事ができます。

こういう「指示」が出た場合こういう「動き」をするんだよ

と、いう命令文をCSSに追記していきます。

今回はScrollRevealというアニメーション用スクリプトライブラリを使用します

スクリプトを追記したらあとは画像毎に命令してあげるだけ

このような条件をテーマに追記しましたので、あとは画像毎に「こうしなさい」と命令をだします。

右からアニメーション

この画像は「右からアニメーションで登場しなさい」という命令がでています。

では、次項からは実際に導入する方法を見ていきましょう。

CSS追記を使った簡単なアニメーション導入方法

とりあえず難しい事はいい…という方の為に、まずは導入方法を説明いたします。

各々の説明は後で説明する事にしましょう。

スクリプトを追記する

まずは画像等を動かすための命令文をWordPressテーマに追記する方法を説明します。

命令用のスクリプトのコードをコピーする

<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>

<script>
       window.sr = ScrollReveal({ reset:false ,mobile: true});

       sr.reveal( '.left', { origin: 'left' , distance: '600px', duration: 2000 , scale: 0.7, viewFactor:0.4 });

       sr.reveal( '.right', { origin: 'right' , distance: '600px', duration: 2000 , scale: 0.7, viewFactor:0.4 });

       sr.reveal( '.bottom', { origin: 'bottom' , distance: '100px', duration: 2000 , scale: 0.7, viewFactor:0.8 });

       sr.reveal( '.rotate', { origin: 'bottom' , distance: '100px', duration: 2000 , scale: 0.7, viewFactor:0.8,rotate:{ x: 180, y: 0, z: 0 } });

</script>

このコードは当ブログで実際に使用しているコードです。

また姉妹サイトである「ブログデザインラボ」のトップページでも同様の設定で使用しています

速度や移動量などはこのサイトと同様になりますのでご参考ください。

このコードをコピーしてください。

コピーしたコードを張り付ける

STEP
カスタマイザーから高度な設定を選択
STEP
スクリプトのコードを貼り付け

bodyタグ終了直前に出力するコード」に先ほどのコードを貼り付けます。

STEP
「公開」を押して保存

これで命令文のスクリプトの追記が終わり準備が完了しました。

動かしたい画像の設定

では画像を動かすように設定していきましょう。

STEP
まず動かしたい画像をクリックして、サイドバーの最下部「高度な設定」をクリック
STEP
高度な設定の中の追加CSSクラスに命令文を追記

追加CSSクラスに下記の命令文を追記します。

left…左から画像を動かしてきたい場合
right…右から画像を動かしてきたい場合
bottom…下から画像を動かしてきたい場合
rotate…下から画像を「回しながら」動かしてきたい場合

画像には「影をつけるCSSクラス」がすでに記述されていますが、この様な場合は

left␣is-style-shadow

この様に、間に半角スペースをいれて記述します。

STEP
動かしたい画像の追記が終わったら公開または保存

動かしたい全ての画像などの設定が完了すれば公開または保存します。

どんぐり
どんぐり

これで動くようになっているはず…!

実際にプレビューで確認してみてください。

設定したように画像が動いているはずです。

動きのパターンの例

今回の設定では動きは4種類と少ないですが、厳選された動きです。

実際の動き方を確認しておきましょう。

left

左からスライド

right

右からスライド

bottom

下から浮き出る

rotate

下から回りながら浮き出てくる

細かい設定方法

カスタマイザーに追記した命令文のCSSコードの数値を調整する事で、アニメーションの動作速度や移動量を調整できます。

移動速度の調整

変更したい動きの行において下記の表記の数字を調整します。

duration: 2000

数字を大きくすると遅く、小さくすると動きが早くなります。

移動量の調整

変更したい動きの行において下記の表記の数字を調整します。

distance: ‘600px’

数字を大きくすると移動量が多く、小さくすると移動量が少なくなります。

記事のカラム幅が大体650~900pxくらいですので、ご参考にしてください。

SWELLならCSSがわからなくてもアニメーションできる!

いかがでしたでしょうか。

SWELLならば初心者でも簡単にアニメーションを取り入れる事ができます

トップページの画像を動かしたり。

記事の中でどうしても見てほしい所を動かしてみたりと、あなたのインスピレーションに応えてくれるでしょう。

ぜひあなたのブログにも「動き」をと入れてみてくださいね。

どんぐり
どんぐり

それでは、またっ!

SWELL|シンプルで高機能なWordPress用テーマ

初心者おすすめ度 ★★★★★ デザイン・記事作成が楽々

モバイルスピード ★★★★★ 表示速度が他テーマより速い!

価格 ¥17,600(税込) ★★    比較的高め。唯一の欠点か。

シンプルで高機能なWordPressテーマ。導入してすぐにサイトは生まれ変わります。デザインの変更も直観で思いのまま。そのデザイン性はあなたのサイトの信頼性向上に力を貸してくれるでしょう。ブロックエディタ完全対応でサクサク記事制作。また、昨今重要度が増してきているモバイルスピードが非常に早いのが特徴。動作も軽く、軽快な操作感。感動の使い心地を是非あなたにも味わっていただきたい。

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる