このブログの内容
bloggerでWebアイコンフォントを使いたい
Instagramのマークとか
Twitterのマークとか
ホームマークとか
箇条書きのマークとか
魚の絵まで！
ただ文章を書くよりもアイコンを使うと、手軽におしゃれにできたり、見やすくできたりします。
例えばこんな風に。
Instagramのマークとか
Twitterのマークとか
ホームマークとか
箇条書きのマークとか
魚の絵まで！
これは無料の「Font Awesome」というWebアイコンフォントを使っています。
引用：Font Awesome
URL：https://fontawesome.com/
bloggerでの使い方をご紹介しますね！
Font Awesomeの使い方
CDNを組み込む
テーマのZELOには、実は旧バージョンのFont Awesomeが組み込んであります。
赤枠のところで、CDNというコードが書いてあります。
ここに、最新のバージョンを組み込んでいきましょう。
Font AwesomeのCDNは「cdnjs」というサイトで調べます。
ブラウザ機能などでサイトを翻訳しないようにご注意ください！コードが変わってしまいます。
引用：cdnjs
URL：https://cdnjs.com/libraries/font-awesome
Font Awesomeの最新CDNは6.2.1のようです。（2023.2現在）
テーマのHTMLの編集で、もともとあるFont Awesomeのコード
<link href='https://use.fontawesome.com/releases/v5.0.11/css/all.css' rel='stylesheet'/>
をコピーしておきます。
サイトの「cdnjs」で「Font Awesome」を調べて、一番上に出てくるコードをコピーします。
<!--<link href='https://use.fontawesome.com/releases/v5.0.11/css/all.css' rel='stylesheet'/>-->
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css' rel='stylesheet'/>
テーマのHTMLの編集で、hrefの中を書き換えます。
もともとのコードは<!-- -->でコメントアウトしておきましょう。
これで、最新のFont Awesomeを使う準備ができました！
Font Awesomeのアイコンを貼る
Font Awesomeのトップページのメニューから、「icons」を選択します。
ブラウザ機能などでサイトを翻訳しないようにご注意ください！コードが変わってしまいます。
「free and open-source icons」を選択します。
好きなアイコンを選択すると、そのアイコンのコードが表示されます。
HTMLのところにあるコードをクリックするとコピーできます。
この時、ロケットマークの黄色いボタンが、「Start Using This Icon」になっていればOKです。
もしこのように「Start Using This Pro Icon」になっていたら、無料ではないので使用できません。
コピーしたコードを表示したいところに貼り付けます。
記事の本文にペタリ。
一番上は無料のもの、下の二つは有料のものです。
1番上は希望通りに、2番目はSharpにしたのですが反映していません。
3番目は文字化けしています。
2番目と3番目は有料だからですね。
おわりに
Webアイコンフォントの設定、いかがでしたでしょうか？
アイコンを工夫して使うと、一気にサイトの見た目がグレードアップしますよね。
自分だけのブログにしてみましょう！
ぜひチャレンジしてみてくださいね。
無料で自由なbloggerを楽しみましょう！
0 件のコメント :
コメントを投稿