ずーっと気付いてはいたのですが、このブログ「ゴブゴブログ」をiPadでみると、右の方が見切れていました。
また設置しているはずのヘッダーナビゲーションも表示されていないんです。
windowsパソコン、Androidのスマホ、Nexus7ではきちんと表示されています。
アップルの陰謀か？
いやいや何か理由があるはず。
IQ２４０の私がウンウンHTMLのコードとにらめっこしたところ、これが正解なのかはわかりませんが、解決の糸口はみつかりました。
忘れないうちに備忘録として残しておきましょう。
注：こちらはBloggerを使っていたときの記事です。現在はwordpressを使用しています。
iPadで表示しきれず見切れるときの対処法
現状はこんな感じ
使っているのは iPad Pro 10.5インチ MPF12J/Aです。
右のサイドバーが見切れています。
「ピンチイン」で縮小すれば表示されるのですが、それでは使い勝手が悪いので改善しましょう。
原因は？
こうなってしまう原因はiPadの中途半端な大きさのせいでしょう。
パソコンの画面と同じように表示しようとしているのに、表示しきれていないですね。
Vaster2はレスポンシブに対応しているので、いっそのことスマホと同じ表示方法にかえればいいんです。
解決方法
父ちゃんの日々ログさんを参考にしました。
まず私の記事 Bloggerで検索結果に記事タイトルが表示されるようにする方法 を参考にテーマのバックアップをとってください。
次に 「テーマ」から「HTMLの編集」に進みます。
赤枠にマウスポインタをあわせ、「Ctrl」+「F」で検索窓を開きます。
検索窓に「レスポンシブ」と入力して「Enter」をおします。
修正前はこんな感じです。
端末の画面の横幅が７６８ｐｘ以下のとき、スマホ用の表示に切り替わります。
ここに横幅の大きい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でヘッダーナビゲーションが表示されないときの対処法
現状はこんな感じ
ヘッダーナビゲーションには、サイトマップ・プライバシーポリシー・運営者情報・問い合わせなど大事なものが詰まっています。
これが表示されないと、怖い大人たちに何をされるかわかりません。
急いで修正しましょう！
解決方法
このままでは怖い大人たちに・・・
スマホはヘッダーナビゲーションのところに「メニューを開く」と表示されています。
さっそく 「テーマ」 → 「ＨＴＭＬ編集」といって、検索窓を開き「メニューを開く」と入力し「Enter」を押します。
どこかでみたような数字が
端末の画面の幅が７６８ｐｘ以下のとき「メニューを開く」ボタンが出てくるようです。
ならばこの数字を大きくすればiPadにも対応するのでは？
赤枠のところをとりあえず１０２４に変えてみます。
どれくらいが適正なのかはわかりません。
結果・・・
きた～
やったね！
なんぼのもんじゃい！！
これで怖い大人たちからも・・・
まとめ
原理・仕組みはよくわかっていませんが、望んでいた結果になったので良しとしましょう。
どうも カンジ(@gobugobukanji)でした。
Bloggerでおこなったカスタマイズをまとめました。合わせて読んでね。
どうも カンジ(@gobugobukanji)でした。
コメント