ブログ運営・活用術

WordPress【動くアイコン】をスマホ固定フッターメニューで使用する方法

どうもほのぱぱです!

WordPressでブログを開始して、テーマ「JIN」を使用しています。

そして、スマホ固定フッターメニューのアイコン表示させるところまで行きました。

次にやりたかったこと。

アイコンを動かしたい( *´艸`)

↖スマホ固定降ったメニューのアイコン

ほのぱぱ
ほのぱぱ
動くと目につきますし、なかなか動きも可愛いですよね

こんな感じです ⇒  

動いていると、やっぱり目立ちますしクリックしたくなるように思えます。

 

でも、初心者のわたしにとっては、動くアイコンの表示させるだけでも一苦労でした(笑)

なので、初心者の方が分かりやすいように詳しく説明したいと思います!

動くアイコンを設定する前に

動くアイコンの設定する前にいくつか注意点があります。

動きを入れる前に、先にこれらができているかチェックしてみてください。

Font Awesomeでアイコン表示

動くアイコンの表示の前にやっておきたいことです⇓

娘ちゃん
娘ちゃん
ちぇっくだよ

 

  • Font Awesomeでアイコン表示設定が終わっている
  • スマホ固定フッターメニューの設定が終わっている

もし設定がまだの方は先にそれらの設定をしちゃってください。

設定の仕方がわからない場合、よかったら参考にしてください⇓

【WordPress】スマホ固定フッターメニューの設定方法とFont Awesomeでアイコン利用する方法スマホフッターメニューの設定方法と「START USING FREE」を活用したアイコンの表示方法を解説します。...

動くアイコンが表示されないときは「”」に注目

あともう一つ注意点です。

初心者の私は動くアイコンが上手に表示されなくて、1時間くらい迷走していました(笑)

ほのぱぱ
ほのぱぱ
初心者あるあるかもしれません

娘ちゃん
娘ちゃん
なにがあったの?

 

何があったかというと

参考にしたページからコードを、htmlタグやメニューの設定欄にコピペしたときです。

このとき「”」が全角になっていました( ;∀;)

コピペするときに勝手に全角になってしまったのか分かりませんが、勝手に変換される仕様なのかもしれません。

これを「”」半角に変換したら解決しましたので、もし上手に表示されなかった場合は一度確認してみてください。

  • コードをhtmlタグ張るときに「”」を小文字に
  • アイコンコードをコピペするときに「”」を小文字に

動くアイコンの設定方法

コードをhtmlタグに追加

それでは動くアイコンを表示させるやり方です。

まず、htmlタグに専用コードをコピペします。

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css” type=”text/css” media=”all” />

 

ほのぱぱ
ほのぱぱ
このコードをhtmlタグ設定に貼ると動くアイコンが自分のページで使うことができるようになります

 

では貼り方の説明です。

このコードをコピーしたら

【外観】⇒【テーマエディター】を開きます。

開いたら、右のほうのサイドバーの【テーマヘッダー】をクリックします。

 

 

そして少し下にスクロールすると

【</head>】があります。

</head>の前に先ほどコピーしたコードを減りつけて保存です。

これでとりあえず事前準備は完了です!

 

ほのぱぱ
ほのぱぱ
この時「”」が全角になっていたら半角にしてください

  • htmlの編集は慎重にお願いします。
  • 作業の前にバックアップをとることをおすすめします。

アイコン動作コードを記入

次に動くアイコンのコードを設置していきます。

コードはこれです。これはツイッターのアイコンです。

<i class=”fab fa-twitter faa-wrench animated“></i>

<i class=”アイコンコード アニメーションコード“></i>

 

アイコンコードアニメーションコードを好きなものに変更したら、好きなアイコンが好きな動作をするようになります。

アイコンコードアニメーションコードの間は【半角で空白があります】の注意です。

 

それでは画像も合わせて設定の方法を説明します。

外観】⇒【メニュー】をクリックして、【スマホ固定フッターメニュー】を表示させてください。

 

通常は下のようになっていると思います。

  • 【ナビゲーションラベル】の部分に【名前】
  • 【説明】の部分に【アイコンコード】

このようになっていると思われます。

 

ですが、動くアイコンを表示させる場合は、この2つを変更します。

  • 【ナビゲーションラベル】に先ほどのコードを貼る
  • 【説明】は空欄に

この変更ができたら保存して動作確認してみてください。

ほのぱぱ
ほのぱぱ
ここでも「”」が半角になっているか確認してください。私これでめちゃさまよいました( ;∀;)

アイコンの種類と動作の種類の変更

アイコンの種類の変更

先ほどのコードの一部をFont Awesomeから取得したアイコンコードに置き換えるだけでできます。

<i class=”fab fa-twitter faa-wrench animated“></i>

<i class=”アイコンコード アニメーションコード“></i>

ここのfab fa-twitterを好きなアイコンコードに変更したら、そのアイコンが表示されます。

 

 

Font Awesomeでアイコンコードを取得します。

とりあえずホームのアイコンで説明します。

サイトにいき、英語で「home」と入力して検索。するとホームに関係あるアイコンがいっぱいでますので、好きなアイコンをクリックです。

次にアイコンコードを取得します。オレンジの四角い部分をクリックするとコピーしてくれます。

 

 

Font Awesomeでコピーされたコードはこちらです⇓

<i class=”fas fa-home“></i>

これの周りの余分なコードを外します。

fas fa-home

この状態にして、動くアイコンコードに貼り付けると、動くホームのできあがりです。

<i class=”fas fa-home faa-wrench animated“></i>

このコードの動くホームのアイコンです⇒  

アイコンの動作の変更

次に動作の変更です。

動作の変更も先ほどと同じように青い部分の【アニメーションコード】を変更するだけでできます。

<i class=”fab fa-twitter faa-wrench animated“></i>

<i class=”アイコンコード アニメーションコード“></i>

こんな感じです⇒   

 

よく使いそうなアイコンの動きのおすすめを5つ抜粋してみました。

ふるふる <i class=”fas fa-home faa-wrench animated”></i>
ぶるっっ <i class=”fas fa-home faa-ring animated”></i>
ぴょんっ <i class=”fas fa-home faa-bounce animated”></i>
くるくる <i class=”fas fa-home faa-spin animated”></i>
でーんっ <i class=”fas fa-home faa-tada animated”></i>

 

 

これ以外にも、アイコンの動きはもっといっぱいあって、色やサイズも変えれます。

私も動くアイコンを設定したときはこちらのサイトを参考にさせていただきました。

⇓良かったら見てみてください⇓

ゆるりとぷらす〜育休の有効活用〜

 

まとめ

もともとスマホ固定フッターメニューの設定をされている方でしたら、設定自体はそんなに難しくないように思えます。

 

動くアイコンを使用することによって

  • クリックしてほしいところを目立たせることができる
  • 可愛い柔らかい雰囲気を出せる

この辺がメリットかなぁって思います。

ほのぱぱ
ほのぱぱ
表示速度がやや下がりそうなのが心配ですが。。

ほのぱぱ
ほのぱぱ
表示速度は気になるけど、「思い通りの可愛いブログを作成したい」「クリックしてほしいところを目立たせたい」場合に動くアイコンはとっても有効と思われます

 

何度もしつこいですが、「”」の部分だけ半角かどうかチェックしてみてください。

 

以上で、Wordpress JINでアイコンの動きを表示する方法でした。

最後まで読んでいただきありがとうございました。

【ブログ専用オリジナルアイコン】ココナラを利用してイラスト作成方法ココナラに登録して、オリジナルのアイコンを依頼して作っていただきました。ブログ・ツイッター等のアイコンを探している方は要チェックです!...
Googleアドセンス審査「価値の低い広告枠(コンテンツの複製)」挫折から合格へ!2019年、ブログ初心者が苦労してGoogleアドセンス合格した時の話です。審査不合格は約18回。改善したポイントを細かく解説します!...
ブログ運営に欠かせないASP
もしもアフィリエイト
ブログ初心者の方に、まずお勧めしたいASPはもしもアフィリエイトです。
広告内容も豊富で使いやすく、当ブログの育児グッズでもお世話になっています。もしもアフィリエイトの1番良い部分はAmazonと楽天の広告を同時に出すことができるところ。
特にAmazonアソシエイトの審査合格した方におすすめです!楽天と併用して、クリック率アップに繋がると思います!

 

詳細ページ公式ページ

アクセストレード
アクセストレード パートナーサイト募集
おすすめ度第2位にアクセストレードを選ばさせていただきました!
アクセストレードは、A8netなどに比べると広告の種類や数は少ないですが、金融系・転職系がとても強いASPです。
他のASPの期限切れの時のサブ用や、金融系・転職系のアフィリエイト広告を出したい方は登録しておくべきです!

 

詳細ページ公式ページ

A8.net
国内最大級のアフィリエイトサービスで、広告主数が19,000社以上もあり、ほとんどの書きたい広告をカバーできると思います。
アフィリエイトを始める方は、まずはA8netを登録しておいて損はないはず。
1番の魅力は、広告の種類や数が多いことも嬉しいですが、何といっても審査がめちゃ通りやすいところ。アフィリエイト初心者の方に、1度試してほしいASPです。

 

詳細ページ
公式ページ