KAZU
スマホのヘッダーを固定orスクロール追尾する方法
今回は、スマホのヘッダーを「固定」or「スクロール追尾」する方法について書いていきます。 AFFINGER6で設定できるスマホヘッダーの表示パターンは3つ。 【通常】：ヘッダーは固定されません 【固定】：常にページ上部にヘッダーが固定されます 【スクロール追尾】：下へスクロールするとヘッダーは消え、上へスクロールすると消えたヘッダーが現れます 表示パターンのイメージ 通常 固定 スクロール追尾 表示パターンの設定は「カスタマイズ」で行います。 この記事では、 スマホヘッダーの表示パターン設定 「ヘッダー背 ...
PCのヘッダー境界線に影をつける方法【CSS不要】
この記事では、 「PCのヘッダーとメニューの境目がわかりにくい」 「ヘッダーの境界線に影をつけられないかなぁ」 という悩みを解決します。 PCヘッダーの境界線に影をつける方法のひとつに「CSSを追加する方法」があるんですが、AFFINGER6では CSSを追加する必要はありません。 やることは ドロップシャドウの設定に適応IDを追加するだけです。 ということで今回は、PCヘッダーに影をつける簡単な方法と、PCヘッダーの境界線に影が追加されない場合の対処法を解説していきます。 スマホのヘッダーにも影をつけた ...
挿入した画像をデフォルトでフルサイズ表示させる方法【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では ...
