WEBアイコン

【Font Awesome 6】WebアイコンをAFFINGER6で使うためのコード取得方法

今回は、Font Awesome（Version6）のWebアイコンをAFFINGER6で使うためのコード取得方法について解説します。「Font Awesome 6」のWebアイコンを使う方法は3つあります。 CDNコードを使うKitコードを使うサーバーにアイコンデータをアップロードする CDNとは CDNは「Content Delivery Network」の略で、同じコンテンツをユーザーの端末に効率的に配布するために使われる仕組みです。つまり、専用のサーバー上にある画像やフォントなどのデータを読み ...

【最新】FontAwesomeの登録方法｜アカウント作成の手順を解説

ここでは、FontAwesomeの登録方法として「アカウント作成の手順」を紹介します。 FontAwesomeの「Kit'sコード」を使用するには、アカウント登録が必須です。 Kit'sコードとは自サイトのサーバーにアップロードすることなく、JavaScript配信でWebアイコンを表示させるためのコードです。アカウント登録に必要なのは、登録用のメールアドレスとパスワードだけ。個人情報などを登録する必要はないので安心してください。それでは詳しく解説していきます。 FontAwesomeのアカウント ...

Font AwesomeのWebアイコンが表示されない時の対処法

という疑問に答えます。結論からいうと、Font Awesomeのバージョンが古いことが原因です。対策としては、「Kit'sコード」を使用している場合「CDNコード」を使用している場合それぞれやり方が異なります。それぞれ詳しく解説していきます。「Kit'sコード」を使用している場合まずは、「Kit'sコード」を使用していて、特定のWebアイコンが表示されないときの対策を解説します。「Kit'sコード」は、「script」で挟む以下のようなコードです。 Kit'sコード冒頭でも書いたように、 ...

Webアイコンを文章中に表示させる方法｜色やサイズ変更も簡単！

という方のために、簡単な方法をご紹介します。やり方としては、 HTMLとして編集するショートコードを使用するこの2パターンあるんですが、今回は「ショートコードを使用する方法」をおすすめします。なぜなら、HTMLとして編集するよりもショートコードを使用するほうが簡単だからです。コードエディタで記事を執筆している方は例外です。それではショートコードを使ったWebアイコンの表示方法について詳しく解説していきます。 Webアイコンを好きな場所に表示させる方法冒頭でも書いたように、AFFINGER6では ...

Webアイコン「REMIX ICON」をAFFINGER6で使用する方法

ここでは「REMIX ICON」のWebアイコンをAFFINGER6で利用する手順を詳しく解説します。「REMIX ICON」とは、1300もの汎用的で使いやすいWebアイコンを無償提供しているサイトです。サイトはこちら→ https://remixicon.com/ Webアイコンといえば「Font Awesome」が有名なんですが、実はいろいろ制限があって使いにくいところがあります。たとえば、AFFINGER専用ブロックでは一部のアイコンが使えないとか・・・「REMIX ICON」のいいところ ...

【AFFINGER6】よく使うWebアイコンをまとめました

ブログでよく使うWebアイコンをまとめました。使用するWebアイコンは、 AFFINGERオリジナルアイコンFont AwesomeREMIX ICON この3つです。 ※REMIX ICONを使用する方法は以下の記事を参考にしてください。 https://the-affinger.com/remixicon/ 参考記事それぞれアイコンの形や大きさなどが微妙に違うんですが、ここではWebアイコンの特性は解説しません。背景色 AFFINGER専用ブロックショートコード使用白 ◎ ○ 薄青 ○ ○ ...

ヘッダー横メニューにWEBアイコンを表示させる方法

ここでは、ヘッダー横メニュー「ヘッダーメニュー（横列）」にWEBアイコンを表示させる方法を解説します。 WEBアイコンを表示させためた例ヘッダー横メニューにWEBアイコンを表示させるには、「Font Awesome」のWEBアイコンを使用します。そのための準備として、「FontAwesome」のアカウント登録使用するためのコードをheadに貼り付けるこの2つを終えていないと「Font Awesome」を使用することができません。 ※WEBアイコンを使えるようにする手順は、以下の記事を参考にしてく ...

【AFFINGER6】ヘッダーメニューにWEBアイコンを使うための方法を２つ解説

「あれ？　アフィンガー６に変えてから、ヘッダーメニューに表示させていたWEBアイコンが消えてる……」「え、なんで？どうすればいいの？」という悩みに答えます。実際に僕もこの問題に直面してけっこう悩みました。一応「ACTION（AFFINGER６）」のマニュアルにはFont Awesomeについて書いてあるんですが、それでも「え、どういうこと？」ってなったからです。そこで解決策を調べまくりました。ヘッダーメニューにWEBアイコンを表示させる方法は２つあります。アフィンガー管理メニューの設定を変 ...