WordPressで画面の指定した場所へ常に表示される(追従型)コンテンツを作成するプラグイン「Advanced Floating Content」

Wordpressでサイトを作っていて、「画面に常に表示されるコンテンツを追加したい」「パソコンで表示したときのサイト左右余白を有効に使いたい」と思うことはありませんか?

「Advanced Floating Content」プラグインを使うと

  1. 商店のサイトなどでは画面先頭や末尾に連絡先などを常に表示したい
  2. 通販サイトでは画面下に注文ボタンなどを常に表示したい
  3. 会員制サイトでは画面の上や下に常にログイン/ログアウト/新規登録などのボタンを表示したい
  4. パソコン用のサイトなのでモニタサイズによって余白ができてしまう。この余白にコンテンツを表示できないか

などといった使い方をすることができるようになります。

このプラグインを使って表示するコンテンツはスクロールに関係なく常に画面上に表示されるので、画面の一番下や一番上に戻らずに見てもらいたいものを表現するのに最適です。

文末で紹介しますが、決まった内容を固定表示するものはたくさんあります。が、たくさんリリースされているプラグインの中で、自由なコンテンツを自由な位置に配置できるのは、この記事を公開する時点ではおそらく「Advanced Floating Content」だけだと思われます。

スポンサーリンク



【Advanced Floating Content】プラグインの基本的な機能・できること

無料版で使える機能

  1. 画面の上または下へ常に表示されるコンテンツを作成できます
  2. 上下左右の余白を調整することで同一画面上に複数のコンテンツを表示できます
  3. 表示するコンテンツの基準を画面の右・左いずれかに設定できます
  4. 表示するコンテンツは幅固定、画面の割合から選択可能
  5. 背景色の設定可能
  6. ボーダー(囲み線)の設定可能
  7. ※画面の割合を選択した場合、デバイスによって表示しきれない部分は折り返して表示されます

※スマートフォンなど小さい画面で表示する際にも設定した大きさと上下左右からの隙間(margin)が保持されますので、あまり多くのコンテンツを埋め込むと本文そのものが見れないということが起きます。使用時は実際にいろいろなデバイスでどのように表示されるのか確認した方がいいと思います。

有料版で追加される機能

  1. 表示する投稿タイプ(トップページ/固定ページ/投稿など)が指定できる
  2. 表示するカテゴリーやタグなどを指定できる
  3. カスタムCSSが適用できる
  4. 背景色だけでなくフォントの色も指定できる
  5. マージンに加えて内側の余白(パディング)が設定できる
  6. レスポンシブ表示(縮小表示)対応
  7. 表示する画面の高さが足りない場合などで他のコンテンツと重複してしまう場合は非表示にできる(スマートフォンの横向き表示時などで便利)
この記事の内容について
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
  1. すべての環境で動作するとは限りません
  2. できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
  3. 有料版と無料版がある場合、テストは原則無料版のみで実施しています
  4. テスト環境については文末に記載しています
  5. 使用方法で紹介しているショートコードをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。

【Advanced Floating Content】プラグインの設定画面や表示の日本語化と翻訳

【Advanced Floating Content】プラグインは設定項目が少ないので特に必要ないと思います

【Advanced Floating Content】プラグインのインストールと設定

インストールと設定方法

インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

インストール方法の詳しい解説は

Wordpressと言えばさまざまな追加機能を使って思い通りの表現や動作ができるのがブログやHTMLで作ったサイトと違って楽しいところですね。ここでは基本的なプラグインの導入の仕方とトラブルが発生した場合の対処方法について解説します。
を参照ください

【Advanced Floating Content】プラグインの基本的な使い方

※無料版での設定項目のみ紹介します

  1. コンテンツの作成や編集はダッシュボードの「Advanced Floating Content」から行います
  2. 編集画面は通常の投稿と同じものが表示されますので自由にコンテンツを入力します
  3. ※画像やhtmlタグも使えます

  4. 表示位置などの設定を行います
    1. Position/表示位置に関する設定です。上下左右のどこを基準に表示するかを設定します
    2. Show Close Button/コンテンツに「閉じる」ボタンを付けるかどうかの選択をします
    3. Width/固定幅、または画面の割合を設定します
    4. Background Color/コンテンツの背景色を設定します
    5. Margin/上下左右の余白設定です。1のPositionとともに調整します
    6. Border/コンテンツを囲む線の設定をします

