Google chrome（グーグル ク...
続きを読む
ワードプレスに流れる文字を表示させる方法
2024/02/25
ワードプレスに右から左へ流れる文字を表示させる方法を紹介します。プラグインを使う方法と、使わない方法どちらも紹介します！
ワードプレスでWEBサイトやブログを制作している方の中には、既にCSSやJavaScriptなどを使用して様々な動きを取り入れている方も多くいると思います。
しかし、最近WEB制作やブログ制作を始めた方は、難しい事無しでアニメーションなどの動きを実装したいと考えている方も多くいらっしゃるのではないでしょうか。
今回の記事では、CSSやJavascriptなどでコードを書いたりする必要は一切無し！全て無料で簡単に今日から実践できる方法で、ワードプレスのサイトやブログに動きをつける方法を3つ紹介します！
まず初めに紹介するのは、GIFを使って動きをつけることです。
これは、画像（JPGやPNG）の代わりにGIF（アニメーション）を使うだけなので、非常に手っ取り早く簡単に行うことができます。
↑weblemonのトップページに表示されている猫が歩いているアニメーションも、実はGIFです。
無料でGIFアニメーションを探すことのできるサイトは、Pixabay（ピクサベイ）やtenor（テナー）と、GIPHY（ジフィー）いうサイトが有名です。
ダウンロード回数に制限がある場合がありますが、HTMLの埋め込みでWEBサイトやブログに簡単に挿入することが可能です。
↑tenor（テナー）で試しにレモンのGIFをワードプレスのサイトに挿入してみます。
tenorの場合（他もほぼ同様）、GIFのプレビューの下に「埋め込み」と記載がある場所があるので、コードをコピーします。
↑ワードプレスの編集画面で「カスタムHTML」を選択し、先ほどコピーした埋め込みコードを貼り付けます。
オリジナルのコードのままだとGIFのサイズが大きい場合があるので、埋め込みコード内の「data-width=“〇〇%”の部分を変更することでサイズ調節ができます。
←このようにGIFを簡単に埋め込むことができます！
↑このようにGIFを簡単に埋め込むことができます！
大きい動きやマウス動作に合わせたアニメーションなどをGIFで行うことは難しいですが、簡単にすぐに動きをつけるにはGIFが最適です！
流れる文字やタイプライターエフェクトを使うことも、WEBサイトに動きをつけるには効果的です。
それぞれの設定方法については、ぜひweblemonの記事を参考にしてみてください！
ワードプレスに右から左へ流れる文字を表示させる方法を紹介します。プラグインを使う方法と、使わない方法どちらも紹介します！
コピペで簡単！ワードプレスのサイトに、ショートコードを使ってタイプライターエフェクトを追加する方法を紹介します！
Elementor（エレメンター）はWEBサイトやブログの要素（テキストや画像、タイトル、ボタンなど）をパズルのように組み合わせることができる人気のページビルダープラグインです。
ワードプレスやWEB制作界隈で近年急速に耳にするようになった「Elementor（エレメンター）」とは何?? 詳しく紹介します！
Elementorを使えば、画像や文字にアニメーションの効果を簡単につけることができます。
↑機能のほんの一例ですが、上記のような文字のアニメーションも設定することができます。
↑画像にももちろんアニメーションを付け加えることができます。
↑Elementorの編集画面で、アニメーションを追加したい画像（またはテキストなど）を選択し、「高度な設定」の中の「モーション効果」をクリックします。
その中の「開始アニメーション」をクリックすると様々な動きを選ぶことができます。
今回は、ワードプレスのWEBサイトやブログに動きをつける方法を紹介しました。GIFを使う方法はweblemonでも取り入れている方法で、コードの書き込みなども不要なおすすめな方法です。
しかし、さらに様々なアニメーションやマウスの動きと連動した動きをつけたい場合は、CSSやJavascriptによってさらに高度な動きをつけることも可能です。
ぜひ今回の記事を参考にまずはお手軽な方法から動きのあるサイト作成を試してみてください！
2024-12-08
Sunday
20代後半のWEBマーケター&WEBデザイナー
新卒で商社に入社しWEBマーケターとして勤務後、
カナダに渡航し現地企業のWEB制作と
マーケティング支援を行う。
現在は帰国し某企業でWEBマーケターをしています。
自分がWEBマーケター・WEBデザイナーとして
仕事をしているときに気になった事を
調べた経緯を残しておきたいなという思いと、
それを誰かのお悩み解決に
役立てることができたらいいなと思っています。
“ネコとレモンのWEBマーケ＆デザインブログ”
みたいな感じで覚えてもらえたら嬉しいです😺🍋
Google chrome（グーグル ク...
続きを読む
これからWEBマーケティングを学びたい人...
続きを読む
