KAZU

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

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

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

ここでは、サーチコンソールのHTMLタグ（メタタグ）を再確認する手順を解説します。 AFFINGER6では、サーチコンソールのHTMLタグ（メタタグ）の一部を入力するだけで、サーチコンソールが使用できます。 必要なのは、以下に表記した部分だけです。 <meta name="google-site-verification" content="ここの部分のみ" /> HTMLタグ（メタタグ）は、「所有者の確認」から確認できます。 「HTMLタグの確認方法がわからない」 という方は参考にしてくださ ...

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

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

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

という悩みを解決します。 スライドメニュー内にバナー広告を表示させる方法は3パターンあります。 マイブロックに登録しショートコードをウィジェットに貼り付けるウィジェットに直接広告コードを貼り付けるブロックエディタで整形したコードをウィジェットに貼り付ける いちばん簡単なのは ①の「マイブロックに登録しショートコードをウィジェットに貼り付ける方法」です。 今回はこの方法を詳しく解説していきます。 「マイブロック」とは よく使うブロックパターンを登録しておくことで簡単に呼び出せるようになるAFFINGER6専 ...

という悩みを解決します。 サイトのタイトルに影をつけるには、テキストシャドウにヘッダーを指定する必要があります。 といっても難しいことはありません。30秒で終わります。 それでは、ヘッダーに表示するサイトタイトルに「影」を追加する方法について解説していきます。 ※サイトタイトルを大きくする方法もあります！ https://the-affinger.com/title-css/ 参考 サイトのタイトルに影を追加する方法 サイトタイトルの影の追加は、テーマ管理の全体設定で行います。 具体的には、テキストシャド ...

という悩みを解決します。 結論から言うと、普通の設定ではなくCSSコードを追加する必要があります。 「CSSをいじるのは怖いなぁ…」 という方でも大丈夫。 アフィンガーにはCSSを追加できる項目があるので、コードのコピペだけで簡単に完了しますよ（約一分）。 ※サイトタイトルに影をつける方法もあります。 参考：サイトのタイトルに影(テキストシャドウ)を追加する方法 サイトタイトルのサイズを大きくする手順 サイトタイトルのサイズを大きくする手順は以下の通り。 追加するCSSコードをコピーするカスタマイズの「追 ...