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

頑張らないブログ運営を夢見ながら、日々人生の修業中。頑張りたい人の応援隊。
\ 今だけポイント最大10倍! /

【ブロックエディタ】SWELLカスタマイズ+スクロールアニメーション|Blocks Animationの使い方

  • URLをコピーしました!

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

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

ゆるくま
ゆるくま
ゆるくま
まる。

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

ゆるくま君

まるちゃん、どうこれ?

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

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

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

まる。

…でもさ、HTMLとかCSSに詳しい人じゃないと無理じゃない?

ゆるくま君

うん、昔はね。
でも今は、Wordpressを使ってる人なら誰でも簡単に「プラグイン」にアニメーション動作を付けることができるんだよ。

まる。

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

ゆるくま君

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

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

Blocks Animation: CSS Animations for Gutenberg Blocks

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

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

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

まる。

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

ゆるくま君

「SWELL」に限らず、ブロックエディタ対応のブログであれば何でもOKだよ!

WordPress有料テーマ「SWELL」

価格 17,600円(税込)

シンプルなのに高機能。
もっと気軽に、楽しく記事を書こう。

ブログを簡単に・楽しく・素早く書けるように、どこまでもこだわって作られたブロックエディタ対応のWordPressテーマ。圧倒的な機能美を、その手でぜひ体感してみてください。

Sponsored Links

目次

ブロックエディタ対応ブログにスクロールアニメーションをプラス!

WordPressプラグイン「Blocks Animation」

「JavaScript」や「jQuery」といったスクリプト等を一切使わずに、サイトのスクロール動作に合わせて文字や画像に「CSSアニメーションによる動作」を付けることの出来るプラグインです。

まる。

「JavaScript」「jQuery」って何…?!

ゆるくま君

プラグインを有効化するだけで簡単にブログにアニメーション動作を付けてくれるから、そんなの知らなくても大丈夫!

動作の種類は「全96種」

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

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

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

まる。

動作のスピードを変えることでイメージが変わるから、自分のブログに合った演出ができるんだね。

Loading Animations

スクロールすることで動作が表示されるアニメーション動作。ブロック全体に表示が可能なので、ブログに動きを付ける際に使用。

ゆるくま君

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

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

「Animations」の項目

Animation

▶アニメーション動作の種類設定

Delay

▶アニメーション動作を遅延させる時間設定

Speed

▶アニメーションが動作する際のスピード

まる。

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


「Blocks Animation」ブログ初心者やお洒落カスタマイズにおすすめ

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

メリット

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

デメリット

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

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

まる。

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

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

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

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

\ 全力でオススメしたいWordPressテーマ /

SWELLで簡単!「Blocks Animation」設定・使い方

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

「Blocks Animation」は、アフィリエイトにも大活躍!

ゆるくま君

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

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

Blocks Animation: CSS Animations for Gutenberg Blocks

まる。

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

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

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

2022年3月 「Blocks Animation」アップデート追加項目

まる。

以下のふたつの項目が新規で追加になりました。当ブログでは使用していない項目なので、詳しくは後日また記述しますね!

  • 「Count Animations」
  • 「Typing Animations

【Blocks Animation】使い方のまとめ

ゆるくま君

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

アップデート後も設定や使い方に大きな変更はないので、SWELLなどのブロックエディタ対応のWordPressテーマにアニメーションを付ける際の参考にしてみて下さいね。

まる。

このブログで使用しているアニメーション動作は、すべて一番上の項目の「Loading Animations」のみ!

ゆるくま君

こんなのが簡単に出来ちゃうブロックエディタ対応のプラグインだから、自分らしいカスタマイズを楽しんでね。

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

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

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

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

\最大10%ポイントアップセール!/
Amazon
\楽天ポイント5倍セール!/
楽天市場
\ポイント5%還元!/
Yahooショッピング

WordPressテーマ「SWELL」

価格 17,600円(税込)

シンプルなのに高機能。
もっと気軽に、楽しく記事を書こう。

ブログを簡単に・楽しく・素早く書けるように、どこまでもこだわって作られたブロックエディタ対応のWordPressテーマ。圧倒的な機能美を、その手でぜひ体感してみてください。

\ ランキング参加中 /


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


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

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