MENU
  • homeicon-home
  • サロン専門ホームページ制作
  • 初心者向けワードプレスレッスン
  • ワードプレスオンラインレッスン
  • ホームページ制作実績
  • 写真撮影
  • blog
  • 写真のホームページへ
  • お問い合わせicon-mail
個人サロン向けのホームページ制作やワードプレスレッスンを受講できます。年金以外に自分の力で稼ぎたいアラフィフ女性を応援します。50代からのプチ起業をお考えの方はぜひお気軽にご相談ください。
【大阪箕面市】ホームページ制作・ワードプレスレッスンならecru(エクリュ)
  • ホームhome
  • ホームページ制作web site
    • ワードプレス1ページプラン
    • ワードプレススタンダードプラン
    • htmlプラン
  • ブログレッスンWordPress lesson
    • ワードプレスマンツーマンレッスン【5回レッスン】
    • WordPressオンラインレッスン【おしゃれなサイトが作れます】
  • 写真撮影photo
    • 写真のホームページへ
  • ブログblog
    • 50代起業
    • ホームページ制作実績
    • ワードプレスのこと
    • お客様のご感想
    • 起業コラム
  • プロフィールabout me
お問い合わせ
【大阪箕面市】ホームページ制作・ワードプレスレッスンならecru(エクリュ)
  • ホームhome
  • ホームページ制作web site
    • ワードプレス1ページプラン
    • ワードプレススタンダードプラン
    • htmlプラン
  • ブログレッスンWordPress lesson
    • ワードプレスマンツーマンレッスン【5回レッスン】
    • WordPressオンラインレッスン【おしゃれなサイトが作れます】
  • 写真撮影photo
    • 写真のホームページへ
  • ブログblog
    • 50代起業
    • ホームページ制作実績
    • ワードプレスのこと
    • お客様のご感想
    • 起業コラム
  • プロフィールabout me
「あなたも50代から好きなことを仕事にできる」完全マニュアル詳細はこちら
  1. ホーム
  2. ワードプレスのこと
  3. SWELL
  4. 【SWELL】サイトにふわふわ動きをつける方法(Blocks Animation)

【SWELL】サイトにふわふわ動きをつける方法(Blocks Animation)

2021 11/29
SWELL
サイトに動きをつける方法(Blocks Animation)

WordPressのサイトに動きをつける方法をお伝えします。
今回も超簡単です!
ブロックエディタであればSWELL以外のテーマにも使えます。

まず当サイトのトップページをご覧ください。

あわせて読みたい
ワードプレスレッスンとホームページ制作エクリュ 【NEWS】 【】 この度は当サイトにお越しくださりありがとうございます。主なサービスは主に自宅サロン・女性起業家さん向けのホームページ制作、WordPress個人レッスン...

少しスクロールすると左側に画像、右側にテキストが配置されているエリアがあります。
ここの部分はアニメーションになっているのがわかるかと思います。

またスクロールするたびにコンテンツがふわふわ出てくる方法もありますのでぜひ最後まで読んでみてくださいね。

サイトに動きをつけると楽しいですよね。
でもあまりたくさん使用しすぎないのがポイントです

目次

サイトに動きをつけるにはBlocks Animationというプラグインを使う

WordPressはプラグインで必要な機能を後からつけることができます。
これ、とっても便利です。

あらかじめ下記のページを参考にしてブロークングリッドを設置してください

あわせて読みたい
【SWELL】画像とテキストを重ねて表示する方法(ブロークングリッド) WordPressテーマ【SWELL】にはうれしい機能がはじめから実装されています。今回は画像とテキストを左右に並べてそれを少し重ねて表示させる方法をご紹介します。。 画像...
手順
プラグイン(Blocks Animation)をインストールする

①ダッシュボード→プラグイン→新規追加をクリック

②右上のキーワードという枠に「Blocks Animation」と入力

③「Blocks Animation:CSS Animations for Gutenberg Blocks」プラグインを見つけて「今すぐインストール」をクリック、次に「有効化」ボタンを押してください。

手順
固定ページを編集してアニメーションを実装する

①アニメーションを実装したいページを開く

