ブログ友達から「IE11でヘッダー画像がフルサイズになってるよ」と教えてもらい、

IE(インターネットエクスプローラー)に切り替えて、このブログを見てみたら…

 

 

 

 

 

 

 

 

 

 

 

 

 

まじだった件。

(チョコレートの画像が見切れててショック…)

 

ChromeとEdgeでしか確認してませんでした(´;ω;`)ウゥゥ

IEユーザーさんに不親切なブログになってしまってて、申し訳ありませんでした。

 

どうやら、メイン画像は自動で縮小してくれるけど、ロゴ画像は対応してないようです。

base.cssを修正して、IEから見ても綺麗なブログを作りましょう(*´ω`*)

 

 

 

 

 

 

 

 

 

 

 

 

ヘッダーと書かれた部分を探します。

 


.site-header-conts{
display: table;
width: 100%;
padding: 30px 0;
}

/*ヘッダーロゴ*/
/*
.home .site-title{
display: table-cell;
width: 240px !important;
height: 40px;
margin: 0;
padding: 0 10px 0 0;
vertical-align: middle;
}
*/

 

↑ 上のソースを…

↓ 下に変更します。

 


.site-header-conts{
display: table;
width: 100%;
padding: 30px 0;
table-layout:fixed;
}
 
/*ヘッダーロゴ*/
/*
.home .site-title{
width: 240px !important;
height: 40px;
margin: 0;
padding: 0 10px 0 0;
vertical-align: middle;
}
*/

 

つまり…(*´ω`*)

 

table-layout:fixed;

を追加して、

display: table-cell;

を削除します。

 

最後に、ページの一番下にある「ファイルを更新」を押すと、IEでも綺麗に見えます。