はてなブログでレスポンシブデザインを適用したらとんでもないことが起きるんだが...

【スポンサーリンク】

どーも。こん(kon)です。

僕のブログではレスポンシブデザインを適用しているのですが、とあることでこの2週間悩まされ続けています。

1日3時間とかこれで潰されることもざらです笑。これだけやったのにもかかわらず解決できないのだから僕の頭の悪さに改めて気付かされます...。

誰かホントに助けて...。

レスポンシブデザインとは

f:id:kon4:20170530231409j:plain

そもそもレスポンシブデザインってなんだよっという方もいらっしゃると思うので簡単に説明します。

レスポンシブデザインというのはパソコンでの表示とスマホでの表示を同じデザインで表示しますよというデザインのことです。

このレスポンシブデザインの良いところはいちいちパソコン版のデザインとスマホ版のデザインを別々に作る必要がないということです。別々に作るとその分時間もかかりますし、何よりも面倒くさい笑

ブログ初心者にありがちな初期挫折を防いでくれる便利なものだと思ってます。(僕がレスポンシブデザインを適用した理由もこの初期挫折を防ぐためです笑)

これからブログを始めようと思ってるよっという方は是非このレスポンシブデザインをオススメします!

このブログの問題点

さて、ここからが本題です。みなさん、このブログのデザインを見て何か気づきませんか?あ、パソコンで見ている方はわかんないです...。

よく見ていただくとわかると思うのですが。(よく見なくても一目瞭然です笑。)

f:id:kon4:20170530215118j:plain

...。

...。...。...。

なんか隙間空いとるやんけ笑!!

そうなんですよ!

現在このブログでは、ヘッダー画像とグローバルメニューの間に謎の隙間が空いています笑。

しかも問題はこれだけでは収まりません。グローバルメニューに注目してみましょう。

なんか下に長いやんけ笑!!

なんだこれって感じですよね。自分でもブッサイクなブログだなと思います笑

改善しようにも...

ブログのデザインって記事よりも大切だと思います。他の方のブログを見させていただくときに 一番に目に入ってくるのって記事よりもデザインじゃないですか。

デザインが良いとそれだけで、ああこのブログはいい記事が書いてあるんだろうなと思ってしまいます。

つまりデザインが悪いとその分だけ損をしているということになるんですよね。

だから当然僕もデザインを改善しようとしました。それはもう1日に何時間もかけてね。

とりあえずグローバルメニューに問題があるだろうと思って一通りいじってみました。しかし結果は一層やばいデザインに変わっていくだけ笑。

ちなみに今のグローバルメニューのCSSコードはこんな感じです。

/*グローバル*/
#nav-menu{
list-style-type: none;
height: 44px;
width: 100%;
margin: 0 auto;
padding: 0;
background: #47a89c;
}
#nav-menu li{
position: relative;
width: 20%;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
#nav-menu li a{
display: block;
margin: 0;
padding: 14px 0;
color: #fff;
font-size: 14px;
font-weight: bold;
line-height: 1;
text-decoration: none;

}
#nav-menu li:hover > a{
background: #95C7A4;
color: #fff;
height: 16px;
}
#nav-menu li ul{
list-style: none;
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
z-index: 9999;
}

#nav-menu li ul li{
overflow: hidden;
width: 100%;
height: 0;
color: #fff;
-moz-transition: .2s;
-webkit-transition: .2s;
-o-transition: .2s;
-ms-transition: .2s;
transition: .2s;
}
#nav-menu li ul li a{
padding: 13px 15px;
background: #47a89c;
text-align: left;
font-size: 12px;
font-weight: normal;
}
#nav-menu li:hover ul li{
overflow: visible;
height: 38px;
background: #95C7A4;
}

@media (max-width: 760px) {
.nav-menu-hidden-phone {
display: none !important;
}
#nav-menu {
height: 60px;
}
#nav-menu li{
width: 25%;
}
#nav-menu li a{
padding: 14px 0;
}
#nav-menu li:hover > a{
background: #95C7A4;
color: #fff;
height: 32px;
}
#nav-menu li:last-child ul{
left: -100%;
width: 100%;
}
#nav-menu li ul li{
overflow: hidden;
width: 200%;
height: 0;
}
}

@media (min-width: 761px) and (max-width: 1025px) {
.nav-menu-hidden-tablet {
display: none !important;
}
}

@media (min-width: 1026px) {
.nav-menu-hidden-desktop {
display: none !important;
}
}

みなさんの力を貸してください!

ここが今回一番言いたかったところです。ここまでくるとみなさんお察しでしょう。行きますよー、、、

誰か助けてください!!!

ブログで質問会開くとかブログの使い方ホント間違ってると思いますけど、それくらい困ってます。

あ、前にもブログで質問したことあったわ。

kon4.hatenablog.com

さりげなくリンク貼っていくっていうね笑

いや、もうね。正直調べ疲れました。どれくらい疲れたのかというとフルマラソン3回連続走ってその直後にカラオケに行くぐらい疲れました。

ちなみにフルマラソンは42.195キロなのでそれを3回走ると126.585キロになります。

...。

面白くもなんともないしそんなことどうでもええわって声がすごい聞こえてきますねぇ〜。でもね。こういうこと書きたくなっちゃうのよ笑

ということでホントに困ってます!原因がわかるよって方がいらっしゃいましたら教えていただけると飛び跳ねて喜びます!どれくらい飛び跳ねるのかというとコイキングのはねるよりももっとたか...

うん。もういいか笑

是非、是非こん(kon)にお力を貸してください!ホントお願いします!コメントの方にてお待ちしてます!!

コメントだとあれだからという方はメールでもお待ちしております!!