副業

AFFINGER5 使い方【目次がスマホ表示で見づらい時の解決方法】

Pocket

AFFINGER5を使用していて、目次(カスタム)を使用して作成したけど
スマホ表示で見たらなんか目次が見づらくなっている??
そんな問題を解決します。

目次がスマホ表示で見づらい時の解決方法

原因は何げなく目次を増やしているうちに余計なコードが入ってしまっているのが原因です。

[スマホ表示の目次がみづらい]

正常時のコード(タグ ¥その他パーツ¥目次(カスタム)で挿入した場合。)

異常時のコード

余計な部分を削除すると、だいぶ見やすくなりました。

スマホ表示の確認方法

スマホやタブレットなどモバイル端末で見る人が多いのでスマホ表示の確認は必須です。

見づらいとすぐに離脱につながってしまいます。

step
1
確認したいページを表示する。

右クリックして、検証をクリック。

step
2
上の部分で機種を選ぶ。

読みやすくできているかチェックします。

step
3
右上の部分から終了します。

Close DevToolsで元の画面に戻ります。

目次リンクの設定方法

このままではまだリンクが設定されてませんので、

<h2>タグの後に<a id="link01"></a>を入力します。

※link01の部分は目次の部分と合わせます。

<h2>タグそれぞれに入力していきます。

実際にプレビュー画面でリンクがうまくいっているか確認しましょう。

まとめ

何げなくビジュアルで作っていると表示がおかしくなってしまっていることがあるので

プレビュー画面でPC画面とスマホ画面で随時確認を行いましょう。

アイキャッチ画像は、

200 DegreesによるPixabayからの画像

Pocket

-副業
-,

© 2021 夢ゆとり生活