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

こんにちは、ゆるミニマリスト主婦のくうかです。

Canvaというツールを使ってブログのヘッダー画像を無料で作りました。
無料でほぼ作成できておすすめのツールです！

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

くうか

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

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

自分で絵を描いて画像を作ることができない私は、今までずっとブログのヘッダーに悩んでいました。

シンプルに文字だけも良いけど、自分のブログの個性を少しでも出したいと思い、おうちの写真を載せたりもしましたが、納得はいっていませんでした。

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

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

有料の画像やイラストもありますが、無料の物だけでも作ることができます。

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

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

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

最初にできたのがこれ

くうか

シンプルすぎるかな～

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

くうか

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

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

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

くうか

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

ただはてなブログではスマホの表示が少し気になります。
画像が妙に小さく見える…。

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

あわせて読みたい

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

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

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

そういう時の頼みの綱！

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

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

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

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

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

はてなブログ：『デザイン』＞『CSS』にこの文を追加。

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

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

最後に

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

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

くうか

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

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

Canvaを使ったブログのアイキャッチの作り方も記事にしています

あわせて読みたい

簡単おしゃれなブログのアイキャッチ画像の作り方アイキャッチ画像とは「目を引く画像」ということで、ブログの記事を読んでもらうためにも設定した方が良いとされています。今回は私が使っているCanvaでのアイキャッチ作成方法をご紹介します。