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

公開日:2016年11月21日 コンテンツ追加
Knowledge Base Wordpress プラグイン
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のプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

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

を参照ください

【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」を使えば表現できます。

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

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

を使用しています

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

変わり種のプラグインに

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

Wordpressの本

Amazonの人気商品楽天市場の人気商品
CS Shop
たった1日で基本が身に付く! WordPress 超入門【電子書籍】[ 佐々木恵 ]

たった1日で基本が身に付く! WordPress 超入門【電子書籍】[ 佐々木恵 ]

1,944 円 (税込) 送料込
<p>WordPressによるWebサイト作成の基本を一から学べる書籍です。1日8時間の勤務時間内に読むことができる程度に解説内容を絞り込み,初心者・新人が最初の1冊目として読むのにふさわしい内容となっています。本書ではローカル環境にWordPressをインストールしてWebサイト..
サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル【電子書籍】[ 宮内 隆行 ]

サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル【電子書籍】[ 宮内 隆行 ]

3,456 円 (税込) 送料込
<p>プラグインの開発から運用までを網羅</p> <p>※この電子書籍は固定レイアウト型で配信されております。固定レイアウト型は文字だけを拡大することや、文字列のハイライト、検索、辞書の参照、引用などの機能が使用できません。</p> <p>CMSのデファクト・スタン..
楽天ウェブサービスセンターCS Shop

いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報