「Blogger」スマホ表示の時だけ特定のガジェットを隠したい【T】

「Blogger」はパソコンとスマートフォンの両方で閲覧できる便利なサービスですが、画面サイズの小さなモバイル端末では一部のガジェットが邪魔に感じられることはありませんか？

パソコンでは役立つサイドバーの機能も、スマホでは記事の下に長く伸びてしまい、読者が目的のコンテンツにたどり着くのを妨げてしまうことがあるため、表示の最適化は運営の助けになるでしょう。

デバイスごとに表示する情報を取捨選択することで、読者のストレスを軽減し、ブログ全体の読みやすさがこれまで以上に向上するかもしれません。

閲覧環境に合わせたガジェットの最適化

画面の大きなパソコンでは有益な情報源となるガジェットも、スマートフォンの縦長画面ではスクロールの手間を増やす要因になる場合があります。

特に広告や重い画像を含むガジェットをモバイル環境でのみ非表示に設定することで、ページの読み込み速度を改善しつつ、読者がメインの文章に集中できるレイアウトを実現できます。

以下の手順で特定のガジェットを特定する準備を行います。

注意点として、ガジェットのIDを間違えて指定してしまうと、意図しない別の要素が消えてしまったり、デザインが崩れてしまったりする恐れがあるため、事前にメモを取るなどして正確に把握しておくことが重要です。

「Blogger」のテーマ編集機能からCSSを追記することで、画面サイズが一定以下になった時だけ特定のガジェットを隠す命令を与えることができます。

この方法はテンプレートを直接書き換えることなく設定できるため、初心者の方でもコードのコピー＆ペーストで比較的安全にデザインの調整を行うことが可能です。

具体的なコードの適用手順は次の通りです。

アドバイスとして、メディアクエリと呼ばれる記述を用いることで、「画面の横幅が何ピクセル以下の時に隠す」という条件を細かく設定できるため、自分のブログを実際にスマホで確認しながら最適な数値を調整していくことが推奨されます。

スマホ表示をスッキリと整理することは、単に見栄えを整えるだけでなく、読者の離脱を防ぎブログ内の回遊率を高めるという大きなメリットをもたらします。

不要な情報を削ぎ落とすことで、本当に伝えたいメッセージや重要なリンクが目につきやすくなり、サイト全体のパフォーマンス向上を実感できる素晴らしい手段となるでしょう。

設定後の効果を確認するために以下の作業を行います。

アドバイスとして、「Blogger」の標準的なガジェットだけでなく、自作したHTMLガジェットなども同様の手法で制御できるため、複雑なカスタマイズを行っている場合ほどこの設定を活用することでモバイル環境での操作性が大幅に改善されるかもしれません。