サクラサク〜Simple Lifeに憧れて〜

えがお咲く、すごしやすいくらしづくりの覚書

Canvaで作成!ブログとTwitterのヘッダー画像【はてなブログ】【初心者向け】

2019/10/2更新

 

こんにちは!sakuです。ご訪問ありがとうございます☆

 

今まで空白だったブログのヘッダーをこの度自作しました!

 

 

ヘッダーの素材はリニューアルしたプロフィール画像とアイコン

今までブログのヘッダーを空白にしていたのは、ブログ名変えようかなとか、ヘッダーイラストもお願いしたいなと思っていたのでそのままでした^^;

 

この度、スミカさんにプロフとアイコンを作成して頂いたので、そのイラストを使って自分なりにヘッダーを作ろうと思い立ったのです。本音はヘッダーもスミカ製にしたい(目標)

▼イラスト完成までの流れ

www.sacoo1a.com

 

 

はてなブログのヘッダー画像をCanvaで作成!サイズは?作り方は?

はてなブログをはじめて1年半以上経ちますが、ヘッダー画像のサイズはいくつ?とか知らずに過ごしていたので改めて確認。

はてなブログで推奨されているヘッダーの画像サイズは横幅1000px×縦幅200pxとのこと。

 

このサイズでCanvaで作ってみることにしました。 

 

Canvaのカスタムサイズで画像作成

ちなみに、アイキャッチの作成もCanvaを利用しています( ˘ω˘ )

 

Canvaを開くとホーム画面のデザイン作成に「カスタマイズサイズ」があるので、ポチして1000×200になるように数字を入力。

f:id:sacoolablog:20190804224009j:plain

 

 

あとはお好きにデザイン。

 

保存時は、png形式でダウンロードしました。

f:id:sacoolablog:20190804224018j:plain

 

はてなブログにヘッダー画像を挿入したい。背景画像に?ヘッダーに?

まず、はてなブログの「デザイン」⇒「カスタマイズ」⇒「背景画像」に挿入してみました。

すると、ブログタイトルの文字と被ってしまった!!!

 

お次に「ヘッダー」でリベンジ。

「画像のみ表示する」を選択して挿入するとキレイに入りました! 

f:id:sacoolablog:20190804223954j:plain

 

 

レスポンシブテーマなのにスマホ表示がうまくいかない。cssで調整できるらしい

私が利用しているブログテーマはSOHO。レスポンシブです。

スマホからの見え方を確認したら・・・

 

f:id:sacoolablog:20190804231217j:plain

 

うまく表示されない

 

 調べるとcssで調整できるようです。

しかし、うまく反映されなかったというのと、あまりcssいじりたくない…という思い別の方法を模索。

 

サイズを400×200に作り直してリトライ

サイズを小さくしたらキレイに収まるというのを知り、リトライ。

前述のように、canvaでカスタイムサイズで作り直しました。

 

はてなブログのヘッダー部分に同じように画像を挿入!

 

スマホで確認。

f:id:sacoolablog:20190804231221j:plain

許容範囲内かしら。

 

 

この方法でそれっぽくできたのですが、背景をホワイトにしているからできる技なのかもしれません。汗

 

Canvaでダウンロード時に「背景透明」のチェックをして保存すれば背景がカラーでもできるのかと思いますが、「背景透明」機能はプロ(有料)なので、これもまた得策ではないのかな。。

 

カスタマイズのプレビューはデモサイトで確認

一連のチェックはサブブログを作成してデモとして、実際にcssなどをいじって見え方を確認しています。

(でもサイトも同じブログテーマ)

 

【はてなブログ】超初心者でもできたブログテーマ変更とカスタマイズ一挙公開!minimalismからSOHOへ の記事でも書きましたが、メインのバックアップにもなるので、ブログテーマを変更してからはちょくちょくデモサイトを使ってチェックしています^^

 

Twitterのヘッダー画像もCanvaで作成!

Twitterのヘッダーも替えました。

はてなブログでのヘッダー画像は手こずったのですが、Twitterは比べたら簡単。

Canvaのデザイン作成の中にはTwitterのヘッダーのフォーマットがあるので、ピッタリサイズのヘッダーが作れます。

 

▼Before

f:id:sacoolablog:20190804224004j:plain

 

▼After 

f:id:sacoolablog:20190804231204j:plain

 

アイコンをマークにしているの、ヘッダーにプロフ画像を入れてみました。

アイコンが被って見えるのですが、スマホだと大丈夫だったような。

 

 

まとめ:位置の調整が手間だけど、ヘッダー画像があるといいね♪

私はあまり時間をかけたくないという思いもあったので、背景を白にしたデザインで400×200にしました。余白なども気にせずGOしてしまっていますが、余白なしにするなどのcssもあるようです。

 

▽レスポンシブの調整・余白なしの参考サイト▽

blog-support.jp

 

 

シンプルな暮らしを目指して、家族の笑顔が咲くようにおうちのことも頑張っていこうと思います!最近全然できていない…。

素人感ありありのヘッダー画像ですが、しばらくはコレでいこうと思います^^

 

 

おすすめ関連記事 

▼ブログテーマはSOHO 

www.sacoo1a.com

 

▼ブログ紹介記事(案内板)

www.sacoo1a.com

 

 

▼ホームベーカリー活動も頑張らねば! 

www.sacoo1a.com

 

 

 

ご覧いただきありがとうございました☆