当サイトはアフィリエイトプログラムを利用し商品を紹介しています

Font AwesomeでYoutubeのアイコンを取得してみた

Font AwesomeでYoutubeのアイコンを取得してみた

WordPress,Font Awesome

流行りのFont Awesomeを使ってYoutubeのアイコンを取得してみました。Font AwesomeはWordPressでブログ運営してる方ならユーザー登録するだけで簡単に利用出来るアイコン集です。

Font AwesomeでYoutubeのアイコンを取得してみた


Font Awesomeとは

Font Awesomeとはフリーのアイコンツールキットで(有料もあり)、WordPressなどでブログを運営している方であれば以下のようなアイコンが簡単に利用可能です。

Font AwesomeはWordPressでブログ運営してる方ならユーザー登録するだけで簡単に使える便利なアイコン集です

私の運営しているサイトのテーマはギターなので、参考としてよくYoutubeの動画を貼ります。

個別のYoutube動画を埋め込むのはもちろん、検索結果のurlを貼っておくとリンク切れの心配がないのでメンテナンスが楽ですよね。

今まではこんな感じでurlと自作のアイコンを使っていたのですが、

YouTube動画>自作アイコン

今流行りのFont Awesomeを導入してみました。

>Font Awesomeのアイコン

今までの自作アイコンだと、スマートフォンで拡大すると画像が荒くなってしまいましたが、Font Awesomeだと拡大しても劣化しないのが良いですね。

Font Awesomeと自作のアイコン

Font Awesomeを利用するには

Font Awesomeを利用するには、まずオフィシャルサイトへ行ってユーザー(メールアドレスを)登録するだけで簡単にアイコンを使うことが出来ます。

ユーザー登録後、WordPressの管理画面に入り、ユーザー登録の際に取得したkitコードをサイトのhead内に貼り付けます。

 

で、使いたいアイコンのurlにアクセスし、

ユーチューブのfontawesome
Youtube Icon – Brands _ Font Awesome

タグを取得して表示させたい部分に貼り付けるだけです。

色などを変更したい時は、スタイルシートに色情報を記入すればOK

Luxeritasの場合は>子テーマの編集>スタイルシート

こんな感じでとりあえずは出来ました。

旧;
YouTube動画 SEYMOUR DUNCAN SLS-1 – YouTube (動画)

新;
SEYMOUR DUNCAN SLS-1 – YouTube (動画)

この取得したタグは定型文に保管していつでも呼び出せるようにしてあります。

 

スタイルシートとかイマイチよく分かってなくて説明出来ないので、参考にしたサイトを貼っておきますね(^^ゞ

 

今までの自作アイコンはSearch Regex or Better Search Replaceで一括置換しました。

Luxeritasに入れたほうが良いプラグイン

 

Font Awesomeとっても便利ですね👍

 

ただPageSpeed Insightsでページを計測すると、ほんの少し重くなります。

PageSpeed Insightsでサイトを計測するとfontawesomeはほんの少し重くなるようです

参考サイト

追記:LuxeritasのFont Awesome設定

私が愛用しているWordPressの無料テーマ「Luxeritas」はFont Awesomeが標準で使用できるようになっています

Luxeritasの場合は、特にHead タグにkitコードを記述しなくてもそのまま使用できるようですね>最近気づいた(^^ゞ。

 

WordPressの管理画面の、Luxeritas>アイコンフォントにあるFont Awesomeにチェックを入れるだけでOK!

LuxeritasのFont Awesome設定

アイコン一覧をクリックすると様々なアイコンが登録されていて、色指定も簡単にできます。

 

Luxeritasってなんかいろいろ凄いですね(^^)。

 

別途kitコードを貼らなくても動作するので速度も改善されました👍

 

Luxeritas関連の記事一覧


2021年5月10日ブログ運営

Posted by Tsune