HANAのおと

50代主婦hanaの雑記帳。おもしろい、役に立つ、覚えておきたいことをあれこれと書いています

【はてなブログ】ヘッダー画像の作成と設定、スマホ画面に反映もコピペで簡単!初心者にもできた!

f:id:hanahirako:20200725230458p:plain



気がつけばもうすぐ8月!

半年以上続けてこれたこのブログ、プログラミングのことは右も左もわからずに「えいや!」と書き始めたHANAです。

実はこのブログを始めてたころから

ブログタイトルの書体を変えてみたいな~

と思っていました。


が、素人が始めたばかりであれこれと下手にいじって元に戻らなくなったら怖いので、手は出さずにいました。ちなみにこのブログではHaruniというテーマを使っています。

続けていくうちに、いろんな方のブログから学び、吹き出しやマーカーなども少々、またcanvaを使って画像を作ることを覚えました。

そこで、この度、canvaを使ってへッダー画像を作り書体を変えてみるました。

もちろん無料です。

 

初心者でもできたブログタイトル(ヘッダー画像)の設定について、その手順を紹介します。

 

 

ヘッダー画像設定の手順

ヘッダー画像というのはどこかというと下の写真の通り、ブログのタイトル部分の画像のことです。

これは以前のヘッダーです。

ヘッダー画像の位説明



haruniのテーマのピンク系のグラデーションを水色系に変えて使っていました。


ヘッダー画像には、イラストや写真、文字やロゴも使えます。
新しいヘッダーでは、ロゴとイラストを組み合わせて画像を作り、貼り込みました。
背景にロゴとイラストをのせたように見えますが、実は、こんなふうに背景とアップロードした画像からできています。

 

新しいヘッダー画像の説明

 

では、順を追って作業の説明をしていきます。
 

 

haruni(はてなブログ)の設定を変える

最初に、haruniの設定を変えます。

なぜならharuniの水色グラデーションのままヘッダに画像を貼り込むとこんなふうになってしまうからです。

 

haruniの設定を変えずに画像を貼り込んだ場合

 

グラデーション部分はなくしてしまいたいので、新しい画像の背景色と統一することにしました。

haruniはグラデーションを単色にすることで、はてなブログの背景色が使えるようになります。

 

では、まずそちらの設定をします。

 

haruniのデザインを単色に変更する

yumekawa.hatenadiary.com


単色にする方法はこちらにあるCSSのコードを貼ります。

貼り方は

デザインから

はてなブログ デザインを選ぶ

カスタマイズを選択します

はてなブログ カスタマイズ選択画面

そして下の方にあるCSSを選択

はてなブログ CSS選択画面

上の矢印をクリックすると下のようなボックスが開くのでそこにコピーしたコードを貼りつけます。

 

はてなブログ CSS選択画面からコードを貼る位置表示

既に入っているコードは消さないように注意して、その下にコピーしたコードを貼りつけ(ペースト)します。


コードを貼りつけたら保存します。

これでヘッダー部分に背景色から選んだ色が反映されるようになりました。

 

 

背景色を選ぶ

背景の色ははてなブログのデザインにある背景の色を使っています。

はてなブログ ヘッダー画像の説明


その背景色のコードはデザイン→カスタマイズ→背景色

で選択

はてなぶろぐ 背景色選択画面

 

その次に下のCSSのところを見ると背景色のコードがわかります

下の赤枠のなかの

#D0ECEA

が先ほど選んだ背景色のコードです。

 

CSSで背景色のコードを調べる画像

 

その色コードをコピーしておきます。

 

Canvaで画像を作る

次に、新しいブログの看板になる画像を作ります。
画像作成はCanvaというサイトを使いました。

 

canvaトップ画像

https://www.canva.com/

 

画像サイズの設定

右上のデザイン作成をクリックし、カスタムサイズを選びます。

canva デザイン作成画面


サイズを指定します

幅は1000 高さ200(px)の数字を入力して「新しいデザインを作成」をクリックします

すると、ブログタイトルのサイズのキャンバスが作成されます。

 

ブログタイトルのフォントの選択