②アニメーションを実装したい場所をクリックして選ぶ

③右下にある「Animations」をクリック

手順
テキスト部分にアニメーションを実装する

「Animations」をクリックするとたくさん候補が出てくるのでこの中から好きなタイプのアニメーションを選んでください。

手順
「メディアとテキスト」部分にアニメーションを実装する

左側の画像だけを選ぶことができないため「メディアとテキスト」全体にアニメーションを実装します。
この場合はテキスト部分とは違う動きのアニメーションを選ぶとかっこいい感じになります。

①メディアとテキストセクションをクリック

②テキストの時と同様に右側の「Animations」から好みのものを選ぶ。
(ここではSlide in Upを選びました)

実際のサイトの動きを確認してみよう

http://xs116105.xsrv.jp/swell/

いろんなアニメーションがあるのでどんどん試してみちゃおう。

ページ全体をふわふわ出てくるように設定する

スクロールするたびにコンテンツがふわふわ出てくるようにするようにもできます。
本当だったらJQueryを覚えて実装しなければならないところがめちゃくちゃ簡単にできちゃいます。

手順
セクションを選択する

もし下記のようにいくつかの段落に分かれている場合はドラッグですべて選んでグループ化しておきます。

グループ化できた。

手順
フェードインを実装する

さきほどグリープ化したセクションを選択し、右下にある「Animations」から「Fade in」を選択。
「Dalay」を好みの秒数にする。(ここでは0.5秒を選択しています)

手順
「更新」ボタンを押してちゃんとできているかどうか確認する

こんな感じでできていれば成功です!

http://xs116105.xsrv.jp/swell/

フルワイドで作っている場合はグループ化は必要ありません。
下記のようにフルワイドセクションを選択した状態で「Fade in」を実装してください。

いかがでしたでしょうか?
とっても簡単ですよね。ぜひやってみてくださいね。

ちなみにこちらのサイトはWordPressオンラインレッスンのときに使う教材です。
http://xs116105.xsrv.jp/swell/

パソコンが苦手だったりワードプレスを覚えたい、新しい事業を始めるのにwebサイトが必要な方にオンラインでレッスンをおこなっています。

あわせて読みたい
SWELLを使って好感度の高いホームページを作ろう 人気ワードプレステーマ「SWELL」で素敵なサイトを作りましょう。下のようなダミーサイトを作ってみましょう。 【SWELLでカスタマイズする手順】 LESSON1から順に解説し...
あわせて読みたい
WordPressオンラインレッスン【おしゃれなサイトが作れます】 【こんなお悩みありませんか?】 【】 一生続けられる仕事がしたい定年後の収入がないことが不安自分らしい生き方できてるのかな?こんな年だから今さら何かを学ぶのは...

\この記事が良かったと思ったらポチッとクリックしてね/
にほんブログ村 ライフスタイルブログ フリーランス生活へ
にほんブログ村

メルマガ登録してね
47歳で離婚後、どうやってフリーランスとして収入を得ることができているか?
その秘密を覗いてみませんか?

まずは下のバナーをクリックしてください。

メルマガ登録

メルマガ

関連

SWELL
WordPressの操作方法 おすすめ ブログお役立ち記事
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
  • 【SWELL】画像とテキストを重ねて表示する方法(ブロークングリッド)
  • おしゃれなアイキャッチを作るデザインのコツ

関連記事

  • SWELL
    おしゃれなWordPressテーマSWELL(スウェル)とは?
    2022年3月25日
  • 【SWELL】フルワイドセクション〜3カラムと境界線を波線にする方法
    2022年3月18日
  • ブログ一覧ページにタブをつける方法
    ブログ一覧ページにタブをつける方法
    2022年3月17日
  • 【特別編】SWELLをカスタマイズ時に便利な記事を集めました
    2022年2月5日
  • 【LESSON8】ワードプレス初心者に入れておいた方がよいプラグイン
    2021年12月21日
  • 説明リスト(DL)の入れ方
    2021年12月8日
  • 【SWELL】画像とテキストを重ねて表示する方法(ブロークングリッド)
    【SWELL】画像とテキストを重ねて表示する方法(ブロークングリッド)
    2021年11月27日
  • 固定ページの編集方法(ブロックエディタ編)
    【SWELL】固定ページの編集方法(ブロックエディタ編)
    2021年11月8日
