
月間アーカイブの高さが大きすぎてお困りの方が多いようなので2つご提案しようと思います。
はじめに
ブログを長く続ければ続けるほどリストが縦に伸びるので困る、という事情ですよね (∵`)
公式プラグインの「月間アーカイブ」は1つの月で1行取りますので、毎月更新していてブログを3年続ければ行数は36行、GoogleのLighthouseを意識した行間指定(またはリンク間の距離)でざっと計算すると約1200pxもの高さです。
見た目の操作としては
- 折りたたんで高さの消費を抑える
- なるべく横に並べて高さの消費を抑える
この2つかな、と思います。あるいは「カレンダー」を利用するという方針転換もありますね。ただカレンダーの場合はリスト形式ではないので全体像の把握はできません。
共有プラグインを検索するといくつか良さそうなものが見つかる可能性があります。その際には document.write() メソッドを利用していないものを選ぶ ことが重要です。このメソッドは現在既に 利用非推奨 となっており、将来的にブラウザはこのメソッドを実行しなくなるそうです。実際、既にChromeでは特定の状況下では実行していません。
FC2ブログの「テンプレート」のDLページでは、このメソッドを含むテンプレートに対し
上記のような警告文が表記されるようになっています。
* サンプルは弊テンプレートですが既に別のメソッドに変更・修正済です。
* document.writeIn は改行書き出しのあるものを指し、document.writeとほぼ同じです。
けれども「プラグイン」の方には警告文なし (´・ω・`)
公式プラグインの方はJSを含まないものが多いんですが、共有プラグインはその逆でJSがメインのような。あまり把握していないので断言はできません。すみません (´・ω・`)
一般ユーザーさんは「このプラグインにdocument.writeが含まれているかどうか」の判断は非常に難しいので、そうですね… とりあえずDLしてみて編集ページを開いて目視確認するのが確実かなぁ。ともかくこのメソッドを避けましょうね、というのが一つの注意点です。
提案1 折りたたみ
-
2021年10月 (3)
-
2021年09月 (10)
-
2021年08月 (3)
-
2021年07月 (13)
-
2021年06月 (21)
-
2021年05月 (2)
-
2021年04月 (0)
-
2021年03月 (1)
-
2021年02月 (3)
-
2021年01月 (3)
-
2020年12月 (11)
-
2020年11月 (2)
-
2020年10月 (9)
-
2021年09月 (3)
-
2021年08月 (3)
-
2021年07月 (3)
* サンプルのリンクは外しています。高さは120pxを指定しています。
全部折りたたんでしまうとアレなんで、ある程度の高さを超えたら残りは開いて見てもらう、という形が良いと思います。フリーエリアプラグインをDLし、そこにペーストします。
クラス名など既存内容とバッティングしてはいけませんので、アンダースコア2つで繋いでいます。都合が悪い場合は変更してください。
ボタンを矢印ではなく「クリックで開く」「もっと見る」などのテキストに変更する場合はhtml内の <span class="plg__arrow"></span> を希望するテキストに置き換えます。その際はCSSの一部が不要になりますのでガイダンスに従ってください。
CSSはバリデート対策でJSによるheadへの挿入、という形を取っています。編集しやすいようにグレイブアクセントで構成していますので、2つある ` の記号を削除したり移動させたりしないよう注意してください。
デフォルトの高さは 420px を指定しています。自身の状況と照らして適切な数値に変更してください。<!-- JS --> と目印を付けたまとまりの中に 1箇所 あります。実際の高さより大きい数値を指定しないよう注意。また、折りたたむことを前提にしていますので、「もし高さがxx以上なら or xx以下なら」といった条件づけはしていません。
サイドメニューがドロワータイプの場合は利用できません。
ドロワーのタイプにもよりますが、ほとんどが利用不可です(場合によってclientHeightが正しく取得できないため)
展開ボタンをクリックした際にリストの先頭に戻るようにしてあります。これが無いと長いリストが開いた時にページ表示現在位置が最下部まで引っ張られて、コンテンツを見失ってしまいます。
もっと良いやり方があると思いますが、vanillaJS(pure JS, ネイティブJS)であること、アニメーションを付けること、の2点にこだわってこの内容にしました。
提案2 横並び
- 2021年
- 10月 (1)08月 (1)07月 (3)06月 (1)02月 (3)01月 (2)
- 2020年
- 11月 (2)10月 (1)09月 (1)07月 (3)06月 (1)05月 (3)04月 (9)03月 (5)02月 (2)01月 (2)
- 2019年
- 12月 (2)11月 (2)10月 (6)09月 (1)08月 (2)07月 (2)06月 (3)05月 (1)04月 (5)02月 (5)01月 (3)
* サンプルのリンクは外しています。
スタイリングは直接インラインCSSで書き込んでいます。管理のしやすさ・使い勝手はこちらの方が上かもしれません。この形でも高さが大きい場合は折りたたみにする、というのでも良いのかな、思います。折りたたまれたコンテンツやリンクというのは目に触れない分アクセスされにくいので、アーカイブを重要視する方はこちらをおすすめします。
まとめ
高さの調整については スクロールボックスにする というのが簡単で手っ取り早いんですが、縦スクロールというのはスマートフォンで非常に扱いづらいんですね。なので今回の2提案に絞りました。誰かのお役に立てれば幸いでございます (●'0'●)/

サイドバーの項目をスクロール
2019.5.31に追記を行っています。 カテゴリなんかが増えていくと サイドバーの縦幅が必然的に長くなって不格好になります。短文記事の横に縦に長~~~いサイドバーというのは鬱陶しいものでございます (´・ω・`)...
There are no comments yet.