ブログを始めて気になっていたけどヘッダーとロゴは手付かずで後回しにしていた、、そんな方も中にはいるんじゃないかなと思います。
私もその中の一人ですが後回ししていたこの二つ、ブログの顔ともいわれるくらいとても大切なものです。
なぜ大切かというと、まずサイトに入ると一番先に目に飛び込んでくるのがそのサイトのヘッダーとブログ名（ロゴ）
そこでそのサイトがどのような情報を発信しているかをなんとなく予想することができるかと思いますが、もしヘッダーとロゴが地味だったりインパクトがなかったりすると少なからずがっかりして長居せずに帰ってしまうかもしれません。
まさしく悪い見本だった当ブログ．．．
パソコン初心者＋ブログ初心者＝よくわからないの相乗効果で後回し作戦にしていたためかなり地味です。
でも個人的には嫌いじゃない（ロゴはちょっと．．．）けど変えることにしました。
Canvaでヘッダーとロゴ作りに挑戦してみよう
ヘッダーとロゴ作りにCanvaを使ってみた
Google、Facebook、メールアドレスのどれかに登録することで無料でブログのもう一つの顔ともいえるヘッダーとタイトルを作ることのできるCanvaを使ってみました。
『Canva』（こちらから入れます）
Googleを登録してある状態であれば右上にGoogleでCanvaにログインが出現していますので、○○として続行をクリック
カスタムサイズをクリック
『幅×高さ』の入力をブログのヘッダーに使いたいので1240×250にしました。
次にヘッダーに使う画像を無料で商用OKなサイトでダウンロードします
アップロードから『画像または動画をアップロード』をクリックし、画像をアップロード
画像をクリックすると真っ白だったページが選んだ画像に変わります。
文字を入れるため『テキスト』の『見出しを追加』をクリックすると画像中央に文字を入れるための枠がでてくるので、枠の両角の白い丸か、丸と丸の間にある白い長方形で枠の大きさを決めます。
左の赤枠・・文字のフォント
真ん中の赤枠・・文字の色
右の赤枠・・文字のエフェクト
文字を入れただけなのにだいぶブログのヘッダーらしくなってきましたがまだ少しインパクトが薄い気がするので手を加えることにしました。
左側にある赤枠『素材』をクリックすると色々な形のフレームがでてくるので自身が使いたいフレームを選びます。
すると画像の上にフレームがでてきますがこのままでは重なっていて文字が見えませんのでフレームの配置を変えます。
右上にある赤枠の『配置』をクリックするとフレームの配置換えができるので、文字の後ろにもっていくことのできる『背面へ』をクリック
隠れていた文字が前面でてきましたが、クロネコちゃんはフレームで隠れたままになっていますので見えるようにしていこうと思います。
左上の赤枠内の色が水色になっていますがこれはフレームの色で左側のパレットから好きに決められます。
色を入れたら右上の赤枠『透明度』をクリックをし、フレームを透明にしていきます。
終わったらダウンロード
これでブログのヘッダーとロゴ作りは終了です。
次は先ほど作ったヘッダーを設定していきましょう
当ブログはCocoonのテーマを使っていますので設定はCocoonです。
Cocoonでヘッダーの設定をしよう
まずCocoon設定を選択
ヘッダーをクリック
ヘッダーレイアウトはそのままいじらずセンターのまま、高さも入力せずに空欄に
ヘッダーロゴのところに作った画像を選択し変更をまとめて保存をクリックしたら終了です。
これが完成した新しいヘッダーです。
少しは見た目もよくなったかな？＾＾
次は失敗例になります
設定の失敗例
画像のサイズが250なので高さを250と入力
パソコン上からだと変わりはなくみえましたがiPadで少し、モバイル上からだとかなりおかしくなってしまいました。
背景は大きくなるがロゴが小さくなってしまい背景ばかり主張してバランス悪い気がしますが、これは高さを空欄にすることでもとに戻ります。
設定の背景画像のところに作った画像を選択した場合パソコン上からみるとこのような状態になります。
この設定にすれば端っこまで画面がきますが広がりすぎてブログ名がみえなくなりおかしいことになっています。
また中央に『クロシロブログ』とありますがこれはWordpress基本情報のサイトタイトルで、背景画像のみだとサイトタイトルがでてしまいますがヘッダーロゴ画像を表示してるとでませんので私は気にせずそのままにしています。
どうしても気になる方はWordpress→外観→カスタマイズ→サイト基本情報から変更可能です
こちらはモバイルからみたサイト
まとめ
このやり方は背景とロゴをまとめて一つにしているので、ヘッダーロゴで設定する場合なら画像が崩れることなくできると思います。
画面の端まで画像がきたほうがキレイですがそのためには背景画像とロゴを別々にすればできそうですね。
