AFFINGER5カスタマイズ

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

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

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

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

 

 

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

 

怪しむ人
AFFINGER5を使ってるけどそんな設定は知らないなぁ。
という人はAFFINGER5のバージョンが古い可能性が高いです。

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

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

 

 

 

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

アフィハチ運営者ハチのプロフィール

 

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

  • AFFINGER5のスマホ用スライドメニューの設置方法
  • そもそもAFFINGER管理人に検索アイコンが無い時の対処方法

 

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

 

 

\月3万円稼ぐブログ運営の教科書特典付き/

WordPressテーマ 「WING(AFFINGER5)」

/2021年版のブログ運営でライバルに差をつけよう\

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

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

  • 最新バージョンのAFFINGER5へアップデートする
  • 『AFFINGER管理』→『メニュー』→『スマホ用スライドメニュー』→『検索アイコン』から検索アイコンを追加してsaveする
  • 『AFFINGER管理』の検索アイコンから『オーバーレイ』か『スライド』かチェックしてsaveして完了
管理人ハチ
最新のAFFINGER5かAFFINGER6にしてAFFINGER管理から設定するだけなのでCSSをいじる必要も全くなし。簡単です。

 

 

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

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

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

管理人ハチ
あれ?他のAFFINGER5テーマ使ってる人たちのブログに検索アイコン出てるけどなんでやろ?
と検索アイコンを実装できると知りました。

 

 

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

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

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

 

 

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

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

  1. ダッシュボード
  2. AFFINGER管理
  3. メニュー
  4. スマホ用スライドメニュー
  5. 検索アイコン
  6. モバイルヘッダーに検索アイコンを追加する
  7. 一旦保存(Save)する

AFFINGER5の検索アイコンを設置する方法

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

 

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

 

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

AFFINGER5の検索アイコンのオーバーレイとスライドを選ぶ

 

 

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

AFFINGER5&AFFINGER6の検索アイコン『オーバーレイ』の表示のされ方

 

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

AFFINGER5&AFFINGER6の検索アイコン『スライド』の表示のされ方

 

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

 

 

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

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

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

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

 

 

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

  • この記事を書いた人

hachi

-AFFINGER5カスタマイズ