わいのりLABO

わいのりLABO

☆漫画・アニメ・ゲームなどについてつぶやきます☆

わいのりLABO

【第9回】ブログ作成記録(続続・ヘッダ画像編)

f:id:wainori2199:20180405085257j:plain

 

こんにちわ。わいのり研究所です。

 

昨日から苦戦してました「ヘッダのタイトル画像が大きくなっちゃた事件」ですが、先ほどようやく解決できましたぁ~!(拍手)

 

ブログのタイトル画像を見てください。

余白を調整することで、昨日より高さを抑えることができました。

 

タイトル画像をクリックすると私のサブブログに飛んでしまう事象が発生していましたが、現在は解消しています。

私の記述ミスでした。大変失礼しました。

 

 

余白なし!幅は自動調整!

では見比べてみましょう。

左が昨日(余白あり)、右が今日(余白なし)です。

 

PCで見た場合

見比べると結構違いますね。

 

f:id:wainori2199:20180411233719p:plain
f:id:wainori2199:20180412092848p:plain

 

スマホで見た場合

スマホ表示ではもう少し余白があっても良さそうですね。

 

画像の幅はスマホ表示でも自動調整です♪

 

スマホ表示でも自動調整できるのは、私のブログテーマがレスポンシブ対応だからだと思います。違ったらすいません・・・

 

f:id:wainori2199:20180411225309p:plain
f:id:wainori2199:20180412092845p:plain

 

サイト様紹介

今回教えていただいたサイト様はこちらです。

ありがとうございました!

tukinasikotonoha.hatenablog.com

 

ここが神わざ!

1.ヘッダ画像の余白をなしに!

2.画像の幅は自動調整!

 

こちらのサイト様の方法で一瞬で解決しました!

昨日かなり苦戦していたので、できた瞬間ガッツポーズでした♪(*´▽`*)

 

昨日は別の方法で自動調整していましたが、余白は調整できませんでした。

しかしこのサイト様の方法は、自動調整だし、かつ余白をなしにできるという、まさに「神わざ」です!

 

私が探し求めていたものでした。

ありがとうございました!

 

デザインCSSじゃなくて・・・

最初は、画像が表示されなかったので諦めかけていました。

 

すると、なんということでしょう!

 

サイト様の説明をよく読んだら「ヘッダのタイトル下」に貼ると書いてあるではありませんか!(/ω\)

 

私はこのコマンドも、てっきりデザインCSSに貼るのだと思っていました。

思い込みってこわいですね・・・(汗)

 

そして、ちゃんとタイトル下に貼ると、無事表示されました♪

めでたし、めでたし。

 

f:id:wainori2199:20180412104932p:plain

 

最後に

試行錯誤した末に解決できると達成感と充実感がありますね。

 

最初は意味が分からないコマンドも、壁にぶつかっていろいろ調べることで、徐々に

理解できるようになるので楽しいです♪

 

ちょっとCSSとHTMLの本を買って勉強してみたいです。

 

今回もお付き合いいただきまして、ありがとうございました。