有料版ではフォントサイズやフォントカラーの設定が追加されますが、コンテンツ内にhtmlタグが使えるので「font color」や「font size」を使えば表現できます。

常に表示する(追従型)コンテンツを作成できるその他のプラグイン

この記事を公開する時点では、当サイトで

「Floating Links」はよくあるページトップへ戻るボタンに「前ページ」「次ページ」「ページ末尾」「ランダムなページ」「同じカテゴリーの記事」へ移動するボタンを画面の上・下・左・右のいずれかに固定表示(スクロールしても同じ場所に表示)するプラグインです。

を使用しています

「CodeFlavors floating menu」表示画面の右または左にスクロール追従型のアコーディオンメニューが作成できるプラグインです。ナビゲーションメニューと別にメニューを設けることができるので、アコーディオンの機能を活用して、短い名前の親メニューを表示し、マウスオーバーすると詳しいメニューを表示することも可能ですからサイト表示の邪魔になりません。
「WP Floating Menu」はページの左もしくは右へ追従型(スクロールしてもいつも表示される)リンクメニューを表示できるプラグインです。無料版では限られたデザインと1つのメニューのみ表示が可能ですが、有料版ではデザインや表示方法などさまざまな拡張ができます。
「Floating Login」はスクロールなどと関係なく設定した位置へ「ログイン」「ログアウト」「ユーザー登録」「プロフィール」へのリンクボタンを設置できるプラグインです。通常はページトップやサイドバーなどへ設置しますが、スクロールすると見えなくなってしまうことが不都合な場合に便利なプラグインです。

目的が決まっていればこれらのプラグインが重宝します。

変わり種のプラグインに

「WP RelatedPosts」は、通常本文下などに表示する「関連記事」を、ページ上部から一定の割合に達したとき、またはページを表示してから一定時間過ぎたときに今表示されているページの上に小さな関連記事表示窓を出すプラグインです。

があります。ページの中である程度の位置(設定可能)に来るとニューっと関連記事が表示されるプラグインです。ページビュー数増加対策やバウンスレート(直帰)を減らす対策に役立つと思います。

Wordpressの本

Amazonの人気商品楽天市場の人気商品
CS Shop
【新品】【本】小さなお店&会社のWordPress超入門 初めてでも安心!思いどおりのホームページを作ろう! オリジナルのテーマであっと..

【新品】【本】小さなお店&会社のWordPress超入門 初めてでも安心!思いどおりのホームページを作ろう! オリジナルのテーマであっと..

2,138 円 (税込)
■ISBN:9784774182186★日時指定・銀行振込をお受けできない商品になりますタイトル【新品】【本】小さなお店&会社のWordPress超入門 初めてでも安心!思いどおりのホームページを作ろう! オリジナルのテーマであっという間にホームページができる! 星野邦敏/著 大胡由紀/..
【中古】 WordPressで初めてでも簡単にできる自分で作れる!おしゃれなWebサイト WordPressで初めてでも簡単にできる WordPress3.5対..

【中古】 WordPressで初めてでも簡単にできる自分で作れる!おしゃれなWebサイト WordPressで初めてでも簡単にできる WordPress3.5対..

1,042 円 (税込)
評価 1
久松慎一【著】販売会社/発売会社:ソフトバンククリエイティブ/ 発売年月日:2013/01/28JAN:9784797369601
楽天ウェブサービスセンター CS Shop

プラグインに関するお問い合わせ

「こんなプラグインないの?」「設定方法をもっと詳しく教えてほしい」「プラグインを少しカスタマイズして使いたい」などのご相談は、こちらのリンクからお願いします(【ココナラ】のサイトへ移動します)。

ココナラ Wordpress プラグイン探し バナー

似たようなプラグインをお探しですか?

このプラグインはに分類されています。リンクをクリックすると同じような機能を持つプラグインの紹介記事一覧が表示されますので、プラグイン探しに是非ご活用ください。
トップへ戻る