KAZU

この記事では、 「PCのヘッダーとメニューの境目がわかりにくい」 「ヘッダーの境界線に影をつけられないかなぁ」 という悩みを解決します。 PCヘッダーの境界線に影をつける方法のひとつに「CSSを追加する方法」があるんですが、AFFINGER6では CSSを追加する必要はありません。 やることは ドロップシャドウの設定に適応IDを追加するだけです。 ということで今回は、PCヘッダーに影をつける簡単な方法と、PCヘッダーの境界線に影が追加されない場合の対処法を解説していきます。 スマホのヘッダーにも影をつけた ...

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

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

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

今回は、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のアカウント ...

【2026年6月注記】AFFINGER7ではFontAwesome4.7の読み込みが廃止されました。本記事はAFFINGER6向けの解説です。AFFINGER7での代替方法は実機で確認でき次第、追記します。 という疑問に答えます。 結論からいうと、Font Awesomeのバージョンが古いことが原因です。 対策としては、 「Kit'sコード」を使用している場合「CDNコード」を使用している場合 それぞれやり方が異なります。 それぞれ詳しく解説していきます。 「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」のいいところ ...