https://www.koko-de.com

Wordpress アフィリエイト ドロップシッピング ブログ

ワードプレスにアニメーションを実装して動きのあるページをつくる

投稿日:

ワードプレスにアニメーションを実装して動きのあるページをつくる

アフィリエイトサイトやドロップシッピングの商品ページなどで使える!

もちろんブログでも使えます!

このページを読めば!

有料テーマのようなアニメーション機能が無料で実装できます!

覚えるだけで複数のサイトに使えますよ♪

ワードプレスにアニメーションを実装して動きのある文字と画をつくる

テーマの機能を使う

▼ワードプレステーマWINGの標準機能で文字と画を動かすとこんな感じになります!

この<50ブログ>で使っているワードプレスのテーマはアフィンガー5(WING)です。

流れる文字や横揺れや縦揺れなどを表現できます。

ココがポイント

大事な部分の文字やアイコンも動かすことができます!

 

無駄に45度揺れや回転することもできます。
使うところは少ないかな。

 

 

画像をふわふわ動かすこともできます。

ショップできすぎくんで初売り上げをあげる3つの方法

WINGでは吹き出しのアイコン画像も動くんですよ。

アニメーションの種類

WINGのアニメーションの種類には45度揺れ、ベル揺れ、横揺れ、縦揺れ、点滅、バウンド、回転、ふわふわ、大小、シェイク、シェイク大、拡大揺れ、過ぎる、戻る、バースト、落ちるなどがあります。

アフィンガーwpテーマ

GIF画像を自分で作る

これが自分で作ったGIF画像です。

▲字が動いているように見えますがこれは画像です。四角の赤線で囲われた部分が画像です。

簡単に説明すると、この画像は3枚が重なってできています。パラパラ漫画の要領です。

1枚目

GIF画像 ワードプレスにアニメーションを実装して動きのあるページをつくる

2枚目

ワードプレスで動く文字・アニメーションの作り方

3枚目

ワードプレスにアニメーションを実装して動きのあるページをつくる

上の3つの画像を合体してできたのがGIF画像です。

画像の拡張子にはいろんな種類があります。有名なのが透過性機能がある「PNG」。そして写真などでよく見る「JPG」です。

「GIF」もWEB上で画像を表現する拡張子のひとつなんです。

今日はGIFの作り方をお教えします。

GIF生成ソフトを使えば初心者から上級者まで簡単に動く画像が作れます。

今回はダウンロードの必要がないGIF生成サイトを紹介します。

ネット上で使えるのでソフトやアプリケーションのようにダウンロードしなくてよく、パソコンの容量を圧迫しません。

GIFアニメ生成無料サイト

GIF画像生成サイト

上のリンクからサイトに入っていただき、動かしたい画像を複数枚選択して「GIFアニメをつくる」ボタンを押せば完成です。

説明の必要がないくらい簡単に動く画像が作れます。画像間の移行時間の変更などができます。(無料)

GIF画像見本です

▲これは既存のGIF画像ですが、ここで得た知識と生成サイトを利用すれば、自分で作れるようになります。

動いていない場合は「ctrl」+「F5」を押して再読み込みしてください。

▲こちらはWindowsのビデオ機能で作ったものです。GIF画像ではなく動画ですね。

今回は複数枚の画像を使ってGIFを作りましたが、動画の一部分を切り取って作る方法もあります。

プラグイン使用でアニメーションを実装して動きのある文字と画をつくる

使用するプラグインは「Shortcodes Ultimate」です。

インストールして有効化。「Shortcodes Ultimate」の画面でショートコードを取得します。

アニメーションを実装するShortcodes Ultimateの使いかたについて

▲アニメーション(動く文字)は20種類以上使えます。「Shortcodes Ultimate」はアニメーションの他にも多彩な機能を取り揃えているので、無料のワードプレステーマであってもにぎやかなページを作ることができます。おすすめのプラグインです。

CSSでアニメーションを実装して動きのある文字と画をつくる

CSSが理解できる方にはこちらもおすすめです。

初心者でも実装できます。CSSで実装するメリットは細かい設定を自分で出来ることと多機能のプラグインよりも格段に軽いことです。

CSSコードとHTMLコードを貼り付けておきます。

理解できる方は是非トライしみてください。

ポイント

子テーマを使っている方は子テーマのスタイルシートにCSSを記述(コピペ)してください。

子テーマを使用していない場合は、「外観」>「カスタマイズ」>「CSS追加」で記述してください。

追加CSSに!

▲追加CSSの画面

コピペで使える動く文字実装

全体のHTML
<div class="mojibox">
<p class="actionr">右から左へ流れる文字流れる文字</p>
</div>

<div class="mojibox">
<p class="actionro">右から左へ流れる文字流れる文字少し遅め</p>
</div>

<div class="mojibox">
<p class="actionl">左から右へ流れる文字流れる文字</p>
</div>

<div class="mojibox">
<p class="actionrs">右から左へ流れて止まる文字</p>
</div>

全体のCSS
.mojibox{
overflow: hidden;
position: relative;
}

.actionr{
animation: ugoki 8s linear infinite;
transform: translateX(100%);
}

@keyframes ugoki {
100% {
transform: translateX(-100%);
}
}

.actionro{
animation: ugoki 12s linear infinite;
transform: translateX(100%);
}

@keyframes ugoki {
100% {
transform: translateX(-100%);
}
}

.actionl{
animation: ugoki2 8s linear infinite;
transform: translateX(-100%);
}

@keyframes ugoki2 {
100% {
transform: translateX(100%);
}
}

