ブログ運営

WordPress テーマJIN(ジン)でアイコンを動かす方法【つまづくポイントの解説あり。】

Marさん
Marさん
こんにちは!まーさんです。
よかったらTwitterもチェックしてみてくださいね。
@Mar_san_blog

右のツイッターアイコン⇒()プルプル動いてますかね?
以前どこかのブログで見かけて、

「ほーーーん。洒落とるやん?やってみよか。」

と思い、導入してみました。

設定自体はとても簡単なのですが、意外な事でつまづいた(動かなかった)ので備忘録として残しておきます。

似たような環境なのに「なぜかうまく行かない。(憤怒)」とか「そもそもどうやんの?」とか言う人は見てみてください。

前提

動作(検証)環境

以下のバージョンのワードプレス+テーマ【JIN】の環境でのみ検証しています。
ワードプレス ver 4.9.8
テーマ JIN ver 1.770

その他

headタグにコードを追加するので、実施は自己責任でお願いします。

アイコンを動かす方法

参考にしたサイト

ゆるりとぷらす

WordPress『JIN(ジン)』カスタマイズアイコンを動かす方法☆

https://yurupura.com/blog/jincustomize2/

基本的な手順

参考ページにはいろいろ書いてありますが、下記①と②だけで動くようになります。

①headタグにコードを追加する。

参考サイトの

『1、下記のコードをheadタグに追加します!このコードを追加しないとアイコンは動きません。』

という文章の下にあるコードをhead内に追加してください。

他のコードがある場合には最後に追加してください。
追加したら登録をクリックして、何でも良いので記事を開いてください。

②記事内にアイコンのコードを書く

記事を開いて「テキスト」に下記コードを書いてみてください。

<i class="fab fa-twitter fa-lg faa-ring animated"></i>

「ビジュアル」タブに戻ると「」<-こんなアイコンになっていると思います。
正しく設定できていれば、記事のプレビューで動きを確認することが出来ます。
(エディタ内では動きません。)

このアイコンは、FontAwesome(以下フォントオーサム)が提供していて、JINテーマではコードを書くと自動的に取得して表示してくれます。

完了

プレビューで動いているのが確認できれば完了です。

スコさん
スコさん
え?これだけ?
Marさん
Marさん
うん。これだけ。

「おい、アイコンみえねーし、うごかねーぞ!(憤怒)」て人は下を見てみてね。

つまづくポイント

コードのダブルクォーテーションが全角

参考サイトのコード、ダブルクォーテーションが全角になってます。。
※2018/12/05時点

どうやらワードプレスの仕様で、本文中の半角「“」等は、投稿すると勝手に全角に変換されてしまうようです。(この文のダブルクォーテーションも全角で表示されているはずです。)

テキスト内に打ち込んだ、コードとしての「”」は大丈夫です。

また、本文中でも「整形済みテキスト」を使えば半角のまま表示できます。

半角⇒「"」全角⇒「”」 整形済みテキスト

もうhead内に貼り付けてしまった方は、直接半角に打ち替えてください。
まだ貼り付けていない方は、メモ帳かなにかにコピーして打ち替えてからコピーしましょう。

Marさん
Marさん
これで1時間以上なやんでもうた。。

うまくいかない人は、いちど半角全角をチェックしてみてください。

テキストエディタで見てやっと気付いた。

JINが対応しているのはver5.1まで

フォントオーサムのアイコンコードを使うためには、通常はCDNコードというものをフォントオーサムサイトから入手して、head内に記入する必要があります。

しかし、JINの場合には内蔵されているため、CDNコードの記入は不要です。

Marさん
Marさん
ただし、アイコンを動かすためのコードはhead内に追記が必要です。

JIN ver1.770ではどうやらアイコンのバージョン5.1まで対応していそうです。

使いたいアイコンのバージョンを確認してから張り付けてください。

アイコンのバージョンが5.1よりも大きい場合、アイコンが表示されません。

アイコンのバージョンは、アイコンコードの隣に「update 5.0.0」のように書いてあります。

Tips

アイコンのコードの調べ方

下記のサイトに行って、使いたいアイコンをクリックしてください。
※色が濃い「Free」が無料で使えるアイコンです。

フォントオーサム

https://fontawesome.com/

フォントオーサムで使いたいアイコンをクリックすると、↓のようなページが表示されるので、「Click to Copy HTML」と書かれている場所をクリックしてください。

クリックすると「Copied」と表示され、クリップボードにコピーされた状態になります。

そのままワードプレスの記事の「テキスト」に貼り付けてください。

コードを追加して、大きさを変えることもできます。

大きさ・動きのコード追加

・サンプルコード

<i class="fas fa-address-card fa-5x faa-ring animated"></i>

上のようにアイコンのコードの中に半角スペースを空けてコードを追加しましょう。

・サンプルコードの意味

fas fa-address-card アイコンの種類を表しています。※必須
fa-5x 大きさを表しています。※任意
faa-ring animated 動きを表しています。※任意

動きのコード一覧

・動き一覧(大きさは2倍 fa-2x になっています。)
 faa-wrench animated
 faa-ring animated
 faa-horizontal animated
 faa-vertical animated
 faa-flash animated
 faa-bounce animated
 faa-spin animated
 faa-float animated
 faa-pulse animated
 faa-shake animated
 faa-tada animated
 faa-passing animated
 faa-passing-reverse animated
 faa-burst animated

その他

その他詳しいことはサルワカ先生の下記ページに書かれています。

サルワカ

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

https://saruwakakun.com/html-css/basic/font-awesome

アイコンを動かす方法(おさらい)

初回

ヘッダーにコードをコピーする。

記事を書くとき

①使いたいアイコンのコードを「フォントオーサム」で調べてコピペする。
②動かすコードや大きさを追記する
③プレビューで動きをチェックする。

Marさん
Marさん
みなさんも気に入ったアイコン探してみてください。

COMMENT

メールアドレスが公開されることはありません。