【無料はてなブログ】でもトップページを記事一覧表示に出来る方法

こんにちはKamekoです。

について紹介したいと思います。

「無料はてなブログ」でもトップページを記事一覧表示にする方法

このブログのテーマは『UnderShirts』で無料はてなブログを使用しています。（現在はワードプレスに移行しています）

色々な記事を読んでいると気付かれると思いますが、サイトのトップページがカード式で表示されいるのをよく目にしますよね？

カッコイイなぁ。と、めちゃくちゃ憧れていました。

『UnderShirts』では「トップページの記事一覧表示がカード形式」になるように設計されています。

しかし、はてなブログ無料版では記事一覧表示に対応していません。

ということは、無料版を使っているこのブログではそもそも記事の一覧表示ができないため、カード表示にはならない。

どうにか記事一覧にする方法は無いのかと探しまくった結果、見つけました。

こんな感じでトップページが表示されます。

きちんとカード表示されるかドキドキでしたがちゃんと確認できた時には嬉しくて嬉しくて♪

見た目もスッキリして他の記事も探しやすくなりました。

参考にさせていただいた記事はこちらです

ヘッダーのカスタマイズ

ヘッダー画像は、Canvaで作成しました。無料・有料とありますが無料素材だけでもオシャレな画像作成が可能です。

ヘッダー以外にもアイキャッチ画像の作成にも使用しています。

ヘッダー画像の作成方法

はてなブログのヘッダーサイズ

（はてなブログのヘッダーサイズ推奨）　1000px　✖　200px

 となっています。

次にヘッダー部分に表示するために設定をしていきます。

「デザイン」→「カスタマイズ」→「ヘッダ」→「画像をアップロード」→「画像だけ表示」→「変更を保存する」

 で完了です。

  ヘッダーの表示サイズをブログに合わせる

画像の設定をしたものの、周りに余白があってなんだか締りのない感じになっていたのでなんとか変更して収まりました。

こちらの記事を参考にさせていただきました

 縦横比を設定してサイズ調整をするみたいです。とても助かりました。

まとめ

今回、「無料はてなブログでもトップページを一覧表示にできる方法」と「ヘッダーのカスタマイズ」について紹介しました。

少しずつカスタマイズしていき、段々とブログに個性が出てくると嬉しくなりますね。

最後までお読みくださりありがとうございます。