ゆるふわSEの日常♪

IT業界でゆるふわSEになりたい人あーつまれ(*´▽`*)♪

さくっと設定完了?!ブログのヘッダ画像を変更する方法を大公開♪~ヘッダ画像を変更してブログをより魅力的にカスタマイズしちゃおう☆彡~

おはこんばんちは!!!

ゆるふわSEの「ゆるちょここ」です♪

 

皆さんは、ブログのヘッダ画像とかってカスタマイズしてたりしますか???

私は、つい最近大好きなイラストレーターさん(餅村そらたさんこと、おもちさん♪)にお絵かきしてもらったイラストをヘッダ画像として設定して、ブログを開いてそのゆるふわで可愛いイラストを見るたびに、ほわほわとした幸せを感じる毎日を送っておりますw

www.yurufuwase.com

ということで、今回はブログのヘッダ画像(PCで見る際の画面)を変更した際の手順を備忘としてまとめてみましたので、これからやってみよぉかなぁっておもっている方は参考にしてくれてもいーんだからね(`・ω・´)!(謎のつんでれw)

初めてのかた(超初心者)でも簡単に設定できるように、実績のあるキャプチャつきで解説してくので安心してごらんくだされ♪

※留意事項!

実際の設定は、ちょっぴりだけつまづきましたw

今回はせっかくなので、そんなちょっとしたつまづきとそれに対する対処、うまくいくまでの試行錯誤も合わせてエンターテインメント的に記載してみますので、実際に設定するときは、一通り見た後にうまくいってる方法のとこだけを参考にしてね!

あと、設定してるブログテーマによって、ヘッダのハマり具合は違うと思いますので、あくまで参考程度にご覧ください☆彡

f:id:senonichijo:20200502145203j:plain

 

 

 

【まずはヘッダ用の画像を準備しましょー♪】

ヘッダ画像を変更するんだから、画像がないと物語は何も始まりませんw

なので、写真でもイラストでもなんでもいーので、設定したい画像を準備しましょー☆彡

その際に気を付けることは、画像の大きさ!!!

どーも、ぐーぐる先生で調べてみると推奨されるサイズがあるらしく、

それは「横幅1000px×縦幅200px」なんだそーです♪(結構横長ですw)

なので、画像を準備する際はこの縦横比に注意しましょー(*^^*)

私が準備した画像はみんなご存知のこちら(/・ω・)/☆彡

↓おもちさん特製のイラストで可愛いのなんの。なんのなんの!w

f:id:senonichijo:20200502150356p:plain

 

【PCのヘッダ画像の変更方法♪】

では、画像を準備したところでさっそく設定していくよ(`・ω・´)!

①まずはブログヘッダ部分の「設定」をクリックしまーす♪ 

f:id:senonichijo:20200502150714p:plain

 

②そんでサイドバーの[レンチ]アイコンをクリックして、[ファイルを選択]から画像をアップロードして、表示設定は[画像だけ表示]にチェックしまーす♪

そうすると、横に実際設定されたときのよぅなプレビュー画面が出てきまーす☆彡

※[画像とテキストを表示]にチェックすると、「ブログのタイトル」と「サブタイトル」が画像に乗っかります。

うまくはまればいーかもですが、今回はタイトルをイラストに含めてもらったので、画像だけ表示されればおっけー牧場♪

っておもって設定したのですが・・・(´・ω・`)

f:id:senonichijo:20200502151957p:plain

ん・・・(´・ω・`)

設定されてるっちゃされてるものの・・・(´・ω・`)

なんか横幅とかそろってないし、縦幅も空白が多くてちょっとなんかサイズ感がいけてないなー・・・(´・ω・`)

って思い、、、

 

③試しに、[画像とテキストを表示]にチェックを入れてみるとぉ、、、

f:id:senonichijo:20200502152403p:plain

おぉ!!!

サイズ感はなぜかむっちゃいー感じになったで!(>_<)w

だけど、やはりタイトルとサブタイトルの文字がかぶって邪魔だ・・・(T_T)

うーん。。。(´・ω・`)

さすがにタイトルとサブタイトルを消すと、検索できなくなっちゃうからそれはちょっとなぁ。。。(´・ω・`)

うーん。。。(´・ω・`)

よし、ぐぐる(`・ω・´)!!!

※その間およそ1分w

お!

minihoto.hatenablog.com

さすがはてなの民!!!w

同じ悩みを抱く先人様がそのノウハウを公開してくれていたので、余すことなく利用させてもらうことにしましょー(´_ゝ`)w

ふむふむ・・・(´・ω・`)

なるへそ!

CSSに下記コードを追加すりゃいけんのね♪

さっすがぁ♪

確かにコード見てみると、、、

たいとるが、びじぶりーひでゅんだし、

ぶろぐでぃすくりぷしょんが、びじぶりーひでゅんだから、CSSあんま詳しくないけど雰囲気タイトルとサブタイトルを消せそうな気はするw(適当w)

/* ----- 「タイトル」と「ブログの説明」を隠す ----- */
#title a {
visibility: hidden;
}
#blog-description {
visibility: hidden;
}

 

④で、左側のサイドバーの下部にある「デザインCSS」をクリックして、当該コードをコードの最下部に、こぴー&ぺーーすとぉぉぉぉぉぉ(/・ω・)/☆彡

f:id:senonichijo:20200502153711p:plain

 

⑤するとぉ、、、、、

f:id:senonichijo:20200502153928p:plain

おぉ・・・(´_ゝ`)

うまくいったw

※後は変更を保存するだけね!

※手順の番号を連番でつけてみたけどあんま意味なくてすみません(´・ω・`)w

うれぴぎゃーーーーー!!!w

やった!!!

やりましたよ!!!!!

おもちさん!!!!!!!(*^^*)(謎の報告w)

という感じで、艱難辛苦がありましたが、なんとかブログヘッダの画像をいー感じに配置するという強敵との戦いに勝利したのでーした♪

 

これから設定しよぉと思っている方、設定しよぉと思ってるけどつまづいちゃった方は参考にしていただくとむちゃ嬉しい限りでございます!

 

でゎでゎ☆彡