はてなブログでやっておきたいカスタマイズ…トップページの一覧（カードタイプ）表示方法！
無料版を使ってると設定で一覧ページの選択が出来ないからね…
はてなブログで無料版を使っていると、トップページに記事が出てくるので見栄え的に嫌だって思う方もいらっしゃると思います。
今回はそんなはてなブロガーさん向けにトップページを記事一覧（カードタイプ）にする方法を紹介します。
この記事でできる事は？
- トップページを一覧形式にする
トップページの表示形式は一覧の方が良い
ぶろぐにっとてトップページの表示形式は大事な要素の一つです。
はてなブログを使っていて一番最初にどうにかしたいと思うところも、このトップページの表示形式なのではないでしょうか？
僕はそうでした…
正直、思うところは人それぞれだと思いますが、早い段階でなんとかしたいと考えていると思います。
トップページが記事ページでも気にしないという方もいらっしゃるかかもしれませんが、この記事を開いている時点かなり気にしている方だと思います。
気にしない方はこの記事を開いてないですよね…
ぶろぐのトップページは例えるならぶろぐの顔です。
読者がぶろぐ内を回遊してくれる場合、トップページに戻る事もあり、トップページが記事表示のままであれば、他にどんな記事があるのかをすぐに確認することができません。
もちろん気にしない読者もいますが、気分的にも違和感を覚えるのが普通です。
トップページを一覧表示（カードタイプ）にすると、読者に多くの記事タイトル（アイキャッチ）をみてもらう事ができたり、読んでほしい記事への導線を作ったりもできますし、読者の方にとっても他にどんな記事があるのかがひと目でわかるので回遊時間が伸びる切っ掛けにもなります。
今回は、いくつかの対処法を紹介します。
はてなブログでトップページを一覧表示にする方法
はてなブログの開設当初は記事ページが表示されているので、他のブロガーさん達のぶろぐを見たときに表示形式のが違いに疑問を感じた方もいると思います。
設定で同じように選べるのかな？って探す方もいることと思いますが、調べると、「Proにアップグレードしないと選べないよ」って書いてあるので、とりあえず一度ノックアウトされます。
ぼくもそうでしたよ…
ですが、他のはてなブロガーさんのぶろぐをよく見ると、無料版を利用されている方のぶろぐでもちゃんと一覧表示（カードタイプ）がされているじゃありませんか…
このぶろぐも無料版です。
何か特殊な条件が必要なのか？と考える方もいるかもしれませんが、そうではありません。
はてなブログにはもともと記事一覧（カードタイプ）のページが存在し、proにアップグレードすると、切り替えもサーポトしてくれているだけで、無料版は無料版なりの方法があります。
順を追って解説していきます。
トップページの一覧表示化方法①
まず、トップページを一覧表示（カードタイプ）化する一番簡単な方法の紹介ですが、もちろんproにアップグレードすることが一番手っ取り早く、とても簡単です。
proにアップグレードすると、独自ドメインを持てたり、運営さんによって挿し込まれている広告を外すことができたり、固定ページを作れたりと様々な特典があり、その中にトップページの一覧表示（カードタイプ）も含まれています。
運営さんの広告を消す方法はproにする以外はありません…
proにアップグレードした場合は［ダッシュボー］を開き［設定］⇨［詳細設定］と進み［下にスクロール］した下記の場所のチェックを付け替えるだけで完了します。
proの場合はこれで終わりです。
マジすか！…僕proにします。
ちょっとまった！！
アップグレードする注意点
proにアップグレードするには、大人の力が必要です。
マネー（お金）です。
それは困ります…
proにアップグレードする場合は、もう無料ではなくなり、色々な特典を受ける代わりにそれなりの費用が発生します。
料金は３つのプラン（期間）があり、発生する料金も違います。
長期になるほど1ヶ月の金額が安いです。
プラン＆料金（2021年12月時点）
- 1ヶ月プラン 1,008円/月
- 1年プラン 8,434円（703円/月）
- 2年プラン 14,400円（600円/月）
妥当なプランは1年だと思います。
正直1ヶ月では期間が短すぎると思いますし、2年のプランを選んでも正直続けられるかもわかりません。
最初は1年くらいの様子見が一番かと…
わかりました…1年にします。
課金するんか～い！
大人の力を使うかは人それぞれなのでそこは自由意志ですが、proにする特典なども把握したうえで計画的な利用をおすすめします。
ConoHaWING
ConoHaWING
次に進みます。
トップページの一覧表示化方法②
次の一覧表示（カードタイプ）化方法は難しいところもあるかもしれませんが、大人の力を必要としないので、無料版を貫き通したい方におすすめです。
はてなブログproではチェックを切り替えるだけで一覧形式（カードタイプ）に切り替えられますが、無料版ではただ選択できないようになってるだけで一覧形式（カードタイプ）のページ自体は存在しています。
この一覧形式ページのことをarchive(アーカイブページ)と呼びます。
はてなブロガーさんの記事を見たときにトップページにとんでみると、無料版なのに一覧形式（カードタイプ）での表示にしてあるサイトを多く見かけると思いますが、皆さん形式を選んでいるわけでわなく、意図的にトップページに来た人をアーカイブページに飛ばすという要素を組み込んでいるんです。
申し訳ございませんが、こちらの方法は運営さんの利用意図に反した方法であったようで続きを削除させていただきました。
※アーカイブページへのリダイレクト方法は広告表示規約に違反する行為となる為
あとがき
はてなブログは色々なことができます。
はてなブログはちょっと頑張るといろんなことができるようになります。
はてなブログをプログラミングのテストに使ったり、HTMLやCSSを使ってwebデザインの勉強をしたりと、使い方は人それぞれです。
今回のコード（javascript）もそこまで難しいものではありません。
コピペに頼らず自分でやってみたいという方もいると思いますのでいくつかおすすめの書籍を張っておきます。
javascript初心者向けの教本3選です。
【こんな方におすすめ】
- 知識ゼロからJavaScriptを学びたい方
- JavaScriptの基礎固めをしっかりしたい方
- ほかの入門書で挫折した方
20213年発売と結構古い部類ですが、知識ゼロから目線は助かります。
【こんな方におすすめ】
- JavaScriptをこれから始める方
- 実践につながる基礎力を身に着けたい方
- 挫折したくない方
挫折ポイント等が抑えてあるのでとにかく丁寧です。
【こんな方におすすめ】
- プログラムを書いたことがない方
- 始めてみたけどつまづいている方
- HTMLとCSSを一緒に進めている方
プログラミングに興味があるけど，使う場面が分からずにはじめの一歩を踏み出せない方におすすめの一冊です。
分野を問わず初めてのことには苦手意識のような物を感じると思いますが、それは苦手意識ではなく知らないから遠ざけようとしてしまう人の心理（勘違い）のようなものです。
案外やってみると楽しかったり、実は得意だったりするかもしれません。
是非、新しいことを始めるきっかけにしてください。
最後までお付き合いいただきありがとうございます。
トップページを開くと必ず記事が出てくるんだけど…どうにかなりませんか？