どうもほのぱぱです！
WordPressでブログを開始して、テーマ「JIN」を使用しています。
そして、スマホ固定フッターメニューのアイコン表示させるところまで行きました。
次にやりたかったこと。
アイコンを動かしたい( *´艸｀)
動いていると、やっぱり目立ちますしクリックしたくなるように思えます。
でも、初心者のわたしにとっては、動くアイコンの表示させるだけでも一苦労でした(笑)
なので、初心者の方が分かりやすいように詳しく説明したいと思います！
目次
動くアイコンを設定する前に
動くアイコンの設定する前にいくつか注意点があります。
動きを入れる前に、先にこれらができているかチェックしてみてください。
Font Awesomeでアイコン表示
動くアイコンの表示の前にやっておきたいことです⇓
- Font Awesomeでアイコン表示設定が終わっている
- スマホ固定フッターメニューの設定が終わっている
もし設定がまだの方は先にそれらの設定をしちゃってください。
設定の仕方がわからない場合、よかったら参考にしてください⇓
動くアイコンが表示されないときは「”」に注目
あともう一つ注意点です。
初心者の私は動くアイコンが上手に表示されなくて、1時間くらい迷走していました(笑)
何があったかというと
参考にしたページからコードを、htmlタグやメニューの設定欄にコピペしたときです。
このとき「”」が全角になっていました( ;∀;)
コピペするときに勝手に全角になってしまったのか分かりませんが、勝手に変換される仕様なのかもしれません。
これを「”」半角に変換したら解決しましたので、もし上手に表示されなかった場合は一度確認してみてください。
- コードをhtmlタグ張るときに「”」を小文字に
- アイコンコードをコピペするときに「”」を小文字に
動くアイコンの設定方法
コードをhtmlタグに追加
それでは動くアイコンを表示させるやり方です。
まず、htmlタグに専用コードをコピペします。
では貼り方の説明です。
このコードをコピーしたら
【外観】⇒【テーマエディター】を開きます。
開いたら、右のほうのサイドバーの【テーマヘッダー】をクリックします。
そして少し下にスクロールすると
【</head>】があります。
</head>の前に先ほどコピーしたコードを減りつけて保存です。
これでとりあえず事前準備は完了です！
- htmlの編集は慎重にお願いします。
- 作業の前にバックアップをとることをおすすめします。
アイコン動作コードを記入
次に動くアイコンのコードを設置していきます。
コードはこれです。これはツイッターのアイコンです。
アイコンコードとアニメーションコードを好きなものに変更したら、好きなアイコンが好きな動作をするようになります。
アイコンコードとアニメーションコードの間は【半角で空白があります】の注意です。
それでは画像も合わせて設定の方法を説明します。
【外観】⇒【メニュー】をクリックして、【スマホ固定フッターメニュー】を表示させてください。
通常は下のようになっていると思います。
- 【ナビゲーションラベル】の部分に【名前】
- 【説明】の部分に【アイコンコード】
このようになっていると思われます。
ですが、動くアイコンを表示させる場合は、この２つを変更します。
- 【ナビゲーションラベル】に先ほどのコードを貼る
- 【説明】は空欄に
この変更ができたら保存して動作確認してみてください。
アイコンの種類と動作の種類の変更
アイコンの種類の変更
先ほどのコードの一部をFont Awesomeから取得したアイコンコードに置き換えるだけでできます。
ここの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=”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でアイコンの動きを表示する方法でした。
最後まで読んでいただきありがとうございました。
もしもアフィリエイト
アクセストレード
A8.net
