ブログカスタマイズ履歴まとめ@はてなブログProに登録

f:id:chicoa:20210509132503j:plain

ブログ初心者の私がはてなブログPro(有料)に登録し、カスタマイズしてきた履歴をまとめています。

はじめに

クラウドワークスでこっそりと貯めていた金額が1年コースの契約ができるまで集まったので、はてなブログPro(有料)に登録しました。

1か月試してみてからというのもありだとは思いますが、1年間契約のほうがお得だったということ、まずは1年間継続するという目標設定にもなると思ったから、というのも理由に1年の契約にしました。

サイトリニューアル

はてなブログProになると、無料版でできなかったようなカスタマイズもできるようになるので、ホームページの内容を一新して整えることに。コピペのみで作成してみましたが、自分なりに納得のいくものができました。

グローバルメニュー

ホームページに設置したグローバルメニューはこちらの方の内容を参考にさせていただいて作成しました。スマホで表示された際のメニュー表示のMENUボタンを押すとすっ…と出てきてくれます。(2021年10月時点、使用していません)

色の変更も細かにできるようになっていますので、オリジナルカラーを出せます。

他にもお役立ち情報がたくさん掲載されていて、とても参考になります。

redo5151.hatenablog.com

<2021年10月10日追記>

モバイルデバイスで接続したときに、表示されるボトムメニューを設置しました。常に画面下に表示されるので操作性がよくなります。あわせて、パソコンのみに表示されるグローバルメニューの改定も行いました。

ボトムメニューがあると見た目がアプリ風になり、スマホにはもってこいのデザインだと思います。グローバルメニューについては追従機能なしで固定されるものを設置しました。そのほか、おすすめ記事を4つ固定といったカスタマイズを追加しています。

下記リンクのサイト様から色々と勉強をさせていただきました。

www.bambi.pro

スマホとパソコン両方に表示される上に戻るボタン

こちらの方の記事を参考にさせていただきました。はてなブログに設置する手順をとても丁寧に説明してくださっています。スマホでいろんなホームページで見かけててあったらいいなぁ…と思っていたんですよね。これ、あると便利です。

現在はホームボタン部分を削除して、上に戻るボタンのみ表示させて使用させていただいています!

www.yadomede.com

モバイルフレンドリーツールモバイルでのチェック

レスポンシブデザインを使用していて、パソコンからもスマートフォン(モバイル端末)からも見やすく使いやすくなっていると思います。

モバイルフレンドリーツールでのチェックも問題なくOK

↓のURLからチェックできますよ。

Mobile-Friendly Test - Google Search Console

f:id:chicoa:20210615104117p:plain

<上記画像は最初期のブログカスタマイズ時のものになります>

シンプルなホームページではありますが、ひと段落。

テーマ変更の履歴

PANTRY

最初はこちらをお借りしていました。

すっきりしていてシンプル。可愛らしい印象です。

blog.hatena.ne.jp

SOHO

白黒のモノトーンのデザインで落ち着いた雰囲気です。

このデザインは、ハンバーガーメニューを簡単に設置できます。

入力すれば簡単にコードを作ることができるすぐれものをカスタマイズページに置いてくださっています。カスタマイズについてわかりやすく解説してくださっていますのでとてもありがたいです。

 

下記リンクから飛べます。

「SOHO」カスタマイズページ一覧 - SOHO

blog.hatena.ne.jp

<2021年9月9日追記>

まとめブログ風テーマ「Roundup」

記事が二列のカード型に表示されます。

デザインはとてもシンプル。

カスタマイズ方法の書かれたデモサイトはもう現在はございませんが、ネット上にはカスタマイズを紹介する様々なサイトに出会えますので工夫すればいろいろなことが可能です。

blog.hatena.ne.jp

<2021年10月10日追記>

さいごに

ブログを初めて2か月でProへの登録は時期尚早かな?とは思ったのですが、私の飽き性の性格が発動してしまう前に少しでも早めに行動に移しました。

できることが増えてブログのカスタマイズが楽しくなり、気が付いたら時間が結構経過してるなんてことが多々ありました…ほどほどに楽しみましょう。

最後までご覧くださり、ありがとうございました。