Macky1991’s blog

ブログを始めて3週間、アドセンスが合格しました!今後ともよろしくお願いいたしますm(__)m

ヘッダに背景画像を加える【第9次ブログ改造計画】

f:id:Macky1991:20190816205919p:plain

どうもこんばんわ。

 

昨日は知らない間に初めてある成果を得ることができました。

 

 

私のブログから初めての収益が発生してました。

初めてなので当然大きい額ではないですが

私にとっては価値ある収益と思いますし、

今後も続けて頑張れる活力をいただけました。

 

このブログをより良い見た目にしていくためにも

昨日に引き続き今日もブログのカスタマイズをします。

 

ヘッダに背景画像を追加

 

f:id:Macky1991:20190811223031p:plain

 

以前よりブログのトップページを見るたびに物足りなく感じてました。

その一つにブログタイトルのヘッダの背景がシンプルすぎて

とても地味すぎる印象を与えられて見栄えもあまりよくありません。

ヘッダの背景に画像を加えていきますが今までのように

ZENO-TEALのデモサイトを参考にしてみます。

 

ZENO-TEALのデモサイトを参考にするも…

 

zeno-teal.hatenablog.com

 

 今回はこちらの記事を参考にヘッダの背景画像を取り組んでいきますが

一つ問題が発生しました。

コードをコピペしてはてなフォトライフにアップロードした背景画像のURLを所定の位置に入力してみたのですが

なぜかヘッダの背景に画像が反映されませんでした。

 

原因を追求していくたびに時間がただ過ぎていくだけなので

ここは一旦引いて別の手段でヘッダの背景に画像を加えます。 

 

シンプルに画像をアップロード

 

f:id:Macky1991:20190816205245p:plain

 

大人しく一番最もシンプルな方法でヘッダの背景に画像を加えていきます。

「ダッシュボード」の「デザイン」にある「カスタマイズ」の「ヘッダ」をクリックしたら

「タイトル画像」にある「画像のアップロード」の「ファイル選択」をクリックして

フォルダに保存してあるヘッダの背景にしたい画像を「選択」します。

「位置の調整」を終えたら「表示設定」の「画像とテキストを表示」にチェックが入ってることを確認して

「変更を保存する」をクリックして作業完了です。

 

f:id:Macky1991:20190816205904p:plain


いい感じに画像がヘッダの背景に設定されました。

しばらくこの方法で設定したままにします。

何かまた変更を加えるときは別の記事を参考にします。

 

オススメ記事の画像サイズを揃える

 

f:id:Macky1991:20190816205904p:plain

 

ブログのヘッダ下にあるオススメ記事の画像が不揃いであるために

テキストもそれにつられて不揃いになってしまうがとても気がかりでした。

 

zeno-teal.hatenablog.com

 

ZENO-TEALのデモサイトにある記事を参考に修正してみます。 

 

f:id:Macky1991:20190816205255p:plain

 

「ダッシュボード」の「デザイン」にある「カスタマイズ」の「ヘッダ」をクリックしたら

 「タイトル下」のボックス内に記事にあるコードをコピペして

オススメ記事のタイトルやURLなどを書き換えて「変更を保存する」をクリックして作業完了です。

 

f:id:Macky1991:20190816205912p:plain

 

オススメ記事の画像サイズが揃った上に

画像の下部にタイトルが半透明の背景付きで揃えられて

見栄えがよくなりました。

 

先日のGoogle Adsenseの初収益は日々ブログをカスタマイズし続けることによって

得られたはじめての成果だと思います。

今後も引き続きブログで気になった箇所があれば進んでカスタマイズと修正をしていきます。

 

ここまでお読みいただきありがとうございます。

次回の記事をお楽しみに。