はてなブログテーマ「Cappuccino」カスタマイズ

この記事をSNSでシェア

はてなブログテーマ「Cappuccino」カスタマイズ

Yokochaです。

はてなブログのデザインテーマを「Cappuccino」にしました。

f:id:yokocha01:20210525052216p:plain

Yokochaの「ママキャリアノート」

今までは「Undershirt」を使用していました。

フォントや基調のカラーが白で大好きだったのですが、続々とブログ仲間の皆様が「Cappuccino」に変更し、カスタマイズしやすい!という記事を書かれていて、変更することに決めました!

カスタマイズしやすいようにデモサイトやカスタマイズ記事を掲載してくれているので、初心者こそおすすめのテーマです˖✧

はてなブログテーマ「Cappuccino」でカスタマイズしたこと

今回は、利用者の1人として私がカスタマイズした内容をご紹介します。

デザインカラーの着せ替え 

カフェ風のかっこいい色味だったのですが、ネイビー×グレーの基調の変更しました。

こちらの記事の通り、CSSで1つ変更すると2つ3つ一気に同じ色への着せ替えができるので楽でした!

参考URL

www.fuji-blo.com

 ヘッダーを作成して入れる

これはちょっと失敗しましたが、そのままにしています笑。

失敗とは、PCで見たときに左右に余白が残ってしまっています...

Cappuccinoカスタマイズ

両側の端にはデザインを入れずに背景色を同色に設定したらきれいだったな、と反省しつつスマートフォンやタブレット端末では余白なく映っているので、まぁいいかとそのままにしています。

事前にこちらの記事を読まれるとこんなことは少なくなると思います。

参考URL

www.fuji-blo.com

タブレット端末、スマートフォンでのレスポンシブ対応についても書かれています。

ヘッダー画像は、Canvaで作成しています。

スマートフォンにアプリを入れておくと外出先やちょっとした時間にも作成できて便利です˖✧

Canva-インスタストーリー,SNS投稿画像のデザイン作成
Canva-インスタストーリー,SNS投稿画像のデザイン作成
開発元:Canva
無料
posted withアプリーチ

グローバルメニューの設置

ヘッダー画像下にはグローバルメニューを設置しました。

「Cappuccino」には、最初からCSSが組み込まれているそうで、デザインのヘッダ下にこちらのHTMLをコピペするだけで、グローバルメニューが設置できます。

しかも、スマートフォンで見るとハンバーガーメニューに!感動しました˖✧

PC版で、カーソルをあてたときの文字色を濃い色に変えたいと思いつつ、そのまま放置しちゃっています。

ブログ初心者のため、ご理解下さい^^。

目次デザインの変更

目次デザインは、オリジナルの色を変更して使用したかったのですが、どうしたらいいのか見当もつかず、テーマ作者のフジグチさんにTwitterのDMで直接質問させていただきました!

目次を黒板の色を変えてホワイトボードのようにしたいと考えています。 ネイビーの枠に白塗り、文字は黒、、CSSで変更できますでしょうか?

お手数かけて申し訳ないな、、と半べそだったのですが、即返信でCSSを送ってくださり、解決しました。

フォローが素敵すぎます˖✧いつもありがとうございます!

すごく素敵な目次デザインだったので、ブログのカラーに合わせて変更出来て大満足です♡

見出しデザインの変更

見出しデザインは、オリジナルも素敵でカラーのみを変更しようか悩みました。

変更した理由は単純に、自分で考えて設定してみたかったというだけの理由です。

まずは、オリジナルの見出しデザインをリセット。

参考URL

www.fuji-blo.com

次に、新しい見出しの作成。

ベースは、有名なサルワカさんのブログを参考に作成しています。

デザインは、LINE登録して毎日21時に配信される「北欧暮らしの道具店」のミニコラムが大好きで、影響を受けてます。

f:id:yokocha01:20210606233339p:plain

2021年はこの見出しでいきます!

プロフィールのおしゃれカスタマイズ

サイドバーにあるプロフィールをおしゃれにカスタマイズしました。

以前はHTMLをコピペさせてもらっていたのですが、現在は、記事内にフォーマットを置かれていて、そこに必要事項を入力するだけでカスタマイズできます。

...すごすぎる。本当に初心者にお優しい。

参考URL

www.fuji-blo.com

ド素人私は、SNSボタンのHTMLって何?と悩みに悩み、こちらもTwitterのDMで直接質問させていただきました。

こちらの記事のHTMLのことだったようで、すぐに解決。

参考URL

www.fuji-blo.com

f:id:yokocha01:20210606231053p:plain

びっくりするくらいおしゃれに!

サイドバーのタイトルは、オリジナルでは斜体になっているのですが、標準に変更しています。

「トップへ戻る」ボタンの設置

長文の記事になることが多いので、今回初めて「トップへ戻る」ボタンを設置しました。

こちらもこの記事を参照に。

参考URL

www.fuji-blo.com

デザインカラーに合わせた配色にしていますが、こちらを設置したときに「コメントを書く」ボタンの影の色が気になり、一緒に変更。

...すると、影がなくなっちゃった?

こちらもTwitterのDMで相談^^。(何度目でしょう?申し訳ないです。)

影がなくなったのではなく、私の選択した色がほぼ白だったため見えなかっただけでした。

少し濃い色に変更して解決。

おわりに 

はてなブログテーマ「Cappuccino」カスタマイズ

私が行ったカスタマイズは以下の通りです。

  • デザインカラーの着せ替え
  • ヘッダーを作成して入れる
  • グローバルメニューの設置
  • 目次デザインの変更
  • 見出しデザインの変更
  • プロフィールのおしゃれカスタマイズ
  • 「トップへ戻る」ボタンの設置

テーマ自体がすごくおしゃれなのですが、作者のフジグチさんがカスタマイズ記事をたくさん作成されていて、しかも1記事にまとめてくださっていたので、CSS、HTML苦手な私でもカスタマイズができました˖✧

1人では途中で挫折しそうでしたが、TwitterのDMでの質問にも迅速に回答いただけて、 大変助かりました。

参考URL

www.fuji-blo.com

もっと記事を増やせたら、「おすすめ記事」の設置とグローバルメニュー下にもう1段作成してPRを入れたいと思っています。

私でもできるのかな?

でも本当に、テーマ作者のフジグチさん、そして1番身近な応援団長のうとうとさらさんに感謝感謝です♡

本当にありがとうございました!

もし、テーマで迷ったら「Cappuccino」試してみてくださいね。

TOP