ja id ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja en ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja en ja ja ja ja ja ja ja ja ja ja ja ja ja zh ja zh ja ja ja ja ja ja ja zh ja ja ja ja zh ja ja en ja ja ja ja ja ja ja ja ja ja ja ja zh ja ja ja ja ja ja ja ja en ja ja ja ja ja ja zh ja ja ja ja ja ja ja en ja zh ja ja en ja en ja ja en ja en ja en ja en ja ja es ja en ja en ja en ja ja en ja en ja en ja ja ja ja ja ja ja ja ja ja ja ja ja zh ja ja ja ja ja ja ja ja zh ja ja zh ja ja en ja ja ja ja ja ja ja ja zh ja ja ja ja ja zh ja zh ja ja ja ja zh ja ja ja ja nl de fi fi ja ja ja ja ja ja en ja ja ja ja ja ja ja ja ja ja ja ja ja en ja en ja ja en ja ja ja ja ja ja ja ja ja ja ja ja en ja ja ja ja en ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja en en ja en en en en ja en en ja ja en en en en en en en en en fa en en en en en en en en en en en en en en en en en en en en en en en ja
Blocks Animation: CSS Animations for Gutenberg Blocks
「SWELL」に限らず、ブロックエディタ対応のブログであれば何でもOKだよ!
WordPress有料テーマ「SWELL」
価格 17,600円(税込)
シンプルなのに高機能。
もっと気軽に、楽しく記事を書こう。
ブログを簡単に・楽しく・素早く書けるように、どこまでもこだわって作られたブロックエディタ対応のWordPressテーマ。圧倒的な機能美を、その手でぜひ体感してみてください。
今すぐ「SWELL」をダウンロード
Sponsored Links
ブロックエディタ対応ブログにスクロールアニメーションをプラス!
WordPressプラグイン「Blocks Animation」
「JavaScript」や「jQuery」といったスクリプト等を一切使わずに、サイトのスクロール動作に合わせて文字や画像に「CSSアニメーションによる動作」を付けることの出来るプラグインです。
「JavaScript」や「jQuery」って何…?!
プラグインを有効化するだけで簡単にブログにアニメーション動作を付けてくれるから、そんなの知らなくても大丈夫!
動作の種類は「全96種」
基本のアニメーション動作は10種類。
この10種類の動作の中に、更に様々な動作があるで、演出できるアニメーションの種類は「全96種類」となります。
アニメーションは投稿編集画面でプレビューでも確認できるので、実際に動かしながら選んでいきましょう。
動作のスピードを変えることでイメージが変わるから、自分のブログに合った演出ができるんだね。
Loading Animations
スクロールすることで動作が表示されるアニメーション動作。ブロック全体に表示が可能なので、ブログに動きを付ける際に使用。
特にむずかしい事もなく、投稿編集画面のみで設定できるよ!
アニメーションの動作一覧
ブロックが弾むようにバウンド
ブロックがフェードイン
ブロックが直線方向にスライド
アニメーション遅延時間
「Animations」の項目
▶アニメーション動作の種類設定
▶アニメーション動作を遅延させる時間設定
▶アニメーションが動作する際のスピード
スクロールの最中に終わっちゃう動作もあるから、プレビューで確認しながら遅延設定をするとよりお洒落な感じになるね!
「Blocks Animation」ブログ初心者やお洒落カスタマイズにおすすめ
「Blocks Animation」メリットとデメリットは?
インストール&有効化するだけですぐ使える
難しいデザインの知識などが必要ない
HTMLの構造が変わらない
ブロックエディタで使える
アニメーション動作が一度きり
ごく稀にスマホなどで動かないことがある
HTML要素が変わらないっていうがポイントだよ。
知識がなくても「とにかく簡単にできる」ってことだよね!
ブロックエディタに完全対応!
ブロックエディタに完全対応しているプラグインなので、WPテーマ「SWELL」のカスタマイズにもおすすめ。
クラッシックエディタをお使いの方は、プラグイン「Shortcodes Ultimate」などがおすすめ。
\ 全力でオススメしたいWordPressテーマ /
「SWELL」を詳しく見てみる
SWELLで簡単!「Blocks Animation」設定・使い方
※現在、アップデートにより少し画面が変わっていますが、内容は基本的に同じです!
「Blocks Animation」は、アフィリエイトにも大活躍!
インストールして有効化すると、編集画面の(右側の下の方)に「Animations」という項目が表示されるよ。
プラグインの新規追加からインストール可
Blocks Animation: CSS Animations for Gutenberg Blocks
「固定ページ」「投稿ページ」のどっちでも出来るからね。
プラグインを追加&有効化
各ページの編集画面を開く
「Animations」をクリック
項目から好きな動作を選ぶだけだから、簡単だよね!
2022年3月 「Blocks Animation」アップデート追加項目
以下のふたつの項目が新規で追加になりました。当ブログでは使用していない項目なので、詳しくは後日また記述しますね!
「Count Animations」
「Typing Animations」
【Blocks Animation】使い方のまとめ
プラグイン「Blocks Animation」をインストールすると、ブログがお洒落で動きのあるデザインにカスタマイズできるんだ。
アップデート後も設定や使い方に大きな変更はないので、SWELLなどのブロックエディタ対応のWordPressテーマにアニメーションを付ける際の参考にしてみて下さいね。
このブログで使用しているアニメーション動作は、すべて一番上の項目の「Loading Animations」のみ!
こんなのが簡単に出来ちゃうブロックエディタ対応のプラグインだから、自分らしいカスタマイズを楽しんでね。
このアニメーションの設定はこんな感じ
動きのスタイル:Bouncce in left
Delay:⇒ 左から遅延設定
100 milliseconds
200 milliseconds
こんな風にメニューに動作を加えるのも、目につきやすくなるからおすすめだよ。「SWELL」でぜひ試してみてね!
\ 初心者でも楽しく学べるデザインの本 /
これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本
著:Capybara Design, 著:竹内 直人, 著:竹内 瑠美
\最大10%ポイントアップセール!/
\楽天ポイント5倍セール!/
\ポイント5%還元!/
Yahooショッピング
WordPressテーマ「SWELL」
価格 17,600円(税込)
シンプルなのに高機能。
もっと気軽に、楽しく記事を書こう。
ブログを簡単に・楽しく・素早く書けるように、どこまでもこだわって作られたブロックエディタ対応のWordPressテーマ。圧倒的な機能美を、その手でぜひ体感してみてください。
ダウンロードはこちらから
\ ランキング参加中 /
SWELL ワードプレス
この記事が気に入ったら
Follow @yurukumaru
よかったらシェアしてね!
URLをコピーしました!
URLをコピーしました!
好奇心旺盛で、美味しいものが大好き。気になること、好きなこと、おすすめのこと、さくっと気ままにリサーチ。お父さんのような相棒のゆるくま君と、ストレスフリーな毎日を模索中。頑張らないブログ運営を夢見ながら、日々人生の修業中。
自分らしく頑張る人の暮らしとライフスタイルをゆるく応援します。
似顔絵アイコン作成 ☞ Yokomichiさま
アーカイブ月を選択 2022年8月 2022年4月 2022年2月 2022年1月
【映画原作】凪良ゆう「流浪の月」あらすじの紹介(ネタバレなし)|映画の内容・ロケ地・配信情報は?
【ブロックエディタ】SWELLカスタマイズ+スクロールアニメーション|Blocks Animationの使い方
【片付けのコツとやり方】「捨てワザ」おすすめ手順で部屋のここから始めよう|疲れないシンプル断捨離
【モチベーションとは原動力!】意味と仕組みをわかりやすく解説|上げる・維持・沸かせるためにするべき事
【人付き合いの処方箋】めんどくさくて疲れるのはひとりになるのが怖いから|自己肯定感と向き合おう
【大人が夏に読みたいおすすめ本】心に響く大人のための哲学ファンタジー・SF|完結済み名作5選
【あらすじ紹介】「同志少女よ、敵を撃て」ネタバレなし・書評と感想/逢坂冬馬┃本屋大賞作品
【大人のひな祭りの祝い方】女性へ感謝を込めてプレゼントを贈りたい日|桃の節句の由来
【リライトにおすすめ】Yoast Duplicate Postの使い方|記事を複製するWPプラグイン
【Googleアドセンス収益化】審査に落ちないためのチェック項目と申請方法|合格ブログとの違いとは?
\ 700誌以上の人気雑誌が読み放題 /
当サイトでは、サービス向上およびお客様により適したサービスを提供するためクッキー(cookie)を利用しています。「Accept All」をクリックすると、お客様はすべてのクッキーの使用に同意したことになります。また、お客様のブラウザの設定によりクッキーの機能を無効にすることもできます。
Cookie SettingsAccept All
Manage consent
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
cookielawinfo-checkbox-analytics
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional
The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy
The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.