エクリュ
制作実績
エックスサーバーの設定方法
エックスサーバーの契約からワードプレスインストールまで
WordPressマンツーマンレッスン
ワードプレスマンツーマンレッスン
50代主婦の狙い目副業7選!【リスクなし在宅のお仕事で稼ごう】
女性向けおしゃれでかわいいワードプレステーマ7選
人気記事
  • 50代からの起業は遅くない!おすすめお仕事7選メリットとデメリット
    50代からの起業は遅くない!おすすめお仕事7選メリットとデメリット
  • macbookpro
    macbook proが熱すぎる!原因と対策は?
  • サイトに動きをつける方法(Blocks Animation)
    【SWELL】サイトにふわふわ動きをつける方法(Blocks Animation)
  • SWELL〜ヘッダーとメインビジュアルを設定する手順
  • メインビジュアルに画像を重ねておしゃれ感を出す方法
    【SWELL】メインビジュアルに画像を重ねておしゃれ感を出す方法
カテゴリー
  • 50代起業 (10)
  • canva (3)
  • SWELL (18)
  • webデザイナー (5)
  • アフィリエイトの始め方 (1)
  • お客様のご感想 (7)
  • パソコン (1)
  • フリーランス (1)
  • ブログを始める (4)
  • ホームページ制作実績 (56)
  • マンガ (9)
  • レッスンのこと (1)
  • ワードプレスのこと (5)
  • ワードプレスの機能 (14)
  • ワードプレスマンツーマン5回習得コース (25)
  • わたしのこと (2)
  • 主婦の副業 (3)
  • 引越し用 (1)
  • 未分類 (2)
  • 起業コラム (52)
  • 起業プロデュースプラン (5)
タグ
adobeCANVASEOSNS苦手SWELLTCDwebスクールWordPressWordPressの操作方法おすすめお金のことアフィリエイトアメブロカウンセラーキャッチコピーグーグル検索ストアカセラピストブログお役立ち記事ブログカスタマイズホームページ作成マンガライトニングロゴワードプレスワードプレスオンラインレッスン制作実績副業年金以外に収入を得る引き寄せの法則画像の入れ方自宅サロン自宅教室製作実績起業起業コンサル起業塾集客高額コンサル

お問い合わせ・お申込み

 090-1656-1032

ホームページのこと・起業相談はお気軽にお問い合わせください。

お問い合わせ

メールマガジン
メールマガジン
最近の投稿
  • 【SWELL】canvaでおしゃれなアイキャッチを簡単に作る方法
  • 【サイト制作】岐阜のコラージュセラピーサロンゆうみんセラピーさま
  • 50代になると何をしても楽しくない?楽しく生きるコツはこれ!
  • 【40代50代女性向け】webデザインスクールの選び方とおすすめスクール3選
  • 【サイト制作】園芸工房mokumoko(もくもこ)様のHP
  • 【40代未経験でもOK】webデザイナーで稼ぐ方法7選!
  • 50歳でフリーランスになった経験を語ってみます
目次
  • ホーム
  • サロン専門ホームページ制作
  • ワードプレス1ページプラン
  • ワードプレススタンダードプラン
  • WordPressオンラインレッスン【おしゃれなサイトが作れます】
  • htmlプラン
  • 初心者向けワードプレスレッスン
  • 写真撮影
  • プロフィール
  • お申し込み・お問い合わせ
ランキングに参加しています

にほんブログ村 ライフスタイルブログへ
にほんブログ村

SWELLを使ってホームページを作ろう
人気テーマSWELLを使ってホームページを作ろう
SNS
SWELLご購入はこちら

© 【大阪箕面市】ホームページ制作・ワードプレスレッスンならecru(エクリュ).

  • メニュー
  • home
  • profile
  • contact
  • トップへ
目次
閉じる
 

コメントを読み込み中…
 

コメントを投稿するにはログインしてください。