Wordpress

スマホ用のフッターメニューをカスタマイズする方法【WordPress】【AFFINGER5】

  1. HOME >
  2. Wordpress >

スマホ用のフッターメニューをカスタマイズする方法【WordPress】【AFFINGER5】

カスタマイズ

スマホ用のフッターメニューを作成

  • AFFINGER5でスマホ用のフッターメニューを作成・カスタマイズしたい。

ココがポイント

結論:
ダッシュボードから「外観」、「カスタマイズ」、「メニュー」と移動し、新規メニューを作成して「スマートフォンフッター用メニュー (現在: スマホ用フッター)」にチェックを入れる。
「AFFINGER管理」の「メニュー設定」から「その他のスマホ用メニュー」、「スマホ用フッターメニューを表示する」にチェックを入れると、カスタマイズしたメニューが表示される。

皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。

ユウスケ

皆様は、Webページを作成していると、スマートフォンやタブレット用に、画面スクロールについてくる、一塊にしたシェアボタンを作成したいと思ったことはございませんか?

今回は、WordPressのテーマにある「AFFINGER5」でフッターメニューをカスタマイズするところまでをご紹介します。

このカスタマイズしたメニューアイコンには、ユニークなURLを記述できるので、この機能を使い、シェアアイコンを格納したウィンドウを開閉できるようにします。

それでは、まずはフッターメニューをカスタマイズするところから行っていきましょう。

 

1.フッターメニューをカスタマイズ

1.Step1_メニューを新規追加

メニューを新規追加

「外観」から「カスタマイズ」、「メニュー」へと移動。「メニューを新規作成」をクリック。

 

1.Step2_メニューの設定

メニュー設定

「メニュー名」をわかりやすい名前に。「メニューの位置」では「スマートフォンフッター用メニュー (現在: スマホ用フッター)にチェックを入れます。そして「次」をクリック。

 

1.Step3_シェアボタンを作成

カスタムリンクを追加

「項目を追加」をクリック。項目を「カスタムリンク」にします。

 

値を記入

「URL」に、後々セレクタで場所を特定できるようにユニークな名前を設定しておきます。(例:「#mobile_footer_shareButton」)

「リンク文字列」には、ボタンのアイコンとなるWebフォントを入れて下さい。<br>タグで区切るとその部分で改行された表示できます。アイコンとテキストを区切って、表示させても良さそうですね。(例:「<i class="fa fa-share-alt-square" aria-hidden="true"></i><br>Share this!」)

 

もっと詳しく

 

1.Step4_メニューに追加

メニューを実装

設定が済んだら、「メニューに追加」をクリック。メニュー一覧に先ほど設定した項目が新しく追加されます。後は右上の「公開」をクリック。

 

1.Step5_トップに戻るボタンも追加

「AFFINGER5」では、フッターメニューを追加すると、トップに戻るボタンが非表示なります。そこで、フッターメニューにトップに戻るボタンを追加しておきましょう。

TOPに戻るボタン

先ほどと同じように、「カスタムリンク」を項目として追加します。「URL」に決まった値の「#wrapper」をいれます。リンク文字列はお好みのテキストやWebフォントを入れて下さい。(例:「<i class="fa fa-angle-up" aria-hidden="true"></i><br>TOP」)

後は、「メニューに追加」をクリックでOKです。

もっと詳しく

「URL」を「#wrapper」にすると、なぜトップに移動できるのか:
結論:トップに戻るボタンをクリックすると、「id="wrapper"」を属性値としてもっているタブ移動することができます。この「id="wrapper"」が、「AFFINGER5」では、表示されているページのトップにあたるので、トップに移動できるようになるのです。

 

2.フッターメニューを表示させる

フッターメニューを表示する

「AFFINGER5管理」から「メニュー」、「その他のスマホ用メニュー」の「スマホ用フッターメニューを表示する」にチェックを入れればWebページに表示されるようになります。

もっと詳しく

公式ホームページに設定方法が載っています:

Contact Form〈お問い合わせはこちらから〉

注目記事

MY BESTランキング

Webページ作成には必携!!

逆引きの見やすさが抜群!!

だから、

  1. HTMLのソースコード画面を読み取れる。
  2. 思い通りのCSSスタイルを調べられる。

是非、一冊手元にもってブログのレイアウトを自作しよう。

たった30分間を続ける重要性がわかる一冊!!

1日たったの30分間

けれども、
それが1週間、1ヶ月、1年となると
大きな差になる。

この本を読むだけで、
1日の生活の中の「たった30分間」の重要性がすぐにわかります。

勉強を始めるモチベーションになる一冊
是非、手元に!!

アフィリエイトならA8.net

最初のアフィリエイトにもってこいのASPです。

操作性がよく、
クリック率+EPCものっているので
初心者にとってありがたい仕組みになっています。

  • この記事を書いた人
  • 最新記事
YusukeMiyoshi

YusukeMiyoshi

Illustrator、Photoshopのテクニック。 WordPressのカスタマイズ についての記事が中心です。 よい本に出会えれば、ご紹介させていただきます。 Twitterのフォローお願いいたします。

-Wordpress

ユウスケの雑記ブログ
Thank you for your follow up.

Copyright© ユウスケの雑記ブログ , 2020 All Rights Reserved Powered by AFFINGER5.