力を入れて書いた記事は大抵誰が読んでも面白いので、できるだけそこにアクセスしやすいようなレイアウトが重要だ。
特にスマートフォンの場合は小さい画面の中でいかに自分の見てもらいたい記事をいかにクリックしてもらうかが重要になる。
ここでは、このブログでも採用しているスマートフォンのフッターメニューについて作り方を解説する。
スマホ用フッターメニューとは
スマホフッターメニューは、ワードプレステーマ「AFFINGER」の機能で作成することが可能だ。
スマートフォンで閲覧した時に少しスクロールすると下からメニューが表示される。
スマホフッターメニューの作成方法
ここからは具体的なスマホフッターメニューの作成方法を解説していく。
「外観」＞「メニュー」＞「メニューの編集」＞「新しいメニュー」。
メニュー名を「スマホ用フッター」と入力し、「メニューを作成」をクリック。
トップに戻るボタン
まずはあると便利なTOPに戻るボタンを作成する。
「カスタムリンク」のURLに「#wrapper」と入力。
リンク文字列に次のコードを入力。
<i class="fa-solid fa-angle-up"></i><br>TOP
フッターメニューに表示させるカテゴリーを追加する
次にフッターメニューとして表示させたいカテゴリーを追加する。
カテゴリーの中から表示させたい内容を選択 ＞「メニューに追加」
すると右側にメニューが追加される。
追加したメニューの右上の「カテゴリー」をクリック。
「ナビゲーションラベル」に次のコードを記入。
<i class="st-svg-heart"></i><br>健康brの後の文字は好きなカテゴリー名に変更できる。
"st-svg-heart"の部分を変更することで好きなアイコンに変更することができる。
これでフッターメニューにカテゴリーを追加することができる。
アイコンの種類
AFFINGERのテーマを導入している場合、プラグインを導入しなくてもアイコンを使用することができる。
フッターメニューに表示させるカテゴリー数
フッターメニューに表示させるカテゴリー数は、TOPへ戻るボタンも含めて5個までにしよう。
スマートフォンの画面は小さいので、それ以上あると使いづらくなってしまうからだ。
オススメや面白い記事がたくさん載っているカテゴリーを厳選しよう。
スマホフッターメニューの色を変更する
「外観」＞「カスタマイズ」＞「各メニュー設定」＞「スマホフッターメニュー」から文字色と背景色が変更できる。
まとめ
この記事では「AFFINGER6」でスマートフォンのフッターメニューを作成する方法を紹介した。
スマホフッターメニューは「Cocoon」などの無料テーマでも作成可能だが、アイコンは「Font Awesome」を利用しなければならなかったりするので、簡単に設定するなら「AFFINGER6」がおすすめだ。
「AFFINGER6」は他にもブログを彩る様々な機能が備わっているので、これからブログで稼ごうと思っている人は是非導入してみてもらいたい。
