勝手に他人のブログデザインの問題解決方法を考察してみる

広告

先日twitterのタイムラインを眺めていたらこんなのを見かけました。

有名ブロガーのヒトデさんのツイートです。
www.hitode-festival.com

 

で、実際に見てみると。
f:id:dagasoregae:20160404175715j:plain

 

おお、ほんとだ!ずれてる。

スポンサーリンク

グローバルメニューは同じデザイン

当ブログにもグローバルメニューがついていますが、大元は同じデザインを使用しています。

 

なぜならわたしはヒトデさんのブログのカスタマイズ記事をみてグローバルメニューを取り入れたから。

 

そして、その元となっているのがゆきひーさんのこちらのカスタマイズ記事。

www.yukihy.com

ということはわたしのブログもsafariで見るとずれているのか!?これはまずい!!

 

と思ってsafariで開いてみると

f:id:dagasoregae:20160404180911j:plain

あれ?ずれてない。

 

ということはー

はみ出てる?

上にGoogle chrome下にsafariを置いてナビゲーションのサイドを合わせてみると

f:id:dagasoregae:20160404181323j:plain

 

下段のsafariの方が文字が若干大きいですね。

なるほどそれで、納まらずにずれてしまったのか!!

手取り早く治す方法

文字が大きいせいでずれたなら文字を小さくしたら治るはず

 

ということでCSSの

/*****グローバルメニュー****/
#menu{
width: 100%;
margin: 10px auto;
background: #F5F0EC;/*7*/
}
#menu-inner{
width: 1000px;/*1*/
height: 50px;/*2*/
margin: 0 auto;
background: #F5F0EC;/*8*/
}
#menu-btn{display: none;}
#menu-content{
padding-left: 0;
margin: 0;
width: 100%;
height: 100%;
list-style-type: none;
}
#menu-content > li{
position: relative;
float: left;
height: 100%;
text-align: center;
}
#menu-content > li > a{
position: relative;
display: block;
height: 100%;
padding-left: 15px;/*3*/
padding-right: 15px;/*3*/
line-height: 50px;/*2*/
background: #F6F1ED;/*9*/
color: #554200;/*10*/
font-size: 80%;
z-index: 2;
text-decoration: none;
}
#menu-content > li > a:hover{
background: #555;/*11*/
color: #fff;/*12*/
}

この中の

font-size:80%;のパーセンテージを下げてあげれば収まるじゃないかな。

#menu-content > li > a{
position: relative;
display: block;
height: 100%;
padding-left: 15px;/*3*/
padding-right: 15px;/*3*/
line-height: 50px;/*2*/
background: #F6F1ED;/*9*/
color: #554200;/*10*/
font-size: 80%;
z-index: 2;
text-decoration: none;
}

なおらなかったらゴメンなさい・・・・。

おわりに

ブラウザによって表示がずれることはよくありますが、ブログデザインについてはそこまで気にしていませんでした。

これを気に当ブログも他のブラウザで開いておかしいところはないか調べてみようと思います。

気づきをありがとうございました。

 

自分がつくったHPだろうが、他の人がつくったHPだろうが、ブラウザ上でCSSをいじって表示の確認ができるLive CSS EditerというGoogle Chromeのプラグインは便利なのでオススメです。

f:id:dagasoregae:20160404182710j:plain

 

chrome.google.com

 

なおらなかったら本当にゴメンなさいw

スポンサーリンク