.actionrs{
animation: ugoki3 8s linear infinite;
transform: translateX(100%);
}

.mojibox > .actionrs:hover {
animation-play-state: paused;
cursor: default;
}
@keyframes ugoki3 {
100% {
transform: translateX(-100%);
}
}

「AddQuicktag」を使えばCLASS名を忘れた時でも投稿画面からショートコードで表現できるようになるので便利です。

「AddQuicktag」を使えばCLASS名を忘れた時でも投稿画面からショートコードで表現できるようになるので便利です。

▲プラグイン新規追加で「AddQuicktag」をインストールして有効化!

設定はこんな感じです。

「AddQuicktag」設定

設定が面倒な方、時間がない方は上記の設定をまとめた「AddQuicktag」ファイルをダウンロードしてお使いください。

すでにAddQuicktagを使っている場合はデータが上書きされてしまうので使えません。ゴメンね。

コードを書いたテキストファイル

ダウンロードコチラです

 

CSSの記述は必須です。ダウンロードファイルは安全ですが、気になる方はファイルの上で右クリック「ディフェンダーでスキャン・・・」して安全を確認してからお使いください。開く必要はありません。

ファイルの安全確認の仕方

「AddQuicktag」ダウンロードファイルの使い方

step
1
設定ファイルをダウンロード

さきほどの「AddQuicktag」ファイルをダウンロードしてお使いのパソコンに保存

step
2
「AddQuicktag」をワードプレスにインストール

インストール後に有効化して設定画面に

step
3
設定画面でインポート

先ほどダウンロードしてパソコンに保存したファイルを指定してインポートします。

インポート出来たら「変更を保存」ボタンを押してください。

すでにAddQuicktagを使っている場合はデータが上書きされてしまうので使わないようにしてください。

step
4
CSSを記述

「全体CSS」をコピーして追加CSSに記述、またはスタイルシートに記述してください。

+クリックして下さい

全体のCSS
.mojibox{
overflow: hidden;
position: relative;
}

.actionr{
animation: ugoki 8s linear infinite;
transform: translateX(100%);
}

@keyframes ugoki {
100% {
transform: translateX(-100%);
}
}

.actionro{
animation: ugoki 12s linear infinite;
transform: translateX(100%);
}

@keyframes ugoki {
100% {
transform: translateX(-100%);
}
}

.actionl{
animation: ugoki2 8s linear infinite;
transform: translateX(-100%);
}

@keyframes ugoki2 {
100% {
transform: translateX(100%);
}
}

.actionrs{
animation: ugoki3 8s linear infinite;
transform: translateX(100%);
}

.mojibox > .actionrs:hover {
animation-play-state: paused;
cursor: default;
}
@keyframes ugoki3 {
100% {
transform: translateX(-100%);
}
}

[st-cmemo fonta

これで設定は完了です。

step
5
投稿画面で使ってみる

動かしたい文字の設定

動かしたい文字を範囲して「AddQuicktag」をクリック!

そうするといろいろな動作名が出てくるのでそれをクリックして「更新」

プレビューで確認してください。

設定や使い方をもっと詳しく教えて!という方は下記サービスをご利用ください。

WordPressの初期操作方法について説明します WordPressの操作方法で分からないことはありませんか?

このテーマがおすすめです!

「WING」アフィンガー5

アフィリエイトの成果をアップさせるワードプレステーマ

★アフィリエイトに特化したワードプレステーマ!

WINGはこんな方におすすめ!

アフィリエイトを本気で取り組みたい !

アドセンスブログに本気で挑戦したい!

ドロップシッピングに本気で取り組みたい!

ドロップシッピング×Wordpress制作代行!

Wordpress制作ショップ(ドロップシッピング)

ドロップシッピング×Wordpress ショップ制作をお手伝い!

ドロップシッピングでバリバリ頑張りたい人を応援するひな型・土台ショップが手に入る!

商品ページがすでに実装されているから分かりやすい!構造や商品ページ作りの勉強にもなる!

扱う商品ごとにショップが分かれています!

興味津々のサイトです!

ショップできすぎくん制作代行

ショップできすぎくんで作ったショップ

副業にピッタリ!将来のために収入源を増やそう!ドロップシッピングは無在庫で無料で始められるネットビジネス!しかも梱包・発送作業ナシ!問い合わせ対応ナシ!リスクが最小限で始められるビジネスです。

ショップできすぎくんはMOSHIMOドロップシッピングの公式ショップ作成ツールです。 作り方が分からない方のためにショップ制作を代行します!納品後すぐに使えます! ブログからの誘導、広告を使って初売上を目指しましょう!

★会社勤めの方、主婦の方、子育て中の方、高齢の方!副業にぜひご活用ください!

  • この記事を書いた人
アバター

<50ブログ>

こんにちはこの<50ブログ>を書いている管理人です。職歴は有名チェーン店飲食業が長く現場と管理職を経験しました。広告の営業の仕事もしていた時代もあり、いろんな経験を経て今は独立して広告業とネットショップの構築などの仕事をしています。いろんな経験をもとにわがままに書いてます。日々Wordpressと向き合いHTML、CSSなどと向き合っています。参考になる部分があったら嬉しいです☆50ブログとは、自分の座右の銘です。人は常に50:50の分岐に立たされています。やるかやらないか、どっちにするのか、など。。。話せば長くなるのであとはご想像にお任せします☆

Copyright© 副業・起業に役立つブログ!WEB制作・ネットビジネス応援<50ブログ!> , 2019 All Rights Reserved.