今日Amazonから届いたもの

理系頭巾の知見

なんちゃって理系の頭巾が知ったことや考えたことをまとめているブログです。

理系頭巾の知見

【無料】「Canva」でブログのヘッダー画像を作ってみた! 誰でも簡単にオシャレなデザインが出来るぞ!!

はじめに

f:id:gqp:20170525185435j:plain

皆さんこんにちは、頭巾です。

皆さんはKDDIが「Canva」というクラウドサービスの日本語版の提供を始めたというニュースを知っていますか?

japan.cnet.com

上の記事タイトルにもあるように「Canva」の魅力は何と言っても"無料“である点です。

ブラウザ上で簡単に画像を作成することのできるサービスは他にも多数ありますが、上の記事で「日本のデザインを変えたい」と発言されている様にその気合の入りっぷりは目を見張るものがあります。

「そんなに自信満々に発表するのなら、折角だから未設定だったブログのヘッダー画像を作ってみよう!」と思い立ち、早速作ってみました。

本記事では「Canva」ではてなブログのヘッダー画像を作る方法をご紹介します。

1. 「Canva」にアクセス

早速次のリンクから「Canva」にアクセスしてみましょう。

www.canva.com

2. ログイン方法は3種類

f:id:gqp:20170525181455p:plain

Canvaを利用するためには「Googleアカウント」か「Facebookアカウント」でログインするか、メールアドレスを登録する必要があります。

記事作成者はGoogleアカウントでログインしました。

3. 「Canva」の使い方をチュートリアルで確認する。

f:id:gqp:20170525181820p:plain

初回ログイン時は「Canva」の使い方を分かりやすく確認することができるチュートリアルが始まります。

このチュートリアルは自動で表示が切り替わっていき、あっという間に終わります。

f:id:gqp:20170525181936p:plain

ライオンが「おいしい。」と言っている不思議な画像が自動で作成され、チュートリアルが終わりました。

f:id:gqp:20170525182033p:plain

いよいよデザインの始まりです!

4. 画像サイズを指定してヘッダー画像を作成していく

はてなブログのヘッダー画像として推奨されているサイズは「1000(width)×200(height) [px]」です。

Canvaに初めから設定されている画像サイズには同様のものがないので、画面右上から画像サイズを指定します。

f:id:gqp:20170525182524p:plain

何も入力されていない台紙が表示されました。

まずはブログタイトルを入力してみます。

f:id:gqp:20170525182823p:plain

Canvaには沢山のフォントが標準で用意されているので、ブログタイトルを自分好みにデザインすることができます。

f:id:gqp:20170525182729p:plain

画像素材も豊富ですが、無料で使用できるものは限られています。

f:id:gqp:20170525183145p:plain

「理系」や「物理」、「math」などで検索しましたが結局ブログのアイコンである「頭巾」の画像を使うことにしました。

手持ちの画像をアップロードする場合は画面左下の「アップロード」アイコンをクリックします。

f:id:gqp:20170525183223p:plain

アップロードした画像の編集も可能です。

色々な加工ができるので、全ての作業がブラウザ上で完結しますね。

f:id:gqp:20170525183331p:plain

試行錯誤の末、なんとかヘッダー画像が完成しました!

f:id:gqp:20170525183431p:plain

ヘッダー画像単体だとこんな感じに。

f:id:gqp:20170525161052p:plain

ブログタイトルを中央に表示してその左右に頭巾を2人置いただけのシンプルなデザインですが、Canvaを使いこなせばもっと手の込んだヘッダー画像が作成できそうです。

作成した画像は「Canva」の作業画面の右上から保存できます。

f:id:gqp:20170525183701p:plain

無事保存され、「Canva」ではてなブログのヘッダー画像を作成することができました。

非常に使いやすく設計されているので、「Canva」を使えば誰でも簡単に好みのデザインを実現できると思います。

以上、『【無料】「Canva」でブログのヘッダー画像を作ってみた! 誰でも簡単にオシャレなデザインが出来るぞ!!』でした。

おまけ ヘッダー画像をブログトップにぴったり設定する方法

「Canva」でヘッダー画像を作成したのはいいんですが、そのヘッダー画像をブログに設定する作業が少し面倒だったので手順をまとめておきます。

何も考えずはてなブログ「デザイン」→「ヘッダ」→「タイトル画像」と進んで作成した画像を設定したら、次の様になりました。

f:id:gqp:20170525184200p:plain

画像サイズははてな推奨のサイズなのですが、どうにもヘッダー部分と大きさが合っているように見えません。

また、メニューバーよりも上のどの部分をクリックしてもブログトップへ遷移するように設定したいところです。

この設定には次の「月無ことのは」さんの記事が参考になりました。

www.tukinasikotonoha.com

上の記事にあるコード内の「背景色」「ブログURL」「ブログ名」「ヘッダー画像のURL」を変更して、「ヘッダ」の「タイトル下」に追記した結果、次の様に綺麗に表示されるようになりました。

f:id:gqp:20170525184643p:plain

ちなみに「ヘッダー画像のURL」は、HTML編集で作成した記事にヘッダー画像を貼り付け、そこからURLをコピーしました。

おわりに

ヘッダー画像も加わって、ようやく当ブログもブログらしい体を成してきたように感じます。

元々ヘッダー画像を作成していたのですがどうにも上手く行かず諦めていた所だったので、「Canva」を使用してあっという間に完成したヘッダー画像のクオリティに驚きました。

やがて多くの人の仕事が人工頭脳に奪われるという話を最近よく聞きますが、なんだかその兆候を感じたような気分です(笑)

無料で簡単に高クオリティのデザインを実現できる「Canva」。是非利用してみてはいかがでしょうか。