だがそれがいい

読者です 読者をやめる 読者になる 読者になる

だがそれがいい

気になったことを気ままに書いていきます。

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

スポンサーリンク

f:id:dagasoregae:20160404174712j:plain


先日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