AFFINGERを使ってんだけどフッターバーとアイコンの大きさがうまく合わないなー。合わせてバーの追尾と表示/非表示もしたい！ でも調べてもわからないし調整が難しい…
このようなお悩みを解決していきます。
記事の内容
AFFINGER６のテーマを使用しているWordpressユーザーにフッターバーのサイズ調整とバーに合うようアイコンの調整、追尾とバーの表示/非表示切り替えをする方法を解説。
記事の信頼性
この記事を書いている僕は最近無料レンタルブログからWordpressに引っ越してついでにAFFINGER6の有料テーマに変更しました。そこでブログレイアウトで一番苦戦したフッタバーの大きさとアイコンの大きさ微調整、追尾とバーの表示/非表示切り替えのやり方を備忘録としてここに残しときます。
ぶっちゃけ僕はしょぼいです。
コーディングやWEB系の知識があればこんなのたいして難しくもないと思いますが僕にとっては超絶難しく情報を調べてもフッターの設置、アイコンの設置のやり方と似たり寄ったりの記事ばかりだったので僕がやった方法が知識のない人向けに参考に慣れば幸いです。
こうやってアウトプットすることにより自分で再度調整する時活かせるし忘れた時に見返せますしね。
それと一応最初に行っておくと変更はほぼほぼスマホのみ適応になります。
スマホ用フッターバーの設置の仕方
まずフッターバーとは何かとというとこれです。
中にあるのがアイコンですね。
このメニューを設置することにより離脱率防止や内部リンクにも関わってきます。各ページに移行することも容易になるので訪問者にもメリットは大きのです。
まずフッターバーの作成はAFFINGERで簡単に作成可能。管理画面→外観→カスタマイズ。
メニューから「メニューを新規作成」
メニュー名は「フッターバー」や「ナビゲーションバー」など自分でわかりやすい名前を記入。
「メニューの位置」から一番下の「スマホフッタメニュー」にチェック。
「次へ」をクリック。
メニューにスマホフッターメニューが追加されたのでそこから「項目を追加」(写真ではメニューに追加)で追加したいリンク先を選ぶ。
カスタムリンクはURL記入。固定ページはその既に作成してある固定ページのリンク先。投稿、カテゴリーなども選べますが、使うのはほぼカスタムリンクと固定ページだけではないでしょうか。
プラグインで追加できる項目が増えたりもします。
とりあえず適当に項目を追加しリンク先を選んで設定すればバーは設置できてると思います。
フッターバーにアイコンを設置しカスタマイズしよう
ナビゲーションラベルにこのコードをコピペしよう
HOME
これは固定項目のナビゲーションラベルに貼れば一発で僕と同じデザインになります。
詳しく解説していくと<i class=”アイコンのクラス名を代入”>
このアイコンクラス名はFontAwesomeを使用する人が多いですが僕はAFFINGERのオリジナルアイコンを使用しています。
style以降アイコンの位置サイズを調整していきます。
margin-right:0emは右側の余白。また次に「color:#配色コード”」を追記することにより色も変えられます。
font-sizeは名前の通りフォントのサイズです。HOMEはアイコンの下に表示されるアイコン名ですね。</br>をつければ改行されます。
それぞれお好みで変えてください。
次に僕が設置してるTOPページ。
これはカスタムリンクを使用しURLに「#wrapper」、ナビゲーションラベルに
TOP
を記入すればこれまた僕と同じデザインになります。
そうするとTOPベージをクリックすることにより一番上にスクロールされます。
また外観→カスタマイズ→各メニュー設定→スマホフッタメニューの「文字色」「背景色」「アイコンサイズ」を簡単に変更可能。
僕は何故かこれで変更できなかったので次の追加CSSで変更しました。
もしかしたら「Font Awesome」じゃないと変更できないかもしれませんね。
アイコン名の文字の大きさを変えるには？
「カスタマイズ」から「追加CSS」を選択。
以下のコードをコピペしてもらって大丈夫です！
#st-footermenubox {
/* 縦幅調整のためのプロパティを指定します */
height: 40px;
display:table-cell;
vertical-align:middle;
text-align:center;
font-size:13px;/* メニューバーの縦幅を指定 */
/* 他のプロパティ（背景色、文字サイズ、余白など）を必要に応じて追加します */
font-size:13px;が文字の大きさです。
フッターバーとヘッドバーの大きさを変える
いよいよフッターバーの大きさを変更。
上のコードのheight: 40px;とありますよね。これはフッターバーの高さをあらわしています。
高さを変更するとアイコンと文字も同時に下に移動してしまうため追加CSSに以下のコードを追加
#st-footermenubox ul.menu li{
display:table-cell;
vertical-align:middle;
text-align:center;
font-size:13px;
transform: translate(0px, -14px); /* X軸方向とY軸方向の移動量 */
}
menuを指定しています。
transform: translate(0px, -14px); /* X軸方向とY軸方向の移動量 */とはＸ軸が縦方向の向きで「‐」であれば下、「＋」であればアイコンが上に移動。
Ｙ軸方向は左右を表し、「-」であれば左、「＋」であればアイコンが右に移動します。僕は(0px, -14px)としてます。
続いてヘッダーバーのサイズ変更。
AFFINGER管理＞「ヘッダー」からヘッダーエリアのスマホヘッダーの高さ（px）を変更するだけ！
非常に簡単ですね
バーをスクロールで追従、表示／非表示させる方法
その他にもAFFINGERはコーディングなしで簡単にバーを追従させる機能があるんですよねー、恐るべし！
追尾機能
「外観」→「カスタマイズ」→「- 各メニュー設定」→「スマホメニュー（スマホヘッダー）」
- 通常
- 固定
- スクロール追尾
とありますが「スクロール追尾」をチェック。
これをチェックすることにより下へスクロールするとヘッダーが消え上へスクロールすると表示されます。
しかしここで問題が生じます。デフォルトだとヘッダーの背景色がスクロールで追尾されると透明になってしまうのです。
しかし安心してください。簡単に対処可能ですよ！
では世界で一世風靡中の安村さんのギャグを借りたところでチャチャっと直していきましょう！
このままでは見にくいので「スライドメニューバー背景色」を見やすい色にしてください！これだけ（笑）
そして忘れてはならないのが「カスタマイズ」→「メニュー」→「ヘッダー」その一番下の項目の「スマホスライドメニュー」にチェックを入れてください。
自動追従されていたら無事完了！
スマホフッターバーをスクロールで表示／非表示の切り替え実装
スマホフッターメニューは「AFFINGER管理」→「その他」→「上級者向け」の項目にある「コードの出力」の上から2番目の空欄に下記を記入してください。
jQueryでスクロールすることにより、表示／非表示の切り替えが可能となります。
間違っても本体フォルダのコードが編集しない方がいいです。
レイアウト、デザインの変更をしたい場合AFFINGERではこちらの項目と追加CSSで追記し編集できるのがいいですね！
では以上となります！良いブログライフを(‘ω’)ノ
COMMENTS