Canvaでおしゃれなブログヘッダーと検証の方法

こんにちは、ゆるミニマリスト主婦のくうかです。
Canvaというツールを使ってブログのヘッダー画像を無料で作りました。
無料でほぼ作成できておすすめのツールです!
さらに目次と見出しもブログの雰囲気に合わせてカスタマイズしました!

htmlやcssが右クリックで見られる『検証』のやり方も少し紹介しています。
無料でおしゃれな画像が作れるCanvaでヘッダー画像を作成
自分で絵を描いて画像を作ることができない私は、今までずっとブログのヘッダーに悩んでいました。
シンプルに文字だけも良いけど、自分のブログの個性を少しでも出したいと思い、おうちの写真を載せたりもしましたが、納得はいっていませんでした。
しかし、こちらの無料でデザインを作成できるツールを使えば、私でもできるかもしれない!と思い、挑戦しました!!
Web上でおしゃれな画像が作れるサイト⇒Canva
実際に作ってみたヘッダー画像
使い方に慣れるまでは「??」な感じでしたが、やり方通りに進めれば私でも大丈夫でした!
フォントもたくさんの中から選べるし、画像も無料のものだけで作れました。
最初にできたのがこれ





シンプルすぎるかな~
アクセントカラーを入れて出来上がったのがこちら





目立たないけど真ん中の『*』をオレンジにしました。アクセントがあるだけでだいぶ違いますね!
あと、おうちの画像も『おうち』の文字部分にかぶせてみました。
小さなこだわり。
背景の点線のチェック柄も気に入りました^^



うぉー!!私でもできたよぉーーー(涙)
ただはてなブログではスマホの表示が少し気になります。
画像が妙に小さく見える…。
後日スマホのヘッダー表示を改善しました!


htmlやCSSを調べられる「検証」の方法
ヘッダー画像に合わせて、目次も白を基調とした見た目に変えたいと思いまして。
しかし色だけを変えるっていうカスタマイズ、検索しても見つけられず。
そういう時の頼みの綱!
『右クリック』>『検証』です!!


難しそうな画面が右側に出現!


目次部分を右クリックして検証を見ると、どこを色指定すれば自分の好みになるのかがわかりました。
なかなかどの部分なのか見極めるのは難しいかもしれませんが…。
はてなブログ:『デザイン』>『CSS』にこの文を追加。
/* 目次カスタマイズ */
.table-of-contents{
background-color: #fff; /* 背景色 */
border: 1px solid #ccc; /* 枠線の色 */
}
シンプルに、背景色を白、枠をグレーにしました。
最後に
今回は、Canvaを利用したヘッダー画像の作成とCSS検証方法をご紹介しました。
ガラッとイメチェンとまではいかないけど、ヘッダーを変えるだけでもけっこう雰囲気が変わりますね。



Canvaを使って私でもこのような画像が作れて、感動でした!
カスタマイズは自己責任でお願いします。メモ帳等にバックアップを取ってから行ってください。
Canvaを使ったブログのアイキャッチの作り方も記事にしています


コメント