MENU
アーカイブ
まる。
ブログ管理人
好奇心旺盛で、インテリア家電が大好きの食いしん坊。気になること、好きなこと、おすすめのこと、さくっと気ままにリサーチ。お父さんのような相棒のゆるくま君と、ストレスフリーな毎日を模索中。

頑張らないブログ運営を夢見ながら、日々人生の修業中。頑張りたい人の応援隊。
熟練職人が作る一生モノの革製品 >>

【ブロックエディタ】SWELLにアニメ動作をつける|Blocks Animationの使い方

  • URLをコピーしました!

こんにちは、WordPressテーマ「SWELL」でブログを運営している管理人のまるです。

ブログのカスタムライフ、あなたはいかがお過ごしですか?

ゆるくま
ゆるくま
ゆるくま
ゆるくま君

まるちゃん、どうこれ?

まる。

ゆるくま君、
突然どうした…?

バナーや画像がお洒落に動くブログをみて、

「うわッ、カッコイイ!」
「どうやってやるんだろ?!」

なんて、思ったことはありませんか?

まる。

でもさ、あんなのHTMLとかCSSに詳しい人じゃないと無理だよね…。

ゆるくま君

そうそう昔はね。でも、Wordpressを使ってる人なら誰でも「プラグイン」で簡単にできるんだよ。

まる。

じゃ、ゆるくま君のあれはプラグインでやったってことだよね?

ゆるくま君

そうだよ、まるちゃん。今回の記事では、このプラグインについてを一緒に紹介していくよ!

まる。

了解!

おすすめのプラグインはコレ!

Blocks Animation: CSS Animations for Gutenberg Blocks

難しい知識「JavaScript」「jQuerve」などは一切必要なく、
誰でも簡単にインストール&有効化するだけで、ブログをCSSアニメーションでお洒落に演出できます。

この記事はこんな人にオススメ
ざっくりと記事を要約すると…

☑ ページに動きを出したい
☑ オリジナリティのあるブログを作りたい
☑ 「SWELL」をもっとカスタマイズしたい
☑ アニメーションってどうやるの?
☑ ブロックエディタのプラグインが知りたい
☑ 簡単に画像やバナーを動かしてみたい

まる。

アフィリエイト記事なんかにもすごく役立つから、ぜひ活用してみてね!

Sponsored Links

目次

WordPressプラグイン「Blocks Animation」

こんなオシャレ動作が簡単に付けられる!

まる。

特にむずかしい事もなく、投稿編集画面で設定できるよ。

アニメーションの動作一覧
Bouncingブロックが弾むようにバウンド
Fadingブロックがフェードイン
(フェードアウト)
Flippingブロックが奥側に回転
Rotatingブロックが回転
Slidingブロックが直線方向にスライド
Zoomingブロックがズームイン
(ズームアウト)
Rollingブロックが転がる
Otherその他の動作
Delayアニメーション遅延時間
Speed動くスピードの設定
ゆるくま君

スクロールの最中に終わっちゃう動作もあるから、プレビューで確認しながら遅延設定をするといいよ。

動作の種類は「全78種」

基本のアニメーション動作は8種類。

この8種類の動作の中に、更に様々な動作があるで、演出できるアニメーションの種類は「全78種類」となります。

アニメーションは投稿編集画面でプレビューでも確認できるので、実際に動かしながら選んでいきましょう。

まる。

動作のスピードを変えることで、またまたイメージが変わるから、自分のブログに合った演出が可能だよ!


ブログ初心者やオリジナリティを出したい方におすすめ

「Blocks Animation」メリットとデメリットは?

メリット

  • インストール&有効化するだけですぐ使える
  • 難しいデザインの知識などが必要ない
  • HTMLの構造が変わらない
  • ブロックエディタで使える

デメリット

  • アニメーション動作が一度きり
  • ごく稀にスマホなどで動かないことがある
ゆるくま君

HTML要素が変わらないっていうがポイントだよ。

まる。

知識がなくても「とにかく簡単にできる」ってことだよね!

ブロックエディタに完全対応!

ブロックエディタに完全対応しているプラグインなので、WPテーマ「SWELL」のカスタマイズにもおすすめ。

クラッシックエディタをお使いの方は、プラグイン「Shortcodes Ultimate」などがおすすめ。

「Blocks Animation」設定・使い方

※現在、アップデートにより少し画面が変わっていますが、内容は基本的に同じです!

アフィリエイトブログに有効活用!

ゆるくま君

インストールして有効化すると、編集画面の(右側の下の方)に「Animations」という項目が表示されるよ。

プラグインの新規追加からインストール可

Blocks Animation: CSS Animations for Gutenberg Blocks

まる。

「固定ページ」「投稿ページ」のどっちでも出来るからね。

STEP
プラグインを追加&有効化
STEP
各ページの編集画面を開く
STEP
「Animations」をクリック
まる。

項目から好きな動作を選ぶだけだから、簡単だよね!


まとめ

ゆるくま君

プラグイン「Blocks Animation」をインストールすると、ブログがお洒落で動きのあるデザインにカスタマイズできるんだ。

まる。

こんなのが簡単に出来ちゃうよ!

このアニメーションの設定はこんな感じ

  • 動きのスタイル:Bouncce in left
  • Delay:⇒ 左から遅延設定
  • Speed:Slow
none
100 milliseconds
200 milliseconds
まる。

こんな風にメニューに動作を加えるのも、目につきやすくなるからおすすめだよ。ぜひ試してみてね!

\ 初心者でも楽しく学べるデザインの本 /

\ ランキング参加中 /


にほんブログ村 にほんブログ村へ 


この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる