WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

パソコンで表示したときにサイト左右の余白を上手に使うWordPressプラグインまとめ

公開日:2016(平成28)年9月30日/最終更新日:

Knowledge Base Wordpress プラグイン



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

WordPressにはいろいろな無料テーマがありますが、いろいろなテーマを試していると、ほとんどのテーマで表示する項目や場所が実は決まっていることに気づきますね。

例を挙げると

  1. 先頭に画像やスライダーを表示するか
  2. メニューの位置はタイトルの上か下か
  3. タイトルは画像の上か下か
  4. サイドバーは左右どちらか、また両方か
  5. フッターは画面いっぱいかサイドバーの中だけか

など、見た目はそれぞれ違ってもだいたい同じような設定項目と表現の方法になっています。

WordPressのテーマが画一的になる理由

もっと自由度のあるテーマが欲しいと思うのは山々ですが、

  1. タブレットやスマートフォンでもきちんと表示される「レスポンシブ表示」をさせるため
  2. 構造がヘッダー、本文、サイドバー、フッターという風に画一化されているため

などの理由からどのようなテーマを使っても表示される場所そのものは似たような感じになってしまうのです。

そして1のレスポンシブ表示をさせるため、スマートフォンではヘッダーやフッターの幅と本文の幅を320pxなどに統一的に縮小すればいいのに対し、タブレット表示は700px程度にする必要があり、必然的に本文の幅は700px前後にして等倍で表示させるようにしていることと、サイドバーに関してもスマートフォンでは等倍表示できるようにしていることから全体の幅が700px+300pxを合計した1000~1100px(左右の隙間を含めるともう少し大き目)に画一化されるのです。

この幅は従来のパソコンのモニター幅である1280pxでも収まるようにする目的もあるので、すべてを満たす最大公約数として似たような幅で似たようなレイアウトのテーマができてしまうのです。

こうすることでデバイスに応じてきれいに表示することが可能なのですが、肝心なパソコン表示の際に現在の主流である1920px以上の画面で表示した際の左右余白は背景画像や背景色を設定するか、本文の色と同一にして広さ(余裕)を持たせるしかありません。

パソコン表示での左右余白を有効に使う方法はないか?

前振りが長くなってしまいました。これから今回紹介するのは

  1. パソコンで表示する際にできる左右の余白に機能を持った何かを表示できないか?
  2. 追加のファクターとしてスマホ表示したときに邪魔にならないものはないか?
  3. スクロールしてもいつも同じ位置に表示させる方法はないか?
  4. サイドバーやヘッダー・フッター部分などの限られたスペースの代わりに使える機能はないか?

というニーズに対応した、画面の端に何かを表示するためのプラグインです。プラグイン公式サイトで探しながら紹介していきますので徐々に増やしていこうと思いますので参考になれば幸いです。

QA AnalyticsQA Analytics

サイト左右の余白を上手に使うプラグイン

ツイッターのタイムラインを左右の余白へ開閉式のボタンで表示するプラグイン

https://www.momosiri.info/wppi/twitter-widget-slider/

普段はツイッターマークだけを表示し、パソコンからはマウスオーバー時に、スマホではタップするとタイムラインが吹き出しのように浮かんで表示されるプラグインです。

画面上部の他に、画面末尾や前後のコンテンツへの移動を行うボタンを表示するプラグイン

常に表示されますが、スマホ表示でも特に邪魔にならないサイズです。

画面の端へ追従型のリンクメニューを表示するプラグイン

デザインなど無料版では素っ気ない感じもしますが、本来サイドバーなどへ表示すべきメニューを端へ設置できるので、スペースを無駄なく使えます