ずぼらご飯のブログの書

初心者による、初心者のための、ブログ運営収入化への記録の書

【ヘッダー画像変えたい!!】はてなブログのヘッダー画像(タイトル画像)のサイズ

 

はてなブログのヘッダー画像を変更したい!!

 

ヘッダー画像のサイズはいったいいくつなんでしょうか?

 

公式サイトによると、デフォルトで表示されるヘッダー画像のサイズは、高さが200px、横幅は最大1000pxだそうです。

 

公式では、ヘッダー画像ではなくタイトル画像という名前で呼ばれています。

ですが、ここではヘッダー画像と呼びますので注意してください。

 

 

 

はじめに

今の自分のブログ、ヘッダーがシンプルでつまんないので、……変えたい!

 

下に貼ってある私のブログ画像見て下さい!文字しかないのです。

何だか無味乾燥で、冷めた印象を覚えます。

 

カラフルな落書きでようやくかわいらしい感じ(笑)?

f:id:zuboragohan:20180812035707p:plain

どシンプル…………



 

よし、変えよう。

 

 

制作手順

Clip Studio高さ200px、横幅1000px画像を作成します。

ちなみに、Clip Studioは有料ソフト。(といってもそこまで高くありません。)

 

有料ソフトなんかやーだよって方は、GIMPっていうフリーソフトをおすすめ!

 ただ、解説しているサイトや本が少ないので、有料ソフトの方が優秀だとは思うよ。

 

ペンタブを買ったらClip Studioが付いてくるのもあるし、買い切りソフトだからこの際買っちゃってもいいとは思います。

 

Clip Studioもペンタブもどちらも便利なので!!

 

ちなみに、ペンタブがあるとこんな感じで描けますよ!

すごく楽しいです!!

落書きも文字もどっちもスイスイ書けちゃいます。

f:id:zuboragohan:20180812022234p:plain

ペンタブおすすめ!

フォントは、しろくまフォントをお借りしました。

ありがたい…………!そして、可愛い!!

こちら、しろくまフォントさんのURLです。

http://www.lazypolarbear.com/entry/font-shirokuma

 

フォントサイズは22pt。

これは、人によって違うと思うけれど、一応参考のために書いておきます。

 

で、暫らく描き描きして出来ました!

 

見て見て!!結構かわいくできたと思うの!!

褒めて欲しい…………!(笑)

f:id:zuboragohan:20180812012618j:plain

自分的には可愛く出来た!

今回作ってるヘッダーを使うのは、実は私のもう一つのブログなのです。

こっちのブログでは、お料理について書いてるので、節約とかお手軽とかそういう言葉に惹かれたら見てくれたら嬉しいな!

あと、読者になってくれてたら、さらに嬉しいな!!


zuboragohan.hateblo.jp

画像を挿入 

[設定]→[デザイン]→[ヘッダ]の順でクリック。

[タイトル画像]と書かれているページに辿り着きます。

 

↓↓この画面が出たら、正解です!!↓↓

f:id:zuboragohan:20180812021841p:plain

オリジナルデザイン画像を目指して!

 

私の場合は、ブログタイトルも込みで画像を作成したので、【画像だけ表示】をクリックします。

テキストを入れてない場合は、【画像をテキストを表示】をクリックしましょう。

 

 

画像サイズが合わない

あ、れれれれれ???

ズレてる…………。

公式の設定に合わしてるはずなのに…………!!!!!

f:id:zuboragohan:20180812022749p:plain

ズレてる…………。

 

仕方ないので、こいつを直しましょう。

白い部分ありすぎて、必要なブログタイトルすら消えています……!!

 

[設定]→[デザイン]→[デザインCSS]に行って下記のようなCSSを貼り付けます。

 

私と同じような感じの画像サイズ(高さ200px、横幅1000px)ならこのままコピペすれば、おそらくうまくいくと思います。


#blog-title{
width:1010px;
height:210px;
padding:0px;
margin:0px;
}

widthは、横幅の指定、heightは、高さの指定、paddingとmarginは空白の指定です。

10pxずつ横幅、高さが多いのは念のため余分を取っただけです。

ぴったり画像サイズに合わせても問題ないはずです。

 

f:id:zuboragohan:20180812031313p:plain

出来ました!

 

おまけで落書きしたイラストも結構可愛く出来た気がする!

 

もっと大きくしたい!

[設定]→[デザイン]→[デザインテーマ]でテーマを変更すると、さらに大きなヘッダー画像になりました。

公式テーマの中ではなく、以前取得した[インストールしたテーマ]のMinimalismというテーマを使用しています。

[テーマストアで探す]とMinimalismがありますよ。

 

完成イメージはこんな感じ。

zuboragohan.hateblo.jp

 

↓↓画像で見るとこんな感じのイメージだよ↓↓

f:id:zuboragohan:20180812111552p:plain

 


最後に私の設定を纏めて書いてみたよ! 

ヘッダー画像の設定

あくまで私の場合ですが、参考にしてください。

 

画像サイズ:高さ200px、横幅1000px

使用フォント:しろくまフォント

フォントサイズ:22pt

使用ソフト:Clip Studio

保存形式:JPEG

CSS

#blog-title{
width:1010px;
height:210px;
padding:0px;
margin:0px;
}

 

 

最後まで読んでくれてありがとう!

 

 

追記

もっと余白無しに出来るようになったよ!!

zuboragohannoblognosyo.hateblo.jp

 

プライバシーポリシー お問い合わせはこちら