KAZU
【最新】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コード 冒頭でも書いたように、 ...
サーチコンソールのHTMLタグを再確認する方法
ここでは、サーチコンソールのHTMLタグ（メタタグ）を再確認する手順を解説します。 AFFINGER6では、サーチコンソールのHTMLタグ（メタタグ）の一部を入力するだけで、サーチコンソールが使用できます。 必要なのは、以下に表記した部分だけです。 <meta name="google-site-verification" content="ここの部分のみ" /> HTMLタグ（メタタグ）は、「所有者の確認」から確認できます。 「HTMLタグの確認方法がわからない」 という方は参考にしてくださ ...
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専用ブロック ショートコード使用 白 ◎ ○ 薄青 ○ ○ ...
スマホのスライドメニュー内にバナー広告を表示させる方法
という悩みを解決します。 スライドメニュー内にバナー広告を表示させる方法は3パターンあります。 マイブロックに登録しショートコードをウィジェットに貼り付けるウィジェットに直接広告コードを貼り付けるブロックエディタで整形したコードをウィジェットに貼り付ける いちばん簡単なのは ①の「マイブロックに登録しショートコードをウィジェットに貼り付ける方法」です。 今回はこの方法を詳しく解説していきます。 「マイブロック」とは よく使うブロックパターンを登録しておくことで簡単に呼び出せるようになるAFFINGER6専 ...
サイトのタイトルに影(テキストシャドウ)を追加する方法
という悩みを解決します。 サイトのタイトルに影をつけるには、テキストシャドウにヘッダーを指定する必要があります。 といっても難しいことはありません。30秒で終わります。 それでは、ヘッダーに表示するサイトタイトルに「影」を追加する方法について解説していきます。 ※サイトタイトルを大きくする方法もあります！ https://the-affinger.com/title-css/ 参考 サイトのタイトルに影を追加する方法 サイトタイトルの影の追加は、テーマ管理の全体設定で行います。 具体的には、テキストシャド ...
サイトタイトルのサイズを大きくする方法｜CSSコードを追加する
という悩みを解決します。 結論から言うと、普通の設定ではなくCSSコードを追加する必要があります。 「CSSをいじるのは怖いなぁ…」 という方でも大丈夫。 アフィンガーにはCSSを追加できる項目があるので、コードのコピペだけで簡単に完了しますよ（約一分）。 ※サイトタイトルに影をつける方法もあります。 参考：サイトのタイトルに影(テキストシャドウ)を追加する方法 サイトタイトルのサイズを大きくする手順 サイトタイトルのサイズを大きくする手順は以下の通り。 追加するCSSコードをコピーするカスタマイズの「追 ...
AFFINGER6 サイドバーのサムネイル画像を大きくする方法
という悩みを解決します。 AFFINGER6には、サムネイル画像を大きくする設定があるので、そこを変更するだけでサムネイル画像は大きくなります。 イメージとしては以下のような感じです。 大きさ変更イメージ ただし、サムネイル画像を大きくすることによるデメリットもあります。 そこで今回は、サイドバーのサムネイル画像を大きくする設定と、それに伴うデメリットもあわせて解説します。 サイドバーのサムネイル画像を大きくする設定 サイドバーのサムネイル画像を大きくするための設定は「テーマ管理（AFFINGER 管理） ...
