前回記事「稼ぐために大切なマインド」をリライトしている際、「少し動きをつけたい」と感じた箇所がありました。
そこで…
今回は誰でも簡単にブロックにアニメーションを追加できるプラグインBlocks Animation: CSS For Gutenberg Blocksをご紹介します。
WordPressを始めたばかりの人でも
ブロックに動きをつけらます
（本当に簡単。数分です）
プラグインを有効化するだけで直感的に使えるので、表現に幅が出ると思います。
是非ご覧ください。
大前提：そもそもブログは「ほぼ読まれない」
いきなり、残念な話ですが私はブログを次のように捉えています。
- 何かと忙しい現代、ブログは「ほぼ読まれない」
- 運よく読者が記事にたどり着いても「流し読みする」
- 自分がどれだけ頑張って書いても関係なし。「ほぼ読まれない」
「魂を込めて丸一日かけて書いたのに、全然 読まれない…」
こんなことはザラです。
残酷ですが、書き手がどんなに時間をかけたかは読者にとっては関係ありません。
だからブログは途中で辞めてしまう人が多いんだと思います
でも「読まれないこと」は仕方ないとも思っています。
現代人は何かと忙しいので。
みんな、「誰か知らない人」の記事を丁寧に読んでいるほど暇ではない
悲しいけど、これが現実。
（私自身もWEBサイトは、ほぼ流し読みです）
どんなに頑張ったかは 関係なし。
残念ながら「読まれない」のが基本
（これは仕方ない）
その前提を認識したうえで
「どうやって言いたいことを伝えるか」
を考える方が得策
少しでも読んでもらうために
とはいえ、少しでも読んでもらうために できることもあると思います。
見た目で「離脱されにくくする」
まず意識したいのは、「読む気が起きる見た目」にすること。
文章そのものの内容も大切ですが、それ以前に「読まれる状態」を作る方が重要です。
私も日々 試行錯誤中です！
例えば…
- 行間を広めにとる
- 余白を意識する
- 見出し・リスト・装飾を活用する
- 画像やアイコンを差し込む
- 動き（アニメーション）で“退屈さ”を軽減する
つまり「文章」だけで勝負しない、ということです。
特に最近は、動画やSNSで短時間に大量の情報を得る時代。
静止した文字の羅列だけだと、どうしても目に止まりづらくなっています。
アニメーションで“目を止める”
そんなときに役立つのが・・・
今回紹介する「Blocks Animation: CSS For Gutenberg Blocks」
特別な知識は一切不要で、ブロック単位でふわっとした動きやスライド演出をつけることができます。
こんな派手な動きや
使えそうな動きも。
「1秒遅れて出す」などタイミングも指定可能。
以下に導入手順を画像付きでお示しします
（驚くほど簡単です！）
導入手順・使い方（Blocks Animation: CSS For Gutenberg Blocks）
今回は前回記事「稼ぐために大切なマインド」の一部に動きをつけてみます。
まず、プラグインをインストールします。
プラグイン→プラグインを追加
Blocks Animation: CSS For Gutenberg Blocks と検索
有効化
動きをつけたいブロックを選択
（今回はグループ化している、画像の箇所を選択します）
右側のブロックタブの「アニメーション」をクリック
グループ化とは…
複数のブロックをまとめて、１つのように扱うこと。
グループ化するとまとめて装飾できるなどメリットが多い。
SWELLでのブログ執筆において 必須レベルの操作
好きなアニメーションを選択
（その場でプレビュー表示されるので、1つ適当に選んでみてください）
好きなアニメーションを選んだら「保存」
以上です。簡単でしたね
再現
（設定した動きはこんな感じ）
この辺で「おいおい、なんか宣伝臭くなってきたぞ！」
と思われた方がいらっしゃったら、スミマセン！
（私が読者なら、この辺で読むのをやめる可能性があるなと思いました…）
（特に 何もお感じでなければ、引き続き読み進めていただければ幸いです）
アフィリエイトリンクを貼りすぎると、読者に自然と嫌悪感を与えがちです。
ですが、もう少しお付き合いください。
本題はこの後なので
しっかり動きましたかね？
動いていれば設定OKです
今回は以上となります。
ブログの表現方法の１つとして、使えると思ったので今回ご紹介しました。
気になった方はぜひお試しください！
（別にアフィリエイト案件とかではないです。無料です。）
最後までご覧いただき、ありがとうございました。
