Dr. Koala’s Blog

ド底辺アナリストがジタバタしてみるブログ

テーマをCappuccinoにしました(カスタマイズまとめ)

f:id:mountkoara:20210427120533j:plain
2021年は心機一転テーマを大改造しました。

しばらーく放置されていたこのブログですが(実は7年前に立ち上げなのです)、テーマを一新することで見違えるほど今っぽいブログになりました。 

使ったテーマはCappuccino!

使ったテーマはこちらです。カフェっぽい雰囲気と落ち着いた色味が気に入っています。

blog.hatena.ne.jp

安直ですがこのテーマをそのまま活用して、カプチーノ素材を集めていざ製作開始です!

f:id:mountkoara:20210427123522j:plain

自由にカスタマイズできるよう製作者の方がたくさんTipsを用意してくれていて、こちらのブログを参照しながらいくつかカスタマイズしてみました。はてなブログのカスタマイズ初心者でも簡単にできたので、いくつか紹介します。

www.fuji-blo.com

グローバルメニューorおすすめ記事?

ブログ記事を探す際、大事なのはカテゴリなどの記事をまとめて俯瞰できる機能ですよね。デフォルトでもあるのですが、スマホだと記事下で遠いし、シンプル過ぎてもうちょっと工夫したくなります。

f:id:mountkoara:20210427111059j:plain

ちょっと寂しい

そこでカスタマイズの中から2つ試してみました。グローバルナビゲーションと、おすすめ記事です。

f:id:mountkoara:20210427111214j:plain

ヘッダーの茶色い帯がグローバルナビゲーション

f:id:mountkoara:20210427111254j:plain

4つのカードをナビゲーション代わりに

どちらもアクセスしやすくデザインも好みだったのですが、スマホで見た時にグローバルナビゲーションだとハンバーガーメニューになってしまうのを避けたくておすすめ記事の方を採用しました。老眼にはハンバーガー見つからぬ…

f:id:mountkoara:20210427111911j:plain

右上がハンバーガーメニュー

これでスマホでもバッチリ表記されます。しかしグローバルメニューの帯のデザインも気に入っていたので、人気記事を紹介する帯として採用しました。

f:id:mountkoara:20210427112436j:plain

うん、かわいい

人気記事の帯の入れ方はこちらを参考にしました。これはかなり目立つ&お洒落!

www.oheya-migaru.com

固定ページでホームページ風に

カテゴリ一覧ページとサイトマップは固定ページ(Proの機能)で作成しました。参考にしたブログはこちら。こちらのブログのトップページは洗練されてて素敵です。

www.ahiru-nonnbiri-blog.work

この作業をしていてサイドバーを消すことができずにドン詰まり、テーマ制作者のブログに質問をして答えていただきました。質問と回答はこちらの記事にあります。ありがたや。

www.fuji-blo.com

f:id:mountkoara:20210427121933j:plain

これが

f:id:mountkoara:20210427121953j:plain

こうなる

PCやタブレットのみ有効ですが、かなりホームページっぽくなりました。満足!

ブログ特有のタイトルや日付はHTMLで消しています。

<style><!--
/* サイドバー・日付を消す*/
#box2,
.entry-header,
.entry-footer {
display: none;
}
--></style>

それにしてもテーマがお洒落だと一気に垢抜けますね。
 

 
 


その他コピペカスタマイズまとめ

お問い合わせページ?

サイトマップにリンクしたお問い合わせページはこちらを参考にしました。Google FormをHTMLでリンクしています。

oyakudachiafi.hatenablog.com

フキダシのデザインは?

会話形式のフキダシはこちらのコード集から簡単に作れました!

このブログ内の画像を2枚並べるコードもこちらに掲載されています。

www.fuji-blo.com

読者になるボタンは? 

こちらの記事を参考にしました。マウスオーバーで色が変わるところも素敵です。

somegoro.hatenablog.com

よかったらぜひ。