無料はてなブログでおしゃれなトップページを作る！
無料はてなブログは、できることが限られています。
例えば、『広告が消せない』『トップページの記事一覧がイマイチ』『スマホ版のHTMLやCSSがいじれない』などです。
そこで筆者は、独学でHTMLとCSSを勉強して、自力でカスタマイズしました。
今回は、当ブログのトップページにもある『カテゴリーをBOX表示する方法』をご紹介します。
使ったツール
『カテゴリー表示』をカスタマイズするために使ったツールは、以下の２つです。
CSS-Generator
ボックスや色などを選ぶだけで、自動でコードを作ってくれる優秀なツールです。
コードをコピペするだけなので、プログラミングが全く分からない人でも自由自在にカスタマイズできます。
Canva
超便利なデザインツールです。
センスがない筆者でも、それなりに良い感じのデザインが作れます。
トップページのイラスト以外にも、SNSのヘッダーやアイコン、記事のアイキャッチは全てCanvaにお任せ。
使ったことがないという人も、とりあえず登録しておきましょう。
カスタマイズ方法
トップページを作る
はてなブログ無料版は、トップページを変えることができません。
そこで、トップページを自分で作ってしまいました。
方法は至ってシンプル。
トップページを記事として投稿して、一番上に固定するだけです。
ボックス表示にする
１．トップページのカテゴリー表示に使うアイコンをCanvaで作ります
２．CSS-GeneratorのFlexbox ItemsでCSSとHTMLをコピーします
３．CSSは、はてなブログ→デザイン→カスタマイズ→デザインCSSに貼り付け
４．HTMLは記事のHTML編集に貼り付け
５．１で作ったアイコンを、４．のボックスに埋め込んでいきます。
✳色を変えたい時は、background collarを変更すればOK。
カラーコードは、CSS-Generatorで簡単にコピーできます。
まとめ
無料はてなブログのトップページをカスタマイズする方法をご紹介しました。
とはいえ今回紹介したカスタマイズは、当ブログのほんの一部です。
Twitterでも多くの方からカスタマイズの方法を聞かれるようになってきました。
まとまった時間が取れたうえで、気が向いたらまとめます。
関連記事▽
