![](https://doctor-koala-blog.com/wp-content/uploads/2023/03/F3500269-8A5A-45CB-A5E5-89BCA553DEA0-1024x678.jpeg)
2021年は心機一転テーマを大改造しました。
しばらーくデザインは放置されていたこのブログですが(実は7年前のまま)、テーマを一新することで見違えるほど今っぽいブログになりました。
使ったテーマはCappuccino!
使ったテーマはこちらです。カフェっぽい雰囲気と落ち着いた色味が気に入っています。
安直ですがこのテーマである「カプチーノ」をそのまま活用して、カプチーノ素材写真を集めていざ製作開始です!
![](https://doctor-koala-blog.com/wp-content/uploads/2023/03/F26A688B-5F8A-462F-B2E9-C03392019AB1-1024x599.jpeg)
自由にカスタマイズできるよう製作者の方がたくさんTipsを用意してくれていて、こちらのブログを参照しながらいくつかカスタマイズしてみました。はてなブログのカスタマイズ初心者でも簡単にできたので、いくつか紹介します。
![](https://cdn-ak.f.st-hatena.com/images/fotolife/u/utoutosara/20210223/20210223015445.png)
グローバルメニューorおすすめ記事?
ブログ記事を探す際、大事なのはカテゴリなどの記事をまとめて俯瞰できる機能ですよね。
デフォルトでもあるのですが、スマホだと記事下で遠いし、シンプル過ぎてもうちょっと工夫したくなります。
![](https://doctor-koala-blog.com/wp-content/uploads/2023/03/D0FFDC76-A862-4910-895E-4D2F9034C117-1024x670.jpeg)
![](https://doctor-koala-blog.com/wp-content/uploads/2023/02/B3E652CD-DF0B-4454-84DC-196B0575D187-150x150.png)
ちょっと寂しい…
![](https://doctor-koala-blog.com/wp-content/uploads/2023/03/AFC26EB9-CDC0-46B6-9F63-631544618607-1024x622.jpeg)
![](https://doctor-koala-blog.com/wp-content/uploads/2023/03/AFC26EB9-CDC0-46B6-9F63-631544618607-1024x622.jpeg)
![](https://doctor-koala-blog.com/wp-content/uploads/2023/03/34ECF222-BE23-43AF-87F3-6D90923BE64F-1024x622.jpeg)
![](https://doctor-koala-blog.com/wp-content/uploads/2023/03/34ECF222-BE23-43AF-87F3-6D90923BE64F-1024x622.jpeg)
どちらもアクセスしやすくデザインも好みだったのですが、スマホで見た時にグローバルナビゲーションだとハンバーガーメニューになってしまうのを避けたくておすすめ記事の方を採用しました。老眼にはハンバーガー見つからぬ…
![](https://doctor-koala-blog.com/wp-content/uploads/2023/03/4DF65604-AF0D-4B8C-9CA4-68FF0E6353B2-1024x727.jpeg)
![](https://doctor-koala-blog.com/wp-content/uploads/2023/03/4DF65604-AF0D-4B8C-9CA4-68FF0E6353B2-1024x727.jpeg)
これでスマホでもバッチリ表記されます。しかしグローバルメニューの帯のデザインも気に入っていたので、人気記事を紹介する帯として採用しました。
![](https://doctor-koala-blog.com/wp-content/uploads/2023/03/755F9376-5ED7-4695-8D1E-0AD57AA9B409-723x1024.jpeg)
![](https://doctor-koala-blog.com/wp-content/uploads/2023/03/755F9376-5ED7-4695-8D1E-0AD57AA9B409-723x1024.jpeg)
![](https://doctor-koala-blog.com/wp-content/uploads/2023/02/B3E652CD-DF0B-4454-84DC-196B0575D187-150x150.png)
![](https://doctor-koala-blog.com/wp-content/uploads/2023/02/B3E652CD-DF0B-4454-84DC-196B0575D187-150x150.png)
![](https://doctor-koala-blog.com/wp-content/uploads/2023/02/B3E652CD-DF0B-4454-84DC-196B0575D187-150x150.png)
うん、かわいい
人気記事の帯の入れ方はこちらを参考にしました。これはかなり目立つ&お洒落!
![](https://cdn-ak.f.st-hatena.com/images/fotolife/d/damarin/20181203/20181203235702.jpg)
![](https://cdn-ak.f.st-hatena.com/images/fotolife/d/damarin/20181203/20181203235702.jpg)
固定ページでホームページ風に
カテゴリ一覧ページとサイトマップは固定ページ(はてなブログProの機能:有料)で作成しました。参考にしたブログはこちら。こちらのブログのトップページは洗練されてて素敵です。
![](https://doctor-koala-blog.com/wp-content/uploads/2023/02/B3E652CD-DF0B-4454-84DC-196B0575D187-150x150.png)
![](https://doctor-koala-blog.com/wp-content/uploads/2023/02/B3E652CD-DF0B-4454-84DC-196B0575D187-150x150.png)
![](https://doctor-koala-blog.com/wp-content/uploads/2023/02/B3E652CD-DF0B-4454-84DC-196B0575D187-150x150.png)
この作業をしていてサイドバーを消すことができずにドン詰まり、テーマ制作者のブログに質問をして答えていただきました。質問と回答はこちらの記事のコメント欄にあります。ありがたや。
![](https://cdn-ak.f.st-hatena.com/images/fotolife/u/utoutosara/20210404/20210404000608.png)
![](https://cdn-ak.f.st-hatena.com/images/fotolife/u/utoutosara/20210404/20210404000608.png)
![](https://doctor-koala-blog.com/wp-content/uploads/2023/03/9669C46E-C34D-40EE-898D-38ECC76DDA75-1024x675.jpeg)
![](https://doctor-koala-blog.com/wp-content/uploads/2023/03/9669C46E-C34D-40EE-898D-38ECC76DDA75-1024x675.jpeg)
![](https://doctor-koala-blog.com/wp-content/uploads/2023/03/6AFEA7B5-5DC2-4704-ADFA-483CCB153768-1024x677.jpeg)
![](https://doctor-koala-blog.com/wp-content/uploads/2023/03/6AFEA7B5-5DC2-4704-ADFA-483CCB153768-1024x677.jpeg)
![](https://doctor-koala-blog.com/wp-content/uploads/2023/02/B3E652CD-DF0B-4454-84DC-196B0575D187-150x150.png)
![](https://doctor-koala-blog.com/wp-content/uploads/2023/02/B3E652CD-DF0B-4454-84DC-196B0575D187-150x150.png)
![](https://doctor-koala-blog.com/wp-content/uploads/2023/02/B3E652CD-DF0B-4454-84DC-196B0575D187-150x150.png)
かなりホームページっぽくなりました。満足!
その他コピペカスタマイズまとめ
お問い合わせページ?
サイトマップにリンクしたお問い合わせページはこちらを参考にしました。Google FormをHTMLでリンクしています。
![](https://cdn-ak.f.st-hatena.com/images/fotolife/o/oyakudachiafi/20181117/20181117181145.png)
![](https://cdn-ak.f.st-hatena.com/images/fotolife/o/oyakudachiafi/20181117/20181117181145.png)
フキダシのデザインは?
会話形式のフキダシはこちらのコード集から簡単に作れました!
このブログ内の画像を2枚並べるコードもこちらに掲載されています。
![](https://cdn-ak.f.st-hatena.com/images/fotolife/u/utoutosara/20210421/20210421224842.png)
![](https://cdn-ak.f.st-hatena.com/images/fotolife/u/utoutosara/20210421/20210421224842.png)
読者になるボタンは?
こちらの記事を参考にしました。マウスオーバーで色が変わるところも素敵です。
![](http://cdn-ak.f.st-hatena.com/images/fotolife/s/somegoro/20160515/20160515195010.png)
![](http://cdn-ak.f.st-hatena.com/images/fotolife/s/somegoro/20160515/20160515195010.png)