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

こんにちは、主婦ブロガーくうかです。

Canvaというサイトでブログのヘッダー画像を無料で作りました(^^♪

さらに目次と見出しもブログの雰囲気に合わせてカスタマイズしました！

htmlやcssが右クリックで見られる『検証』のやり方も少し紹介しています。

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

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

しかし、こちらの無料でデザインを作成できるツールを使えば、私でもできるかもしれない！と思い、挑戦しました！！

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

有料の画像やイラストもありますが、無料の物だけでも作れます

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

実際に作っってみたヘッダー画像

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

最初にできたのがこれ

シンプルすぎるかな～

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

目立たないけど真ん中の『＊』をオレンジにしました。
アクセントがあるだけでだいぶ違いますね！

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

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

うぉー！！

私でもできたよぉーーー（涙）

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

▼後日スマホのヘッダー表示を改善しました。

あわせて読みたい

ヘッダー画像の余白をなくしスマホも美しく表示させる【はてなブログ】はてなブログでヘッダー画像を設定すると、余白ができてしまったことなどありませんか？当ブログも最初は上手くいきませんでしたが、調べまくってやっと解決できたという経緯がありましたので、備忘録がてら参考にさせていただいた記事をご紹介したいと思います。

htmlやCSSを調べられる「検証」の方法

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

そういう時の頼みの綱！

『右クリック』＞『検証』です！！

目次のところで【右クリック】＞【検証】を選択。
これでページのソースというかスタイルシートが見えちゃいます。

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

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

目次部分を右クリックして検証を見ると、どこを色指定すれば自分の好みになるのかがわかりました。
なかなかどの部分なのか見極めるのは難しいかもしれませんが…。

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

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

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

最後に

今回は、Canvaを利用したヘッダー画像の作成とCSS検証方法をご紹介しました。

ガラッとイメチェンとまではいかないけど、ヘッダーを変えるだけでもけっこう雰囲気が変わりますね！

くうか

Canvaを使って私でもこのような画像が作れて、感動でした

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

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