Blogger レスポンシブデザイン - iPadでもガジェットを非表示に..

このサイトをモバイル表示で開いたとき、サイドバーのガジェットは表示されないように設定してある。記事の後ろにガジェットがダラダラ現れるのがイヤだからだ。それなのにiPadで見ると、ダラダラダラダラ...全てのガジェットが表示されとる。。う〜む、どうしたらいいんだろう...。

---

このブログは、レスポンシブデザインのテーマを使用している。

＊レスポンシブデザインとは・・・
responsive（レスポンシブ）は「反応がよい・敏感..」という意味。
現在はPC、スマホ、タブレットなど、様々なデバイスが利用されている。それら、どの画面サイズであっても、ウェブサイトが自動的に最適なサイズで表示されるデザインのことである。

私はスマホを持たないから、実際のところはよくわからないけど・・・、PCでモバイル表示を確認すると「ガジェット非表示」の設定はちゃんと反映されていて、PCでは表示される「サイドバーのガジェット（検索バー以外）」は出てこない。
ところが、タブレットでサイトを開くと（PCでブラウザの横幅を縮めたときも同様）、サイドバーのガジェットが全部出てくる。。こんなムダに長いサイト、私自身が見たくないんですけど...。

---

□PCでウェブサイトをモバイル表示にする方法□

Bloggerブログであれば、サイトURLの末尾に「/?m=1」を追加すればモバイル表示になる。が、Blogger以外のウェブサイトも、以下の方法でモバイル表示にすることができる。

【Chrome】

画面上部のサイトアドレスの表示されているところの右端の点三つ 「」から「その他のツール(L)」と進み、さらに「デベロッパーツール(D)」をクリックする。

【Safari】

（１）環境設定の「詳細」タブを開き、「メニューバーに"開発"メニューを表示」にチェックを入れる。

（２）メニューバー上の「開発」→「レスポンシブ・デザイン・モードにする」をクリックする。

---

□Blogger モバイルでガジェットを表示or非表示にする方法□

過去の記事「★モバイルでのガジェット表示を変更する」をご覧ください。
この方法では、タブレットには反映されないので、以下（↓）を行いました。

---

■iPad（タブレット）でも、ガジェットを表示させない方法

（１）テーマのバックアップを取る。（＊ここ重要）

（２）テーマ内から、モバイルでは非表示にしたい項目の「id」や「class」を確認する。

私の場合はサイドバーと、左右のフッターのガジェットなので、これ。↓
- - - - - - - -

◇サイドバー：「div id='sidebar'」

◇フッター：「div id='footer'」
         ・右：「div class='row30'」
         ・左：「div class='row33'」

（３）CSSに以下を追加する。

@media ( max-width : 768px ) {
 #sidebar {
        display: none;    /* サイドバーを表示しない */
        }
 #footer .row30{
        display: none;    /* フッター右を表示しない */
        }
 #footer .row33{
        display: none;    /* フッター左を表示しない */
        }
}

＊768pxというのは、iPad（9.7インチ）の横幅である。

これで、iPadでも、ガジェットは表示されなくなった。
スッキリした〜＼(^-^)／

---

PooPoo Kitty hates me. / stevelyon
本当はモバイル表示では、ハンバーガーメニューというのをサイト上部に設置して、そこに非表示にしてあるガジェットのタイトルだけを並べ、クリックで内容を開閉できるようにしたかった。だけど、ンなことは私には絶対できないってわかった。。でも、ハンバーガーメニューを置くだけでも苦労したので、そこには意味のない「記事一覧ページ」へのリンクを置いてお茶を濁した。くやしい..。(T ^ T)（←ガジェットもさして意味はないけど..）
台風接近中。時折突風が吹いてるけど、どうかオオゴトになりませんように。