ブログのアイコンなどをクリックすると表示されるトップページは、そのブログの顔ともいえる大切なもの。
ユーザーがブログをブックマークする際や他の記事を探す際などによくアクセスするページですので、是非ともおしゃれで魅力的なデザインにカスタマイズしておきたいところです。
しかしながら、はてなブログではこのトップページのレイアウトを変更する方法が公式で用意されておりません。よって、必然的にただ新着記事が並んだだけの質素なページとなり、どうしてもWordPressのブログと比べると見劣りするレイアウトになってしまいます。
そこで今回は、はてなブログでも可能なトップページのカスタマイズ方法をご紹介。
プログラミングの知識が無くても変更でき、自由度もかなり高いのでとってもおすすめのやり方です。
※この方法でブログに何らかの不利益が発生した場合、当ブログでは責任を負いかねますのでご注意ください。念のためバックアップをとられることをお勧めいたします。
完成図
私のブログの場合、次のようなレイアウトとなっています。
PC
スマホ
赤枠で囲った部分が今回カスタマイズした部分。レスポンシブなのでPCもスマホも同じデザインです。画像で分かりにくい方は実際にトップページ（ホーム）に飛んでみてください～！
シンプルな感じにまとめていますが、やろうと思えばもっと凝ったデザインにすることも可能です。
「新着記事」以降の部分は、本来のブログトップページがそのまま表示されます。
カスタマイズ方法
主に参考にさせていただいたページはこちら。
上記のページで紹介されているやり方でばっちり変更可能。
掲載されているコードをはてなブログ管理画面→デザイン→カスタマイズ→フッタにペーストすればOKです。とってもありがたい…！
ただ、私みたいなHTML・CSSの知識に疎い人には少しばかり問題が。
この記事で紹介されているのはあくまで「トップページを固定ページ化する方法」であって、トップページのカスタマイズに必要なHTML・CSSは当然自分で用意する必要があるんですよね。
<!--ここにトップページ用のHTMLを書いてちょ-->とだけ書かれてあります。
素人には、いったいここに何を打っていいものかわからなかったり…
ということでここからは、自分で打つ部分を簡単に作る方法をご紹介します！
自分でそのくらいできるわ！という方は読み飛ばしちゃってください。
やり方はいたって簡単。
１．記事作成画面を開く
はてなブログの、いつも記事を書く画面を開きます。
２．トップページを作る
いつも記事を書くのと同じ要領で、画像を貼ったり文字を打ち込んだり。
ここにトップページに表示したい内容を作っちゃいます。
私のブログの場合こんな感じになりました。
上の方の横並びの画像2枚は、はてなブログの「横並び」の機能を使って貼り付け、飛ばしたいページのURLをくっつけただけ。編集画面で画像をクリックし、「リンク」を押せば画像にリンクを貼れます。
下に4つ並んだ記事紹介は、スマホ版で表示すると横にすーっとスライドできるやつ。
以下の記事で紹介されているコードを「HTML編集」画面でペーストして、画像URLと記事のURLを書き込んだだけです。
注意事項としては、この記事で紹介されているHTMLコード（上の方）はそのままペーストして大丈夫ですが、CSSコード（下の方）は次のように入力してください。
<style>
CSSのコードをペースト
</style>
このコードと同じ手順で、ネットで「コピペでOK」となっているカスタマイズは簡単に使えます。好きなのを貼り付けちゃってください。
難しいと感じる方は、画像と文字くらいにとどめておいた方が無難かなとは思います～
３．コードのコピー
完成した！と思ったら、「HTML編集」をクリックして出てくるコードをすべてコピーします。
こんな感じで。
４．コードの貼り付け
あとはこのコードを、最初に紹介した記事のコードの
<!--ここにトップページ用のHTMLを書いてちょ-->
という部分に貼り付け、最初に紹介した記事の通りはてなブログ管理画面→デザイン→カスタマイズ→フッタにペーストすればトップページ完成！
詳しいHTML・CSSの知識を使うことなく、トップページをカスタマイズすることができちゃいました。
まとめ
いかがだったでしょうか。
私個人として、トップページのカスタマイズに不自由を感じワードプレスへの移行も視野に入れていたのですが、この方法でばっちりカスタムできたので大満足。
ここをいじれるならはてなブログで行けるじゃん！と感じました。
皆様も是非ご活用ください～
おすすめ記事はこちら
ご質問などありましたらお気軽にコメントください。
