知識ゼロでもOK!WordPressブログにアニメーションを導入する方法

この記事を書いている人 - WRITER -

広島出身、関西在住のセールスコピーライター。
ブログやメルマガといったツールを活用し、文章で信頼関係を築くライティングを得意としている。

自身が過去に病気を患ったことがきっかけで、大切な人(家族、友人)と過ごす「当たり前の日常」に幸せを感じるようになった、2人の娘を持つパパライター。

➡詳しいプロフィールはこちら

中村 悠

 

びっくりしました?

よく参考にさせてもらっている方のブログで面白いプラグインがあったので、紹介してみようと思います。

知識ゼロでも遊べるプラグイン

CSSなど全く分からないぼくでもWordPressならこんなことも簡単にできちゃうんです。

 

 

面白いでしょ?

 

知りたい?

 

 

分かりました。いつも読んでくれるあなたにこっそり教えます^^

 

ただし、今回の記事は、WordPressを使っていないと使えない技なんで、アメブロとかはてなブログとか使ってる人は使えないので注意してくださいね。

 

素人に遊びごごろを持たせてくれるプラグイン『ShortcodesUltimate』

 

ワードプレスに慣れているなら『Shortcodes Ultimate』をインストールして有効化!って言うだけで伝わりますよね、レッツトライ♪

 

プラグイン?なんだそれ!おいしいの??って意味が分からない、あなたは今から伝える手順でプラグインをインストールしてください。

 

▼まずは、メニューの中で「プラグイン」にカーソルを当てると出てくる新規追加メニューをクリック。

%e6%96%b0%e8%a6%8f

 

▼すると、プラグインメニューが出てくるので、右上の検索窓に「Shortcodes Ultimate」と入れてEnterキーを押します。

2016-11-18-3

 

▼「Shortcodes Ultimate」というのが出てくるので、プラグインの名前が、ちゃんと合っているか確認して『今すぐインストール』をクリックしちゃいましょう。

%e3%82%ad%e3%83%a3%e3%83%97%e3%83%81%e3%83%a3

インストールが終わったらちゃんとプラグインを有効化しておきましょうね。

これで準備は万端!

 

「Shortcodes Ultimate」を実際に使ってみよう

ここからが難しいと思っているかもしれませんが、本当に簡単です。
記事の投稿の編集画面を見てみてください^^

 

▼投稿の編集画面の上のほうに『ショートコードを挿入』っていうボタンが追加されているはずです。これをクリックしてみてください。(※Shortcodes Ultimateっていうプラグインをインストールしていないと出ません)

%e3%82%b7%e3%83%a7%e3%83%bc%e3%83%88%e3%82%b3%e3%83%bc%e3%83%89%e2%91%a1

 

▼ショートコードをクリックしたらズラーッとメニューが出てくるので、その中からアニメーションを選んでクリックしてください。

2016-11-18-5

▼アニメーションをクリックしたら次にちょっと小さめの画面が出てきます、ここであなたが付けたいアニメーションの設定が出来ます。

メニューの中では

  1. アニメーションの種類
  2. アニメーションの時間
  3. 遅延時間(どれくらい時間差で出現させるか)

を入力していきます。
2016-11-18-7

 

最後にアニメーションとして動かしたいコメントを入力してショートコードを挿入ボタンを押せばテキストにアニメーションのコードが反映されます。(ショートコードは英語が並んでいるようなコードです)

2016-11-18-8

▼こんなショートコードが入ります。
ko-do

 

で、実際にプレビュー画面を見てみるとアニメーションが動くんです(ちょっとじっとしてみてみてください)

 

おまけの説明をするよ

ショートコードっていうのは [] で書かれた部分のコードの事を言います

 

今回の例で言うと、「こんな感じで完成したコメントがうごきますよー」っていう文字が[su_animate type=”flip” duration=”5″]と[/su_animate]で挟まれてるのが分かりますか?

分かりやすくすると以下のような感じですね。

su_animate type=”flip” duration=”5″】こんな感じで完成したコメントがうごきますよー【/su_animate】

 

実は文字だけじゃなくて画像も動かせます。

文字が入っていたところに画像を入れると、なんと!画像もアニメーションで動いちゃうんです。

su_animate type=”flip” duration=”5″】ここに画像【/su_animate】

 

いかがでしょうか?
こんな簡単にアニメーションが導入できちゃうんですね。

アニメーションも使いこなせば人とは少し違うブログが書けますよ♪

ではまた^^

 

⇒当サイトに来られた方はこちらのページもご覧になっています

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA