【AFFINGER5】ヘッダー右上にスマホ用スライド検索アイコン(検索窓)を設置する方法

悩む人

• AFFINGER5のスマホの右上にブログ内検索アイコンを設置したい。
• AFFINGER5では検索窓を実装するやり方を教えてほしい。SWELLとかSANGOとかJINだとヘッダー右上に検索窓を設置できるみたいだけど。
• そもそもAFFINGER管理に検索アイコンの項目自体が無いんだけど。

こういった悩みにお答えします。

結論、AFFINGER5なら『AFFINGER管理』からスマホ用スライドメニューをチェックするだけで『検索アイコン』を設置できます。

怪しむ人

AFFINGER5を使ってるけどそんな設定は知らないなぁ。

最新のAFFINGER5やAFFINGER6にアップデートしたらAFFINGER管理から簡単に設置できますよ。

ハチ

私もAFFINGER5のバージョンが古くて検索窓が実装できなかったので汗

この記事を書いている私はAFFINGER5歴1年でAFFINGER5を使って7サイト作成した経験があります。

この記事では下の内容を解説します。

この記事のとおりに設定すれば1分後にはあなたのサイトやブログにも検索アイコンが設置できてユーザーがあなたのサイト内で知りたい記事にたどり着きやすくできますよ。

AFFINGER5のスマホ用スライドメニューの設置方法【検索アイコン】

AFFINGER5のスマホ用スライドメニュー（＝ヘッダー右上の検索アイコン）を設置する方法は下の3ステップで簡単にできます。

ハチ

最新のAFFINGER5かAFFINGER6にしてAFFINGER管理から設定するだけなのでCSSをいじる必要も全くなし。簡単です。

最新バージョンのAFFINGER5へアップデートする

まずAFFINGER5を最新バージョンのAFFINGER5かAFFINGER6にアップデートしましょう。

私は2020年12月バージョンのAFFINGER5を使っていて、

ハチ

あれ？他のAFFINGER5テーマ使ってる人たちのブログに検索アイコン出てるけどなんでやろ？

いろいろ調べた結果、AFFINGER5のバージョンが古くて検索アイコンを設置できなかったので、まずは最新バージョンのAFFINGER5にアップデートから始めましょう。

ハチ

次の項目をみて『検索アイコン』の項目がなかったらアップデートが必要です。

参考AFFINGER5のアップデート方法とアップデート情報の確認方法

『AFFINGER管理』→『メニュー』→『スマホ用スライドメニュー』→『検索アイコン』から検索アイコンを追加して保存する

WordPressのダッシュボードからスマホ用スライドメニューに検索アイコンを設置・追加する流れは下のとおりです。

ここまでで、一旦はスマホの検索アイコンの設置は完了です。

あとはオーバーレイとスライドで表示のされ方が違うのでお好みの方を選びましょう。

再度『AFFINGER管理』の検索アイコンから『オーバーレイ』か『スライド』かチェックして保存（save）して完了です。

AFFINGER5の検索アイコン『オーバーレイ』は下にような表示されます。

AFFINGER5の検索アイコン『スライド』は下にような表示されます。

ハチ

当サイト『アフィハチ』ではスライドを採用しています。好みの問題ですね笑

AFFINGER管理に検索アイコンが表示されない時の対処方法

AFFINGER管理のメニューを確認しても『検索アイコン』に関する項目がない人は、最新バージョンのAFFINGER5にアップデートが必要です。

検索アイコンが実装されたのは2021年になってからなので、2020年にAFFINGER5(アフィンガー)を購入された方は検索アイコンの機能が追加されていません。

アップデートは公式ホームページからパスワードを入力して簡単にできるのでやってみてください。

参考 カスタマイズまとめ記事