KAZU

2017年よりアフィンガーを愛用中。
シンプルでクールなサイトを作るのが得意。
WordPressを使ったホームページ制作もしています。

挿入した画像をデフォルトでフルサイズ表示させる方法【WordPress】

そんな悩みを解決します。 結論からいうと、 「すべての設定」の中にある「image_dafault_size」という項目を「full」に変更すれば解決できます。 ただ、「すべての設定」は隠しページみたいなものなので、通常のダッシュボードのメニューには表示されていません。 この記事では、 「すべての設定」を表示させる方法「image_dafault_size」を「full」に変更する手順 を解説していきます。 この設定を行えば、挿入した画像はすべてフルサイズ表示させることができますよ。 「すべての設定」を表 ...

スマホヘッダー境界線の影

スマホヘッダーに影をつけてぼかし強度を変更する方法

「アフィンガーはスマホヘッダーの境界線がわかりにくい…」 「SANGOみたいな感じで境界線に影をつけたいな~!」 「影の大きさも変更できないかなぁ…」 という悩みを解決します。 この状態を目指します! これはSANGOのヘッダーです 結論からいうと、CSSを追加して数値を変更すれば可能です。 この記事では、 スマホヘッダーの境界線に影をつける手順影の幅とぼかし強度を変更する方法 この2つを解説していきます。 スマホヘッダーの境界線に影をつける手順 追加するCSSをコピーする まずは以下のCSSをコピーして ...

スマホ検索メニュー

スマホ検索メニューの設定|広告やタグを表示させる方法

今回は、スマホ検索メニューの設定について解説していきます。 スマホ検索メニューとは、スマホサイトのヘッダーに表示させた虫眼鏡アイコンをクリックすると出現するメニューのことです。 スマホ検索メニューは、 オーバーレイスライド この2種類が選択できます オーバーレイ スライド 検索メニューの中には、 検索フォームタグ(キーワード)メニュー(カテゴリー)広告 などなど、自由にコンテンツを挿入できます。 それでは、スマホ検索メニューの設定方法から、スマホ検索メニューに広告やタグを表示させる方法までの手順を解説して ...

【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コード 冒頭でも書いたように、 ...

サーチコンソール

サーチコンソールのHTMLタグを再確認する方法

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

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

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

REMIX ICON ロゴ

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専用ブロック ショートコード使用 白 ◎ ○ 薄青 ○ ○ ...