どーも！clameyes (<a href="http://twitter.com/clameyes39" target="_blank" rel="nofollow noopener noreferrer">@clameyes39</a>)です！
SANGOのモバイル用フッター固定メニューって便利ですよね。
個人的にブログは読者と情報のやり取りできるのが理想だと思っているので、ユーザがコメントしたいと思ったらすぐにコメント欄にジャンプできるとコメントしやすくなるなと思いました。
そこで、今回はモバイル用フッター固定メニューにコメントジャンプを追加する方法を紹介します。
<h2 id="sango%E3%81%AE%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E7%94%A8%E3%83%95%E3%83%83%E3%82%BF%E3%83%BC%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%A8%E3%81%AF" data-line="9" class="code-line"><a class="header-anchor-link" href="#sango%E3%81%AE%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E7%94%A8%E3%83%95%E3%83%83%E3%82%BF%E3%83%BC%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%A8%E3%81%AF" aria-hidden="true"></a> SANGOのモバイル用フッターメニューとは</h2>
SANGOで書かれたブログの一番下に表示できるフッターメニューです。
基本的に追尾してくれるので、記事のどの部分を読んでいても表示されます。
<img src="https://i.gyazo.com/dc34b1cf8d0722ab378dd6aa26c9a4a6.png" alt="Image from Gyazo" /> 
モバイル用フッターメニュー
<h2 id="%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E7%94%A8%E3%83%95%E3%83%83%E3%82%BF%E3%83%BC%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95" data-line="17" class="code-line"><a class="header-anchor-link" href="#%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E7%94%A8%E3%83%95%E3%83%83%E3%82%BF%E3%83%BC%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95" aria-hidden="true"></a> モバイル用フッターメニューを追加する方法</h2>
SANGOではデフォルトでモバイル用フッターメニューを設定できます。
基本的な使い方はSANGOのカスタマイズのページに書いてありますが、この記事でも紹介します。
<h3 id="%E5%A4%96%E8%A6%B3%E3%81%8B%E3%82%89%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B" data-line="22" class="code-line"><a class="header-anchor-link" href="#%E5%A4%96%E8%A6%B3%E3%81%8B%E3%82%89%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B" aria-hidden="true"></a> 外観からメニューを作成する</h3>
外観からメニューを作成します。
WordPressの管理画面から、外観 &gt; メニューをクリックします。
<img src="https://i.gyazo.com/2952c17cbc8002fe17d40c67f35708a9.png" alt="Image from Gyazo" /> 
外観 &gt; メニューをクリック
新しいメニューを作成します。
モバイル用フッター固定メニューを作成していない場合は、新しいメニューを作成しましょう。すでに作成済みの場合は、モバイル用フッター固定メニューを選択します。
<img src="https://i.gyazo.com/70fbd3b069f9411e42cc55f27e7c6db1.png" alt="Image from Gyazo" /> 
「新しいメニューを作成しましょう」をクリック
新しいメニューの情報を入力します。
まずはメニュー名を入力します。なんでも良いですが、私の場合は分かりやすいように「モバイルフッターメニュー」にしました。続いてメニュー設定の一番下にある「モバイル用フッター固定メニュー」にチェックを入れて、右下の「メニューを作成」ボタンをクリックします。
<img src="https://i.gyazo.com/77ac7b215e853937822f0733854cbbe4.png" alt="Image from Gyazo" />
ここで作成したメニューにコメントジャンプ用のボタンを追加します。
<h3 id="%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AB%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B" data-line="45" class="code-line"><a class="header-anchor-link" href="#%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AB%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B" aria-hidden="true"></a> メニューにコメントボタンを追加する</h3>
メニューにコメントボタンを追加します。
左側にあるメニュー項目を追加の「カスタムリンク」をクリックしてください。すると下記のようにメニュー項目がカスタムリンクで追加できます。 
<img src="https://i.gyazo.com/09c6d1853c2653d2b6916cace41aa8eb.png" alt="Image from Gyazo" /> 
メニュー項目を追加
下記コードをコピーして、リンク文字列に追加します。
<div class="code-block-container"><pre><code class="code-line" data-line="54">&lt;i class="fa-solid fa-comment"&gt;&lt;/i&gt;コメント
</code></pre></div>URLに<code>#comments</code>を追加します。
これでコメントにジャンプするボタンが追加されました。
ただし、コメントが設定できないページ（トップページやカテゴリページなど）では、コメントボタンを押してもジャンプはされません。
これでモバイルユーザはコメントしやすくなるはず！

SANGOのモバイル用フッター固定メニューにコメントジャンプを追加する方法