次はブログタイトルのロゴを作ります。

のように、右側に白いキャンバスが用意されるので、左の項目からT(テキスト)を選択しクリックします

canva ロゴ作成画面1

すると、キャンバスの上に見出しを追加の文字が追加されます。

 

次に文字の大きさを決めます。(後で変更できます)

文字の大きさは上(矢印)の数字のから選択できますが、水色の枠の左上の◯をドラッグして調整する方が簡単です。

 

大きさを決めたらフォント(書体)を選びます。

文字の大きさを表す数字の左に文字のフォントが出ていますが、その右側の

「く」の下向きマークを選択すると下の画面のように使えるフォントがズラリと出てきます。(王冠のマークがついているものは有料なのでパス)

その中から好きなフォントを選びます。

canva見出しのフォント選択画面



文字の色は書体のサイズの数字の右隣にあるAマークを選択すると左にカラーパレットが出てくるので、そこから選択します。カラーパレットにない色はその上の『新しい色」を選択して好みの色を作ることもできます。

canva 文字色選択画面


 

イラストを選ぶ

次はイラストです。

左の項目の素材を選びます。

canva 素材選択画面

使いたいイラストを選んでクリックすると右のキャンバスに挿入されます。
挿入した素材の大きさは水色の枠の四隅の◯をドラッグすれば大きくなったり小さくなったり調節可能です。

画像の移動は水色の枠の下の☩マークで動かせます。

イラストを傾けたいときはその横の回転矢印↻で変えられます。

そしてできたのがこちらの画像

canvaで作ったタイトル画1

文字をABCの3ヶ所、イラストを6カ所貼りこんであります。

 

背景の色を決める

最後に、ロゴをのせる背景の色を決めます。

最初にはてなブログで選んだブログの背景色のカラーコードを使います。

作成中の見出しの背景(白い部分)をクリックすると上にアニメ―トという項目が出てくるので選択します。

canva 背景色選択



左のカラーパレットの上にある検索欄に先ほどコピーしたカラーコードを入力します。

 

canva 背景色選択画面1

 

すると、カラーパレットのトップに「検索履歴から」として選んだ色が表示されるので、それをクリックすると、はてなの背景色と同じ色の背景が作れます。

 

全体のバランスを調整

最後に、文字やイラストの大きさや色、配置バランスなどを調整します。

これでcanvaの作業は完了。

右上のダウンロードボタンからダウンロードします。

 

 

はてなブログのヘッダー画像に設定する

最後の行程です。

ダウンロードした画像をはてなブログのヘッダーに貼り込みます。

 

デザイン→カスタマイズ→ヘッダ→タイトル画像→画像をアップロード

 

画像をアップロードの下の「ファイルを選択」をクリックするとPC内の画像ファイルが表示されるので、その中から先ほどダウンロードした画像を選択します。

選択した画像は自動的にはてなフォトライフにアップロードされます。

 

 

はてなブログ ヘッダー画像貼り付け画面

表示設定は画像だけ表示にチェックをいれます。

 

 

スマホ画面の調整

スマホで見た時にヘッダがはみ出さないように調整します。

調整しないとこんなふうにはみ出しています。

 

スマホヘッダー画像はみ出し画



そのやり方についてはこちらを参考にさせていただきました。

affiliate-couple.hatenablog.com

 

ここに紹介されているコードをCSSに貼れば、スマホのヘッダーもピッタリおさまります。
最後に保存して終了です。

 

 

まとめ

haruniのテーマでヘッダー部分の差し替え手順をまとめると次のようになります。

 

1 テーマharuniの設定を変えて背景色が使えるようにする
2 canvaで画像を作る
3 はてなブログのヘッダー画像に作った画像をアップロードする
4 スマホ画面の調整で作業完了  


初心者の私にとっては自分で作った画像が使えるようになるなんて、うれしい限り。
新しいことができた!という達成感を味わえたのは久しぶりです。
これからもまた、ボチボチ新しいことに挑戦していきたいと思います。

 

 

にほんブログ村 主婦日記ブログ アラフィフ主婦へ
にほんブログ村