スポンサーリンク

【Blogger】Vaster2でiPadの表示が見切れる・ヘッダーナビゲーションが表示されないときの対処法

スポンサーリンク

ずーっと気付いてはいたのですが、このブログ「ゴブゴブログ」をiPadでみると、右の方が見切れていました。

また設置しているはずのヘッダーナビゲーションも表示されていないんです。

windowsパソコン、Androidのスマホ、Nexus7ではきちんと表示されています。

アップルの陰謀か?

いやいや何か理由があるはず。

IQ240の私がウンウンHTMLのコードとにらめっこしたところ、これが正解なのかはわかりませんが、解決の糸口はみつかりました。

忘れないうちに備忘録として残しておきましょう。

注:こちらはBloggerを使っていたときの記事です。現在はwordpressを使用しています。

スポンサーリンク

iPadで表示しきれず見切れるときの対処法

現状はこんな感じ

使っているのは iPad Pro 10.5インチ MPF12J/Aです。

右のサイドバーが見切れています。

「ピンチイン」で縮小すれば表示されるのですが、それでは使い勝手が悪いので改善しましょう。

原因は?

こうなってしまう原因はiPadの中途半端な大きさのせいでしょう。

パソコンの画面と同じように表示しようとしているのに、表示しきれていないですね。

Vaster2はレスポンシブに対応しているので、いっそのことスマホと同じ表示方法にかえればいいんです。

解決方法

父ちゃんの日々ログさんを参考にしました。

まず私の記事 Bloggerで検索結果に記事タイトルが表示されるようにする方法 を参考にテーマのバックアップをとってください。

次に 「テーマ」から「HTMLの編集」に進みます。


赤枠にマウスポインタをあわせ、「Ctrl」+「F」で検索窓を開きます。

検索窓に「レスポンシブ」と入力して「Enter」をおします。

修正前はこんな感じです。

端末の画面の横幅が768px以下のとき、スマホ用の表示に切り替わります。

ここに横幅の大きいiPad用の設定を追記します。

/*   レスポンシブデザイン
————————————————— */
のすぐ下に以下のコードを挿入します。

@media only screen and (max-width:1024px)
{
.content-wrapper{
width:auto;
margin:0 auto;
}
#header-inner{
width:auto;
margin:0 auto;
}
.grobal-navi{width:auto;}
.main-outer{width:694px;}
.sidebar {width:330px;}
}

修正後はこんな感じになります。

赤枠が新しく挿入した部分です。

最後に「テーマを保存」をクリックします。

サイドバーは下に移動しました。

応急処置としてこんな感じでいいかなあ。

iPadでヘッダーナビゲーションが表示されないときの対処法

現状はこんな感じ

現状はこんな感じです。
ブログのタイトルのすぐ下にヘッダーナビゲーションを設置しているのですが、iPadでは表示されません。

ヘッダーナビゲーションには、サイトマップ・プライバシーポリシー・運営者情報・問い合わせなど大事なものが詰まっています。

これが表示されないと、怖い大人たちに何をされるかわかりません。

急いで修正しましょう!

解決方法

全然わかりませんでしたw
すぐ近くにアドセンスの広告を貼っているので、これが悪さをしているのかと思ったのですが違うようです。
広告を剥がすわけにもいきませんしね。

このままでは怖い大人たちに・・・

しかし腐ってもIQ240の私、スマホとパソコンの画面を見比べると違いが!

スマホはヘッダーナビゲーションのところに「メニューを開く」と表示されています。

これや!

さっそく 「テーマ」 → 「HTML編集」といって、検索窓を開き「メニューを開く」と入力し「Enter」を押します。

どこかでみたような数字が

端末の画面の幅が768px以下のとき「メニューを開く」ボタンが出てくるようです。

ならばこの数字を大きくすればiPadにも対応するのでは?

赤枠のところをとりあえず1024に変えてみます。

どれくらいが適正なのかはわかりません。

結果・・・

きた~

やったね!

なんぼのもんじゃい!!

これで怖い大人たちからも・・・

まとめ

原理・仕組みはよくわかっていませんが、望んでいた結果になったので良しとしましょう。

どうも カンジ(@gobugobukanji)でした。

Bloggerでおこなったカスタマイズをまとめました。合わせて読んでね。

アプリ系アフィリエイトでおすすめのASPはこのふたつ

私が使っている独自ドメインはお名前.com



私が使っているレンタルサーバーはエックスサーバー



どうも カンジ(@gobugobukanji)でした。

コメント

タイトルとURLをコピーしました