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

公開日：2016(平成28)年11月21日／最終更新日： 2019(令和元)年12月17日

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

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

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

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

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

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

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

無料版で使える機能

画面の上または下へ常に表示されるコンテンツを作成できます
上下左右の余白を調整することで同一画面上に複数のコンテンツを表示できます
表示するコンテンツの基準を画面の右・左いずれかに設定できます
表示するコンテンツは幅固定、画面の割合から選択可能
背景色の設定可能
ボーダー（囲み線）の設定可能

※画面の割合を選択した場合、デバイスによって表示しきれない部分は折り返して表示されます

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

有料版で追加される機能

表示する投稿タイプ（トップページ／固定ページ／投稿など）が指定できる
表示するカテゴリーやタグなどを指定できる
カスタムCSSが適用できる
背景色だけでなくフォントの色も指定できる
マージンに加えて内側の余白（パディング）が設定できる
レスポンシブ表示（縮小表示）対応
表示する画面の高さが足りない場合などで他のコンテンツと重複してしまう場合は非表示にできる（スマートフォンの横向き表示時などで便利）

本記事を参考にWordPressサイトへプラグインの導入を検討される方へ

WordPressは古くから無料で配布されているサイト作成ツール（CMS）で、随時改良が加えられており、さまざまなバージョンが存在します。

さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。

そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。

本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。

テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。
プラグインに無料版と有料版（Pro版）がある場合、特に記載がなければ無料版の情報のみを紹介しています
このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください（ここでは質問にお答えすることはできません）

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

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

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

インストール方法

インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください（プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください）。

WordPressを使い始めて間もない方（初心者の方）は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール＆追加方法とエラー対処の方法も併せてご覧ください。

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

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

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

※画像やhtmlタグも使えます

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

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