ちゅみみの虹色の太陽

鳥は前にしかすすまない!人生は前進あるのみ

【簡単】コピペでOK!はてなブログのヘッダに画像をいれる作業と高さ調節(Picky-Pics編)

f:id:chu-mimi:20210714215523p:plain

 

ブログのヘッダでブログの印象が決まりますよね。

 

今日は画像をはてなブログのヘッダにいれる作業の方法です!

 

 画像を用意していない方は先に画像準備からおこなってくださいね。

 

 前回はPicky-picsで画像を作成してみました。

chu-mimi.com

 

 

今回はこれをヘッダー部分にいれてみましょう。

f:id:motherteresax:20210714163116p:plain



 

 

はてなブログのヘッダーにPicky-picsで画像を入れる方法

 

▼ダッシュボードの【デザイン】をクリック

f:id:chu-mimi:20210712210419p:plain

 

 

カスタマイズ(スパナ型アイコン)をクリックし、ヘッダをクリックすると

ファイルを選択】の画面になります。

f:id:chu-mimi:20210712211052p:plain

 

 

ファイルを選択して画像を選んでください。画像がアップロードされます。

白い部分が画面に反映されるところです。

もし画像が白い部分よりはみ出て、下の様に黒い部分に重なってしまっても、後ほどヘッダの高さ編集できますので、とりあえずこのまま【適用】を押します。

f:id:motherteresax:20210714164154p:plain

 

※はてなブログのヘッダサイズは【 幅1000px 高さ200px

Picky-picsで制作するブログ用のヘッダはFacebookカバーサイズ【幅851px 高さ315px

 あらかじめ小さめに作成している場合は問題ないのですが、はみ出てしまっても後から高さ調整できるので大丈夫です。

 

▼表示設定は画像のみに設定。画像が表示されます。

f:id:chu-mimi:20210714171338p:plain

 

▼作業が終了したら必ず 【変更を保存する】ボタンをクリック!!!

f:id:chu-mimi:20210714172840p:plain

 

 

ヘッダ画像の見た目がこのままでいい方は、設定はここまでで終了です。

 

もし高さに編集が必要な方はこのままお読みください。

 

 次にヘッダ画像の高さを調節し、画像全体を反映させる設定を行います。

コードを【デザインCSS】に貼り付けるだけの簡単作業です。

 

▼設定後はこのように反映されます。

f:id:chu-mimi:20210714174338p:plain

 

ヘッドの高さ調節し画像全体を表示する方法

 ▼【デザイン】→【カスタマイズ(スパナ型のアイコン)】→【デザインCSS】をクリックし下記CSSコードをはりつけます。 

 

f:id:chu-mimi:20210714175631p:plain

 

 コードはデザインCSSの一番下に貼り付けてください。

 

※初めから入っているコードはデザイン設定に必要なコードである為、消さないように注意が必要です。

 

あらかじめバックアップを取っていると安心ね

 

f:id:chu-mimi:20210714175727p:plain

CSSのコードを貼りつける

/* タイトルイメージ調整 */
#blog-title {
    padding-top: 5px; /* 画像上部の余白*/
    padding-bottom: 5px; /* 画像下部の余白*/
    height: initial;
}
.header-image-only #blog-title #blog-title-inner {
    height: 250px; /* 画像の高さ */
    background-size: contain;
}
@media (max-width: 480px) {
.header-image-only #blog-title #blog-title-inner {
    height: 150px; /* 画像の高さ */
}
}

 

するとこんな感じに出来上がります。

f:id:chu-mimi:20210714174338p:plain

 

 

どうかしら?できたかしら?

 

 一度設定してしまえば、簡単に覚えられるので、お試しください!