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

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

例を挙げると

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

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

スポンサーリンク

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

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

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

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

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

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

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

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

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

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

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

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

  1. ツイッターのタイムラインを左右の余白へ開閉式のボタンで表示するプラグイン
  2. Wordpressでツイッターのタイムラインを開閉表示できるプラグイン「Twitter Widget Slider」
    「Twitter Widget Slider」は画面の右もしくは左へツイッターマークを表示し、マウスオーバーでタイムラインをヌーーっと表示するプラグインです。小さなボタンなのでスマホでの表示でも邪魔にならなくて便利です。

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

  3. 画面上部の他に、画面末尾や前後のコンテンツへの移動を行うボタンを表示するプラグイン
  4. Wordpressでページの先頭/末尾、前後の投稿への移動ボタンを常に表示するプラグイン「Floating Links」
    「Floating Links」はよくあるページトップへ戻るボタンに「前ページ」「次ページ」「ページ末尾」へ移動する4つのボタンを画面の右側中央に追従表示するプラグインです。

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

  5. 画面の端へ追従型のリンクメニューを表示するプラグイン
  6. Wordpressでページの左(右)へ追従型のメニューを表示できるプラグイン「WP Floating Menu」
    「WP Floating Menu」はページの左もしくは右へ追従型(スクロールしてもいつも表示される)リンクメニューを表示できるプラグインです。無料版では限られたデザインと1つのメニューのみ表示が可能ですが、有料版ではデザインや表示方法などさまざまな拡張ができます。

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

役に立つ情報でしたらぜひSNSでシェアしてください
  • 6
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    6
    シェア
  •  
  • 6
  •  
  •  
  •  
  •  
スポンサーリンク
ページ先頭へ