くうかんしんぷるライフ

賃貸2LDKのおうちでも快適に、シンプルに暮らしたい

Canvaでおしゃれなブログヘッダーを作成&目次・見出しのカスタマイズ【はてなブログ】

こんにちは、くうかです!
今回はぱっと見の見た目が変わったところのカスタマイズのご紹介です。
Canvaというサイトでブログのヘッダー画像を作り、さらに目次と見出しもブログの雰囲気に合わせてカスタマイズしました!

 

 

無料でおしゃれな画像が作れるCanvaでヘッダー画像を作成

f:id:ku-kahan:20190222215457p:plain

▼michikoさんのブログのヘッダーに感銘を受けました!

www.kurashi-asobi.com

かわいくておしゃれ!!

 

自分で絵を描いて画像を作ることができない私は、今までずっとヘッダーに悩んでいました。
シンプルなのも好きだけど、自分のブログの個性を少しでも出したいなと思い、おうちの写真を載せたりもしましたが、納得はいってませんでした(^^;

 

しかし、こちらの無料でデザインを作成できるツールを使えば、私でもできるかもしれない!と思い、挑戦しました!!
(有料の画像やイラストもありますが、無料の物だけでも作れます)

▼Web上でおしゃれな画像が作れるサイト

www.canva.com

 

▼使い方はこちらの記事を参考にさせていただきました!

Canvaならブログのヘッダー画像をおしゃれに作れる|Canvaの使い方を解説 | あすのたびさき|カメラ片手に週末旅行

出来上がってアップロードすると、そのままでは左右に余白ができてしまうので、それの設定の仕方もおまけで書かれています。

 

私が作ったヘッダー画像

使い方に慣れるまでは「??」な感じでしたが、やり方通りにやれば大丈夫でした!
フォントもたくさんの中から選べるし、画像も無料のものだけで作れました。

 

▼最初にできたのがこれ

f:id:ku-kahan:20190222215548p:plain

シンプルすぎるかな~

 

▼アクセントカラーを入れて出来上がったのがこちら

f:id:ku-kahan:20190222215446p:plain

目立たないけど真ん中の『*』をオレンジにしました。
この色がしっくりきたので( *´艸`)

 

あと、おうちの画像も『おうち』の文字部分にかぶせてみました。
小さなこだわり。

 

背景の点線のチェック柄も気に入りました^^

 

うぉー!!

 

私でもできたよぉーーー(涙)

 

michikoさんありがとうございました(*ノωノ)

 

ただスマホの表示が少し気になります(;^_^A
画像が妙に小さく見える・・・
スマホ対策のコードも別で付け足してみたんだけど、これが今の私には限界(^^;
直せたらご報告します。(いらんって?笑)←気になることを直すのが好きなんです

 

目次の簡単なカスタマイズ

ヘッダー画像に合わせて、白を基調とした見た目に変えたいと思いまして。
しかし色だけ変えるっていうカスタマイズ、検索しても見つけられず・・・( ;∀;)

そういう時の頼みの綱!

『右クリック』>『検証』です!!

f:id:ku-kahan:20190222215641p:plain

これでページのソース(?)というかスタイルシートが見えちゃいます。

 

素敵なブログを参考にしたい時は「検証」すると、どのフォントを使っているかとか、カラーなどもわかります。 

 

▼難しそうな画面が右側に出てきます

f:id:ku-kahan:20190222215637p:plain

目次部分を右クリックして検証を見て、どこを色指定すれば自分の好みになるかがわかりました。
(あまり知らない分野だけど、カンです笑)

『デザイン』>『CSS』にこの文を追加。

/* 目次カスタマイズ */
.table-of-contents{
background-color: #fff;  /* 背景色  */
border: 1px solid #ccc;  /* 枠線の色 */
}

 シンプルに、背景色を白、枠をグレーにしました。

 

見出しもイメチェン

どうせなら見出しも合わせようと思い、カスタマイズしました。

▼参考にさせていただきました。

saruwakakun.com

 

大見出し

吹き出し風の見出しです。

f:id:ku-kahan:20190222215542p:plain

枠線は目次と同じグレーです。
まるっとしてる枠より、カクカクの枠のほうが好み♡ 

 

中見出し

下線の色をアクセントカラーのオレンジを入れました。

f:id:ku-kahan:20190222215643p:plain

ブログと合ってるかな?と思いましたが、見慣れてきたらいい感じに思えてます♪

 

小見出し

チェックアイコンがかわいかったので。

f:id:ku-kahan:20190222215545p:plain

 めったに登場しない小見出しですが、かわいいから使いたいです(笑)

 

まとめ

今回は、ヘッダー画像・目次・見出しのカスタマイズをご紹介しました。

 

ガラッとイメチェンとまではいかないけど、ヘッダーを変えるだけでもけっこう雰囲気が変わりますね!
Canvaを使って私でもこのような画像が作れて、感動でした。

 

とっても気に入ったので、またカスタマイズ熱が再燃しそうです( *´艸`)
あー楽しかった!!

 

※カスタマイズは自己責任でお願いします。バックアップを取ってから行ってください。

 

本日も最後までご覧いただき、ありがとうございました。

 

ちなみに、以前の記事でご紹介したフォント関連のカスタマイズ。
游ゴシックのフォントが残っていた部分があったので修正しました。

www.kurasitotonoe.com

▼テーマ『Minimalism』のスマホで太字が表示されない問題を解決!

www.kurasitotonoe.com