ずぼらご飯のブログの書

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

【はてなブログ】〝余白いっぱい〟にヘッダー(タイトル)画像を美しく設定する方法

今のヘッダー画像よりもっともっと大きく!

余白を無くして、ヘッダー(タイトル)画像を設置してみたい!!

 

そんな野望を抱えている皆様、解決策です。

 

以下、設定方法ですので是非見てって下さい!

 

 

公式(デフォルト状態)で画像を変更したい方

公式(デフォルト状態)の横幅1000px,高さ200pxの幅で設定したい方は、こちらを参考にしてください。 

zuboragohannoblognosyo.hateblo.jp

 

余白なしでヘッダー画像を設定したい方

画像サイズは、横幅1500px,高さ370pxです。

使用ソフトは、Clip Studio。

有料ソフトを使用しない場合は、GIMPというフリーソフトを使うことをおすすめします。

 

ですが、Clip Studioもそこまで高いモノではなく、ペンタブ(こちらもそこまで高くない)と一緒に購入するとソフトが付いてくるものがあります。

有料ソフトの方が、解説サイトが多いので買うことをおすすめします。

 

使用フォントは、しろくまフォント

フリーフォント しろくま を公開しました(漢字追加2018.5.15) - シロクマは冬眠したい

しろくまフォントさんありがとうございます!

 

フォントサイズは、33px

こちらは、人によると思いますが、参考にしてください。

 

作った画像はこれ!

保存形式は、JPEGです。

赤いトマトがポイント!

我ながら可愛く出来た気がする!

f:id:zuboragohan:20180812124735j:plain

かわいい!

 

ヘッダー画像を美しく設定する方法

[設定]→[デザイン]→[ヘッダ]→[タイトル画像]で変更できます。

 

f:id:zuboragohan:20180812125516p:plain

見切れちゃう!!

 

せっかく作った画像が見切れちゃう!

上手にうまく入らない…………。

 

そんな時は、[設定]→[デザイン]→[{}デザインCSS]でCSSを書いて変更しましょう。

 

こちらを参考にさせて頂きました。

大変助かりました。ありがとうございます………!

【これで解決!】スマホ表示をするとタイトル画像の左右が切れる問題【はてなブログ】 | ゆずもちろぐ。

 

↓↓こんな感じになります。↓↓端から端まで綺麗に出来ます!!

f:id:zuboragohan:20180812212751p:plain

出来た!

デザインCSS

/* レスポンシブヘッダー調整  */
@media (max-width: 1500px){#blog-title-inner,#title a{
height:370px!important;
width:auto;
}
#blog-title-inner {background-size: contain!important; }
}

/* タイトル画像上下の余白を調整 */
#blog-title {
margin: 0px auto 0px auto;
padding: 0px;
}
}

 

最後に今までの設定を分かりやすいように纏めておきました。

参考にしてみてくださいね!

 

ヘッダー画像の設定


画像サイズ:高さ370px、横幅1500px
使用フォント:しろくまフォント
フォントサイズ:33pt
使用ソフト:Clip Studio
保存形式:JPEG
CSS

/* レスポンシブヘッダー調整  */
@media (max-width: 1500px){#blog-title-inner,#title a{
height:370px!important;
width:auto;
}
#blog-title-inner {background-size: contain!important; }
}
/* タイトル画像上下の余白を調整 */
#blog-title {
margin: 0px auto 0px auto;
padding: 0px;
}
}

 

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

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