君が笑顔になるならば

君が笑顔になるならば

息子との日々や家事のことを中心に書きます。買って良かった商品の紹介もしていきます。

【ブログカスタマイズ】はてなブログのヘッダーを変えてみた

f:id:tu4ba23sa:20181206223718j:plain こんにちはあんずです。 ブログカスタマイズ、次はブログのヘッダーを変えてみました。 とっても簡単なので、初心者さんにオススメしたいです。 オシャレさはイマイチですが。

まずヘッダーとはなに?

ブログのヘッダーとは何のことでしょう? 聞かれてもすぐには答えられません。

調べてみると、ブログのヘッダーとは WEBページでは、サイトのロゴ画面・画像・タイトルがある領域がヘッダーです。 簡単に言うと、ブログの1番上の画像のことです。 私のブログで言うと f:id:tu4ba23sa:20181206151425j:plain まるで囲んだところです。

ブログによって、ヘッダーの画像の大きさは違うようです。 はてなブログの場合、画像の大きさは横1000px 高さ200pxのサイズがオススメされています。

前のヘッダーただ貼り付けただけだった

今回文字入りのヘッダーを貼り付けたわけですが、前まではただ画像のみでした。 f:id:tu4ba23sa:20171130090759j:plain

可愛いのですが、ただ貼り付けただけなので味気がないものになりました。 ヘッダーを編集する際は文字入りにするとブログの印象もアップするのでオススメです!

ヘッダーの画像の作り方

ヘッダーの画像を作成するにあたり、方法をいくつか調べました。 1つは、画像にテキストやアイコンをのせるもの。簡単にすぐ出来るのはこれだと思います。 私も画像にテキストをのせて加工しました。

画像は写真ACさんや www.photo-ac.com

ぱくたそさんからいただきました。 www.pakutaso.com

アプリは https://play.google.com/store/apps/details?id=com.pixlr.express

こちらを使って加工しました。 まず、画像のコントラストや色味を調整。 f:id:tu4ba23sa:20181206220850j:plain

次にテキストを挿入します。 f:id:tu4ba23sa:20181206220916j:plain

完成したのがこちらです。 f:id:tu4ba23sa:20181206221015j:plain

はてなブログでの設定の仕方

画像ができたら、次は実際に自分のブログに設定します。 まず、ダッシュボードにいき、設定を選択します。 f:id:tu4ba23sa:20181206221708j:plain 次にボルトのマークからヘッダを選択。

f:id:tu4ba23sa:20181206221725j:plain ヘッダから、ファイルを選択。

f:id:tu4ba23sa:20181206221753j:plain 位置を調整して、画像だけを表示にしました。 最後に変更を保存を選択します。

これで、ヘッダーの変更はできました!

まとめ!

他にもオシャレにヘッダーを加工したり、デザイナーさんに頼むことができます。 ただ、無料で出来る限りカスタマイズしたかったのでチャレンジしてみました。

初心者さんのヘッダーのカスタマイズの参考になれば幸いです。