はてなブログ超改造
確かに、アーカイブページへの強制転移がユーザーには最もスマートな方法ですが、はてなブログではアーカイブページへの強制転移は禁止行為との事で、画像だけを表示し「続きを読む」を使用して疑似的な一覧表示にするなどしていたのですが、なんだか無粋なトップページになってしまう事に悩んでいました。
ググリにググってたどり着いた先は”はてな超改造ブログ”さんで、ようやく腑に落ちる改造・改良を行うことができました。ありがとうございます。
なお、コードや設置方法等の引用はこの記事では行いませんので、気になる方は”はてな超改造ブログ”さんの記事を熟読してください。
はてなブログ超改造+1改造
はてなブログ超改造さんの仰る通りにやっても大きな問題はないのですが、そうするとTOPページのみならず記事ページでも投稿日や更新日時が消えてしまったので、該当の記事内に→<style>.entry-title{display:none;}</style>←のように、TOP固定用の記事(HTML編集を使用)に対して個別で不要と思われる要素の非表示をしました。
新着記事の表示は必要。
最低でも記事を1つだけ表示する必要があります。
つまり、TOPページは固定記事+新着記事の構成になってしまうのですが、全文表示を行う必要があるので、新着記事はいままで通り【タイトル画像】+【続きを読む】を使用してTOPページが長くならないように工夫しています。
これまでの悩み
Googleサーチコンソールを確認しているのですが、CLS0.1超(パソコン)という項目がずっと改善されずにいます。
この原因がタイトル直下付近にあるらしいことが判明したので、グローバルメニュー(グローバルナビゲーション)を取り外しました。
PCでの閲覧時においてはサイドバーで補完できる事なので、デザイン的な面以外でのメリットがあまりないように感じましたので、外す事にはなんの問題もありません。
ところが、ウィジェット(サイドバー)を沢山使うと、ブログの構造が縦に長くなってしまってPCからは読みにくく、スマホからも重くなってしまうのが悩みの種でした。
当ブログの読者さんは主にスマホユーザーの方なのですが、月末になるとアクセスが減る傾向があり、考察を重ねたところ”残りのギガ数”によるものと結論づけています。
確かに、Wi-Fiのない環境等では、少しでも無駄な読み込みは減らしたいと考えるのは必然かもしれません。
●ブログ村のパーツを外すなどしてブログの軽量化を進めています。
これらがなぜ重いのかというと、記事と記事に挟まる広告だったり、記事そのものに付随するデータ(はてブ)などの情報によるものと推測しています。
したがって、固定ページ１つで済んでいる現在はあまり必要ではないデータの読み込みを排除する事ができているので、悩みが1つ減りました。
トップページについて思うこと
https://urakatahero.hateblo.jp/
当ブログへは各記事への直アクセスが主で、その流入の８割が検索からです。
アナリティクス(GA4)で確認すると、残念ながら直帰(離脱)もありますが、関連記事から関連記事へと、あるいは、設定したカテゴリから記事へという動線になっています。
ようするに、ほとんどトップページを見る人がいませんのでトップページを飾る必要はないようにも思いますが、トップページはブログの顔ですから、見られていなくても作り込む必要はあるように思います。
記事の締め
実際に私もはてなブログPROになって様々な機能を確認しましたが、ほぼ唯一の取り柄ともいえる状態だったAMPが撤廃されている状態と、AMPが撤廃されたタイミングでDiscoverに表示すらされなくなったことで、ドメインにこだわりのない当ブログにとっては無料で良いかなぁ？と思っています。
とは言え、その他にも無料版ではどうにもできない要素(ページ エクスペリエンス)に対する項目が多々あり、収益の乏しい現状ではありますが、工夫することで運営を安定化させ、その結果としてまたはてなPROの契約をしようと考えています。
恐らく、はてなブログよりワードプレスを使用しろ！と言う先輩方の多くは、ページエクスペリエンス改善の為の不要なスクリプトなどの排除を理由に仰っているのだと推測しています。
今後の検索結果への表示(SEO)には、INP(Interaction to Next Paint)という要素が重要になってくるとのことですし、運営がどのように対処を行うかをよく観察していきたいところですね。
●必見！GoogleAdsenseを使用した収益を前提としたブログの始め方。 - urakatahero”B”log
●１カ月間だけはてなブログPROになってみることにしました。 - urakatahero”B”log
●【朗報】レスポンシブ化されたスマホ版はてなブログの横揺れの原因を突き止めてCSSを使って直した方法。 - urakatahero”B”log
