ちょこちょこと見直して表現がおかしい部分とか、説明が足りないとか間違っているのに気がついたら直してたりしてるのですが、デスクトップとかタブレットぐらいならある程度、画面表示幅があるので多少長い記事でもトップにはすぐ戻れたり、あるいは下まで行き進んでもらえれば、前の記事・次の記事ナビゲーションの所の矢印でトップに戻ることもできます。
多少、スクロール量はあるもののまだイケル範囲とは思うんですが、スマホだと画面幅が狭いので自ずと縦長になります。ましてや元の文章が同じことを何度も書いてたりして長いので、余計にスクロール量が増えます。
量は大幅減少させることが難しいこともあるので、ある程度スクロールに関しては我慢を強いることもあるのですけれども、せめて行き着いた先にはもう少しだけでも各ページに素早く移動したいと考え、全部のページを自由にとはできませんが、ギターを弾き語れ！のカテゴリ内だけなら移動できるんじゃなかろうかと思いつきまして、記事の下にカテゴリー内リンク((ギターを弾き語れ！のカテゴリー内だけで有効))を自作して設置しました。
自作なのでもしかしたら不具合があるかも知れない不安も抱えつつ、その機能を紹介しておきます。
- 自作JSONファイルによるカテゴリ内のデータ化
- 今見てるページの前後ページのリンク、及び目次ページを表示
大まかにはこの2つです。
1.については、これで正しいのかどうかもわからないJSONファイルを作りました((エラーだけは出ていません))。各新規ページを作るたびにデータを更新していかないといけないわけですが、これは言うほど大変なわけでもないので良しにして、そもそもこういうデータはどうやるのが正解なのかわからないままにひとまず作ってみたわけです。
多分正しく簡潔にデータ化できると、category.titleなどとうまくドットで連結して、filter()とかfind()でデータを抽出できるんでforなどのループで回さなくても良いようにも思います。しかし、category.[i].titleなどと時折配列を挟まねばならず、codepen等でチェックしてみてもドットで連結した方が良いよと言われたりもしながら、そうやってみるとエラーが出てきたり。
なかなか難しいもんですね。
2.については、今見てるページの前後ページのリンクは特に必要はないかも知れません。しかしブログの次の記事・前の記事のボタンでは投稿日時が違うと正しく順番通りにならないので敢えてつけました。
目次ページはJSONデータをリストにしただけです。
「目次をひらく」ボタンをタップ/クリックすると、上から目次がスクロールダウンで表示されます。
もし、「目次をひらく」ボタンを押した時、開いた目次の高さよりも上にあった場合は、目次がスクロールダウンで表示されますから、閉じるのが同じボタンでやっているので閉じるボタンが目次に隠れてしまい、目次を閉じるために記事をまたスクロールさせる必要がありこれも面倒だなぁと思ったわけです。
そんなことから「目次をひらく」ボタンをタップ/クリックすると、自動的にカテゴリー内リンクが画面下にスクロールするようにしました。これで目次が表示されても閉じるボタンが隠れてしまうことはないでしょう。たぶん。
当初は、モーダルのようにして目次以外をクリックすれば閉じるというような仕様にしようかと思ったんですけれども、自動的に画面もスクロールするって面白いんじゃない？って思ってこういう仕様にしました。
別の要素で閉じるボタンを左下あたりに出せばいいだけなんですけどね。
そういうわけで、カテゴリー内のリンクを実装したという報告でした。むしろそんなことより他のページの更新をしろと言われるかも知れませんが、色々やった後にこうしておけばとなると変更が面倒くさいんで、なるべくあまりページがない内にやってしまおうという感じです。