ウェブサイトの訪問者に重要なメッセージに気づいてもらうのは難しい場合があります。
価値あるオファーを共有したいと考えていますが、表示頻度とユーザーエクスペリエンスの適切なバランスを見つけるのは常に簡単ではありません。あまりにも控えめすぎると、人々は見逃してしまいます。あまりにも攻撃的すぎると、押し付けがましく感じられます。
フローティングフッターバーは、完璧な中間点を提供します。
コンテンツをスクロールしても常に表示されるため、メッセージを共有するための、一貫性がありながらもさりげない方法を提供します。
当社のウェブサイトで割引を宣伝したり、ニュースレターを紹介したりするのに非常に効果的であることがわかりました。ブラウジング体験を中断することなく注意を引きます。
このガイドでは、適切な方法の選択から、最大限の効果を得るためのフローティングフッターバーのカスタマイズまで、プロセス全体を順を追って説明します。
WordPressのフローティングフッターバーとは？
スティッキーなフローティングフッターバーを使用すると、重要なコンテンツやニュースをユーザーに目立つように表示できます。
このバーは訪問者に常に表示されるため、クリックしてさらに役立つコンテンツを見つける可能性が高くなります。
フローティングフッターバーを使用して、次のことができます。
- 他のブログ記事へのクリックを増やしましょう。
- リードを獲得し、メールリストを構築しましょう。
- 特別なクーポンや割引オファー/セールに注目を集めましょう。
- ソーシャルメディアアカウントを宣伝する。
- ブランド認知度を高める。
- WordPressウェブサイトに重要なリソースへのアクセスを提供します。
それを踏まえて、WordPressで簡単に固定フローティングフッターバーを作成する方法を見てみましょう。このチュートリアルでは2つの方法を紹介します。お好みの方法にジャンプするには、以下のリンクを使用できます。
- 方法1：OptinMonsterでスティッキーフローティングフッターバーを作成する（推奨）
- 方法2：無料プラグインでスティッキーフローティングフッターバーを作成する
- ボーナス：WordPressでスティッキーフローティングナビゲーションメニューを作成する
- フローティングフッターバーに関するよくある質問
方法1：OptinMonsterでスティッキーフローティングフッターバーを作成する（推奨）
OptinMonster を使用すると、スティッキーなフローティングフッターバーを簡単に作成できます。これは市場で最高のリードジェネレーションおよびコンバージョン最適化ツールであり、ウェブサイトの訪問者を購読者に変換することを非常に簡単にします。
WPBeginnerでは、プロサービスやニュースレターを宣伝するバナーやポップアップを作成するためにそれを使用しました。このツールでの私たちの経験についてもっと知りたい場合は、完全なOptinMonsterレビューをご覧ください。
このプラグインには、ドラッグ＆ドロップビルダーと既製のテンプレートが付属しており、コードを使用せずにフローティングフッターバー、スライドインポップアップ、バナーを作成できます。
OptinMonsterは非常に使いやすく、無料プラグインの方法よりも多くのカスタマイズオプションを提供するため、この方法をお勧めします。
ステップ1：ウェブサイトにOptinMonsterをインストールする
まず、'Get OptinMonster Now'ボタンをクリックして、OptinMonsterのウェブサイトにサインアップする必要があります。
次に、ウェブサイトに無料のOptinMonsterコネクタプラグインをインストールして有効化する必要があります。詳細な手順については、WordPressプラグインのインストール方法に関する初心者向けガイドをご覧ください。WordPressプラグインのインストール方法。
有効化すると、OptinMonster セットアップウィザードが画面に表示され、「既存のアカウントを接続」ボタンをクリックする必要があります。これにより、WordPressサイトとOptinMonsterアカウントが接続されます。
それを行うと、画面に新しいウィンドウが開きます。
ここで、「WordPressに接続」ボタンをクリックして先に進みます。
ステップ 2: フローティングスティッキーフッターバーの作成とカスタマイズ
OptinMonster をウェブサイトに接続したので、固定フローティングフッターバーを作成する時間です。
これを行うには、WordPress管理サイドバーからOptinMonster » Templatesページにアクセスし、キャンペーンタイプとして「Floating Bar」を選択する必要があります。
それを行うと、フローティングバーのすべての既製テンプレートが画面に読み込まれます。ここから、使用したいテンプレートの「テンプレートを使用」ボタンをクリックできます。
これにより、画面に「キャンペーン作成」プロンプトが表示され、作成しようとしているフローティングフッターバーの名前を追加できます。訪問者には表示されない名前なので、好きな名前を付けることができます。
その後、「ビルド開始」ボタンをクリックするだけです。
OptinMonsterのドラッグアンドドロップビルダーが画面に表示され、フローティングフッターバーのカスタマイズを開始できます。右側にはフローティングバーのプレビューが表示され、左側の列にはブロックが表示されます。
例えば、フローティングフッターバーが割引オファーを宣伝している場合、カウントダウンタイマーブロックを使用できます。これにより、ユーザーの緊急感を高め、行動を促すことができます。
フッターバーにCTA、ビデオ、またはソーシャルメディアブロックを追加することもできます。詳細な手順については、WordPressでアラートバーを作成する方法に関するチュートリアルを参照してください。
フッターバーをクリックしてテキストを編集することもできます。これにより、左側の列にブロック設定が開かれ、好みに合わせて調整できます。
例えば、テンプレートの割引オファーを変更したい場合は、ボタンのテキストを変更できます。その後、「URLにリダイレクト」オプションを選択し、ボタンをクリックしたときにユーザーをリダイレクトしたいページのリンクを追加します。
ステップ3：フローティングフッターバーの表示ルールを設定する
フッターバーのカスタマイズに満足したら、上部にある「表示ルール」タブに切り替えるだけです。
ここで、ページにバーを表示するタイミングを設定できます。フローティングフッターバーを常に表示したい場合は、左側のドロップダウンメニューから「ページ上の時間」オプションを選択する必要があります。
その後、右側のドロップダウンメニューから「即時」オプションを選択します。
ただし、フローティングフッターバーを特定のページに表示するには、右側のドロップダウンメニューから「ページターゲティング」オプションを選択する必要があります。
その後、中央のドロップダウンメニューから「完全に一致する」オプションを選択し、ページURLを追加します。これを実行すると、選択したページにのみフローティングフッターバーが表示されます。
さらに、「離脱インテント」オプションを選択して、ユーザーがサイトを離れようとしているときにスティッキーフローティングフッターバーを表示できます。その後、離脱インテントの感度を設定し、フッターバーが表示されるデバイスを選択できます。これは、直帰率を減らしたい場合に役立ちます。
デスクトップ訪問者のみにフローティングフッターバーを表示したい場合は、「訪問者のデバイス」オプションを選択することもできます。
左側の列から「いつ」オプションを選択することで、日付、時刻、またはスクロール距離に応じて表示ルールを設定することもできます。
その他の表示ルールオプションの説明については、OptinMonsterの完全なレビューをご覧ください。
ステップ4：フローティングフッターバーを公開する
フッターバーの表示条件を定義したら、上部から「公開」タブに切り替えます。
ここで、「公開」ボタンをクリックするだけです。
その後、「保存」をクリックして変更をライブにすることを忘れないでください。
これで、WordPressブログにアクセスして、スティッキーなフローティングフッターバーが機能していることを確認できます。
代替案: ウェブサイトにカウントダウンタイマーのフローティングフッターバーを表示するために、Thrive Ultimatumを使用することもできます。詳細については、Thrive Themes Suiteの完全なレビューをご覧ください。
方法2：無料プラグインでスティッキーフローティングフッターバーを作成する
スティッキーなフローティングフッターバーを作成する無料の方法を探しているなら、この方法が最適です。ただし、OptinMonsterを使用する場合と比較して、カスタマイズオプションが限られていることに注意してください。
まず、Firebox Popup Builder プラグインをインストールして有効化する必要があります。詳細な手順については、WordPressプラグインのインストール方法に関するチュートリアルをご覧ください。
有効化したら、WordPressダッシュボードからFirebox » Campaignsページにアクセスし、「+ New Campaign」ボタンをクリックしてください。
これにより、Fireboxキャンペーンライブラリが開かれ、スティッキーフローティングバーの既製のテンプレートを検索できます。
次に、気に入ったフローティングフッターバーの下にある「挿入」リンクをクリックするだけです。ヘッダーバーを選択した場合、その位置を変更できないことに注意してください。フッターバー用のテンプレートを選択していることを確認する必要があります。
ブロックエディターが画面に表示され、フローティングバーの名前を追加することから始めることができます。
その後、フッターのテキストをクリックして編集し、「+」ボタンをクリックして新しいブロックを追加できます。これによりブロックメニューが開き、画像、見出し、段落、動画、引用、リストブロックなどを追加できます。
例えば、ソーシャルメディアのハンドルを追加したい場合は、ソーシャルアイコンブロックを選択できます。その後、ブロックパネルを使用してソーシャルメディアのアカウントとリンクを追加できます。
詳細については、WordPressメニューにソーシャルメディアアイコンを追加する方法（簡単な方法）に関するチュートリアルをご覧ください。WordPressメニューにソーシャルメディアアイコンを追加する方法。
ボタンブロックのテキストを変更したり、リンクアイコンをクリックしてユーザーを誘導したいページへのリンクを追加したりすることもできます。
その後、お好みのURLを入力して「Enter」キーを押してください。
次に、「Firebox設定」セクションまでスクロールダウンできます。
ここで、背景色、文字色、配置、サイズ、パディング、マージンをフローティングフッターバーで変更できます。
その後、左側の列から「動作」タブに切り替え、フローティングバーのトリガーポイントとして「ページ読み込み」を選択します。
次に、「遅延」スライダーを使用して、フローティングバーの遅延タイミングを選択します。たとえば、スライダーを15秒にドラッグすると、ユーザーがサイトに15秒滞在した後、フローティングフッターバーが表示されます。
スティッキーフローティングフッターバーをすぐに表示したい場合は、スライダーを0のままにしておくことができます。
次に、他の設定はそのままにするか、好みに応じて設定できます。
完了したら、忘れずに上部にある「公開」ボタンをクリックしてください。
WordPressサイトにアクセスして、スティッキーフローティングフッターバーが実際に動作しているのを確認してください。
これはデモサイトでの様子です。
ボーナス：WordPressでスティッキーフローティングナビゲーションメニューを作成する
固定フッターバーを追加する以外にも、WordPressサイトに固定フローティングナビゲーションメニューを作成することもできます。
ナビゲーションメニューには、WordPressブログの最も重要なページへのリンクが含まれており、ウェブサイトの構成構造として機能します。
このメニューをスティッキーにすると、ユーザーが画面を下にスクロールしても、常にページに表示されたままになります。これにより、エンゲージメントを高め、ウェブサイトのナビゲーションを容易にすることができます。
固定フローティングナビゲーションメニューを作成するには、Sticky Menu & Sticky Header プラグインをインストールして有効化するだけです。詳細は、WordPressプラグインのインストール方法に関するチュートリアルをご覧ください。
有効化したら、WordPressダッシュボードから設定 » 固定メニューページにアクセスし、「固定要素（必須）」オプションの横に#main-navigationと入力します。
その後、「変更を保存」ボタンをクリックして設定を保存します。これで、スティッキーフローティングナビゲーションメニューが正常に作成されました。
詳細な手順については、WordPressでスティッキーなフローティングナビゲーションメニューを作成する方法に関するチュートリアルをご覧ください。WordPressでスティッキーなフローティングナビゲーションメニューを作成する方法。
フローティングフッターバーに関するよくある質問
フローティングフッターバーに関して、読者からよく寄せられる質問をいくつかご紹介します。
フローティングフッターバーはモバイルデバイスでも機能しますか？
はい、ほとんどのフローティングフッターバーはモバイルでもうまく機能します。しかし、さまざまな画面サイズでテストして、すべてがうまく見え、正しくフィットすることを確認することをお勧めします。
プラグインによっては、ニーズに応じてバーをモバイルまたはデスクトップのみに表示できるものもあります。これにより、各ユーザーの体験をカスタマイズできます。
フローティングフッターバーが表示されるタイミングを制御できますか？
はい！OptinMonsterのような多くのプラグインでは、バーが表示されるルールを設定できます。たとえば次のとおりです。
- ページ上で数秒後に表示
- スクロールダウン時に表示
- 特定のページにのみ表示
これにより、ユーザーの注意を適切なタイミングで、あまり押し付けがましくなく引きつけることができます。
スティッキーフッターバーを使用する際に避けるべきことは何ですか？
いくつかのヒントを以下に示します。
- バーを高くしすぎないでください。役立つものであり、邪魔にならないようにしてください。
- 他の重要なコンテンツをカバーしないようにしてください。
- メッセージは短く明確にしてください。
また、アニメーションや派手な色は使いすぎないでください。クリーンでシンプルなデザインが通常最も効果的です。
この記事が、WordPressで簡単にフローティングスティッキーフッターバーを作成する方法を学ぶのに役立ったことを願っています。また、WordPressでヘッダーとフッターのコードを追加する方法に関する初心者向けガイドや、WordPressサイトのフッターに追加すべきもののチェックリストもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Greg
このスティッキーバーをページの上部に配置するにはどうすればよいですか？CSSを使用するか、設定を見落としていますか？すでに回答されている場合は申し訳ありません。ありがとうございます！！
WPBeginnerサポート
For that you would want to use the header option instead of footer for most of these and that would place it at the top of the page
管理者
モイヌディン・ワヒード
フローティングフッターバーは、マーケティングやリード獲得に非常に効果的です。
進行中のプロモーションやオファーについて、ユーザーの心に常に誘惑を与えます。
この絶え間ないリマインダーと、このオファーがすぐに終わってしまうのではないかというFOMO（取り残されることへの恐れ）のために、過去に購入したことがあります。
私たちのウェブサイトでそれを作成する方法のステップバイステップの内訳をありがとうございます。
WPBeginnerサポート
どういたしまして、ガイドがお役に立てて嬉しいです！
管理者
Hajjalah
ソーシャルリンク付きのフローティングフッターバーを追加するためにOptinMonsterプラグインを使用していますが、この詳細なステップバイステップの記事のおかげで、ソーシャルメディアのオーディエンスが劇的に増加しました。
しかし、もしよろしければお伺いします。OptinMonsterプラグインのフッターバーが表示されないように、またはGoogle AdSenseのフッター広告のようなフッター広告が表示された後に表示されるようにコードを追加することは可能ですか？
WPBeginnerサポート
You would want to reach out to OptinMonster’s support and they can help you look into and/or set up something like that
管理者
Ahmed Omar
WordPressで「固定」フローティングフッターバーを作成するための優れたチュートリアル
あなたのステップバイステップガイド、特に最初の方法は明確で効果的です。
このフローティングフッターには最初の方法を使用しています
この実用的なソリューションに感謝します
WPBeginnerサポート
どういたしまして！
管理者
Steve Alvi
このフッターフローティングバーに閉じるボタンを付けてください。
WPBeginnerサポート
OptinMonsterは、閉じるボタンを最も簡単に持つことができる方法でしょう。
管理者
イジー・ヴァネック
Optin Monsterを使用しており、閉じるところを設定し、測定することもできます。これにより、何人がフローティングバーを使用したか、そして興味がなかったために閉じた人が何人いるかを知ることができます。
Trendy Avinash
見事にうまくいきました。プラグインなしで。
ありがとうございます
WPBeginnerサポート
Glad our guide was helpful
管理者
Alejandro Ferguson
フローティングフッターコードは本当に機能します。ありがとうございます
WPBeginnerサポート
Glad our guide could help set it up
管理者
ジョン・スミス
モバイルのみで、デスクトップでは表示されないフローティングバーにFB共有ボタンを追加する方法
WPBeginnerサポート
こちらのソーシャルメディアプラグインのオプション2をご覧ください: https://www.wpbeginner.com/plugins/best-social-media-plugins-for-wordpress/
管理者
wlepcha
ランダムな広告の代わりに、スティッキーフッターにメニューを追加する方法。
WPBeginnerサポート
こちらの記事をご覧ください: https://www.wpbeginner.com/wp-themes/how-to-create-a-sticky-floating-navigation-menu-in-wordpress/
管理者
Marius
素晴らしいチュートリアルです。手動でコードを実装したところ、見事に機能しました。もう一つ必要な機能があります…フローティングバーを閉じるためのXボタンや閉じるボタンを追加して、訪問中はそのままの状態を維持することはできますか？クッキーが関係していることは承知していますが、簡単な解決策を教えていただけますか。ありがとうございます！
グレッグ・ガズ
非常に明確で、従いやすいチュートリアルです。
フローティングバーは問題なく動作しているようですが、Chromeコンソールで以下のエラーが表示されます。
リソースの読み込みに失敗しました: サーバーが404 (Not Found) を返しました
何かアイデアはありますか？
Ankush jain
あなたのウェブサイトはとても役に立ちました。
どうもありがとうございました。
Mark Rowles
ちょっとした注意点ですが、CSSはこの目的には機能しません。
htmlではfixedBarをクラス名（大文字B）として使用しており、cssではfixedbar（小文字b）を使用しているため、cssが適用されていません。
この投稿を見つけた他の人を助けるために、誰かコードを修正してもらえませんか？
WPBeginnerサポート
Markさん、こんにちは。
ご指摘ありがとうございます。コードを更新しました。
管理者
Robi
WPBeginner およびフレンズ様
Elementor Page Builder を使用して作成した特定のセクションがある場合、それをカスタムのスティッキーフッターとして使用するにはどうすればよいですか？（複数の列、いくつかのボタン、テキストが含まれています）。このチュートリアルで説明されている単純なテキストではなく、この種のスティッキーフッターが必要です。
ありがとうございます。
Daniel
1) テーマディレクトリ /wp-content/themes/mytheme/ の footer.php の </body> タグの直前にコードを追加しました。
2) テーマディレクトリ /wp-content/themes//mytheme/style.css にコードを追加しましたが、機能しませんでした。削除してから、テーマオプションのカスタムCSSメニューから追加しようとしましたが、同じ問題で機能しません。
3) floatingbar.js を /wp-content/themes/mytheme/js にコードを入れて追加しました
4) 最初はfunctions.phpにコードを追加しましたが、機能しませんでした。サイト固有のプラグインでも試しましたが、同じでした。
両方のウェブサイトで別のテーマを試しましたが、同じ問題で機能しません。ただそこに座っているだけで、浮いていません。
何か助けがあれば歓迎します…本当に必要です
WPBeginnerサポート
Danielさん、CSSの問題をトラブルシューティングするには、Inspect toolを使ってみてください。
管理者
Daniel
返信ありがとうございます。しかし、私にとってCSSやJavaScriptをいじることは宇宙船を建造するようなものです…何が間違っているのか突き止めようとします。
Regards
Daniel
Daniel
インスペクターツールを使用しましたが、そこに赤い線は見えません…。
Dueadla Framin
同じ問題を抱えています！投稿されたコードは、デフォルトのTwenty Sixteenテーマでも機能していません。浮き上がらず、スクロールして一番下まで行くと、ウェブページの底に固定されてしまいます。
イゴール
CSSコードのfixedBar参照にエラーがあります（“.fixedbar”として参照されていますが、“.fixedBar”であるべきです）。それを変更して、機能するかどうか確認してください。
henrykene
WpBeginnerさん、モバイル表示でAdsense広告を表示するために使用したいのですが、どうすればよいですか？モバイル視聴者向けにAdsenseスティッキーフッターを表示するためのコードは何ですか？
ナワフ
素晴らしい。
しかし、バグがあります。モバイルで開くと、リボンが切り取られてしまいます。そして、その半分しか見えません。
ヒント
新しいテーマでは、無限スクロール機能を使用するオプションがあります。これは素晴らしいのですが、読者が古いフッター（法的開示などを記載している場所）に到達するまで長時間スクロールする必要があるという問題があります。
このフローティングフッターバーのおかげで、リンクをきれいに配置でき、必須リンクの多くを再配置する必要なしに無限スクロール機能を使用できるようになりました。
このチュートリアルをありがとう。PHPとCSSも少し学びました！
Sarah Noah
ページごとに「見積もり依頼」へのリンクを設置したいクライアントがおり、このスティッキーフッターを見つけたときは完璧だと思いましたが、ユーザーによっては迷惑だと感じるという意見も読みました。皆さんは、ページ下部に固定された「見積もり依頼」は迷惑だと思いますか？もちろん、会社がユーザーに最も行ってほしいことです。
Roy E
フッターバーはFireFoxでは正常に表示されますが、IE11ではスティッキーではなく、「WPBeginnerについて」、「サイトリンク」、「好きなサイト」を見るためにスクロールダウンする必要がありましたか？
Roy E
もちろん、前のコメント（IEの問題）でEnterキーを押したときに、固定フッターバーが表示されました。何が起こったのかはわかりませんが、問題はなくなりました。このコメントと前のコメントは無視してください。
yugishtha
WP用のフローティングトップバーメニュープラグインもありますか？
Hutzel
すべて試しましたが、固定フッターが表示されません。どなたか助けていただけますか？よろしくお願いします。
デベンドラ・ミーナ
スクリプトをフローティングボックスに配置し、閉じるためのxボタンがあるプラグインはありますか？
Khushal Rao
これは広告を表示するためにも使用できます。
ディック・シイツマ
例えば0.60に不透明度を下げると、訪問者は下のコンテンツを垣間見ることができます。それは良い効果だと思います。しかし、バーの不透明度を変更すると、テキストの不透明度も変更されます。そしてそれはメッセージを「薄めて」しまいます。それを防ぐための何かトリックはありますか？
ありがとうございます。
Jan dB
前述の通り、これは非常に簡単なチュートリアルで、ほとんどのコンピューターで驚くほどうまく機能します。
しかし、モバイルブラウザに関しても問題があります。
それに対する解決策はもう見つかりましたか？
ありがとうございます。これからも頑張ってください！
編集スタッフ
モバイルブラウザでレスポンシブデザインを使用している場合、メディアクエリとdisplay: noneを使用してフッターバー全体を非表示にすることができます。
管理者
Theresa @DearCreatives
Nice. I am actually looking for a tutorial for adding script to top of post that is there every time I post for disclosure purposes. If you have one like that or know of a plugin can you send me an @DearCreatives on twitter or email me
thanks!!
ディック・シイツマ
こんにちは、良さそうですね。しかし、なぜ人々がこのようなフッターを非常に嫌うのか、その理由を非常によく理解しています。それにもかかわらず、私もこの効果を達成しようとしています。
このページ自体のソースで、JavaScriptを外部化しているのを見ました。main.jsというJavaScriptファイルに配置し、このメインファイルをヘッダーでページにリンクしています。
今のところ順調で、それは対応できます。しかし、「randomtip」関数がどこで呼び出されているのか見つかりません。
要するに私の質問は次のとおりです。JavaScriptを外部化するにはどうすればよいですか？お返事をお待ちしています。
マシュー
素晴らしいチュートリアルです。他の人も遭遇する可能性のある問題が1つあります。私はフッターリンクを複数（ローテーションで表示）持っているのではなく、1つしか持っていません。そして、このフッターバーは、フッターにリンクしているページでも表示されます。特定のページにこのフッターを表示しないようにする簡単な方法をご存知ですか？あるいは、ホームページにのみ表示するようにすることはできますか？
編集スタッフ
is_front_page() 条件文でテキストを囲むだけです。
管理者
Antonio
Here a true beginner. How do I actually do that? I totally new to WP and PHP. As far as I understand I have to put somewhere in the footer.php but I really have no idea where. Great article though. It managed to add it to my blog as well
カイオ
気に入っていますが、少し distracts すぎます。不透明度を下げることで、きれいで軽くし、ホバー時に不透明度を .9 に戻すスタイルステートメントを追加してみてはどうでしょうか。
Sopheak
すごい！素晴らしいチュートリアルでした。
パワン
素晴らしい、私も同じものを探していました。
Sai Kumar
こんにちは、このスティッキーフローティングフッターバーは本当に素晴らしいです！間違いなく私のブログに追加するつもりです。共有してくれて本当にありがとう！
マックス・マンロー
すごい、素晴らしいチュートリアルだと思います。自分のブログで試してみます。ありがとうございます。
Zseller Istvan
皆さん、これがWpBeginnerで本当に嫌いな唯一の点です。タブレットで記事を読むとき、Operaを使用していると、スクロール中にこのフッターバーが数秒間ページの中央に留まります。新しいタブレットで、十分な性能があります。フッターバーがコンテンツを覆い、非常に迷惑です。しばらくすると、元の位置に戻ります。
編集スタッフ
モバイル/タブレット版を開発中です。もうすぐこの問題は解消されるでしょう。
管理者
Salman Ahmad
すごい！これは素晴らしいです、共有してくれてありがとう
Peter
この素晴らしいチュートリアルを提供していただき、本当にありがとうございます。間違いなく私にとって役立つでしょう。
アミタバ・チャクラボルティ
Hi
良いチュートリアルです。誰かを悩ませる場合に備えて、「X」ボタンで閉じることができるようにすると素晴らしいと思いました。
敬具
Amitabha
デビッド
フッターバーは気に入っています。ソーシャル共有ボタンを配置するのに最適な場所だと思います。クライアントのサイトで自作しましたが、閉じることができるオプションが付いています。また、トップへ移動ボタンも保持しています。かなり便利です。しかし、私が作ったフッターバーのように、HTC EVO 4Gでは、あなたのフッターバーは本来あるべき下部に固定されません。実際には記事の途中に固定されてしまい、テキストの一部を覆ってしまうので非常に迷惑です。私が作ったバーは閉じることができるので、一時的な迷惑で済みます。あなたのバーは閉じることができないので、そのテキストを全く読むことができません。これも私の携帯電話での話です。回避策を見つけたら教えてください。
素晴らしいニュースレターを通じてこの記事にたどり着きました。ありがとうございます。
マイケル
これらのタイプのバーを好きか嫌いかは別として、少なくともそのようなものを実装するためのコードがどのように書かれているかを見ることは非常に価値があります。私はHello BarとWibyaバーをいくつかのサイトで使用していますが、一部の人はそれに気づかなくなったり、嫌ったりしていますが、コンテンツのコンバージョンや共有を助けるのに役立つことが多いです。
役立つちょっとしたコードレッスンだと思います。素晴らしいサイトです！
タリン・フォックス
個人的には、フローティングフッターバーは非常にユーザーフレンドリーではない機能だと感じています。特に、a)非表示にできず、b)フォントサイズを大きくして表示すると、意図したサイズ（またはそれ以上）の2倍に拡大するような機能はそうです。
そういえば、nosquintでこのサイトの他のテキストを拡大しても、視覚的なアクセシビリティの問題がある場合、コメントフィールドのテキストは小さくて読みにくいです。
他のアクセシビリティの問題といえば、「本名」を尋ねることは、仮名を使用する人に対して敵対的です。これには、トランスジェンダーの女性、ストーキングされている人、自分を傷つける可能性のある人々からオンライン活動を隠している人、そして単に本名よりも仮名で知られている（そしてより包括的で正確な用語です）人々が含まれます。
また、「コメントを追加」の通知で「meaningful」をスペルミスしています。
長々と批判的なコメントを残すつもりはありませんでしたが、多くの人がフッターバーに対してバナーブラインド（広告への無関心）を持っており、良くても無関心、最悪の場合は迷惑だと感じていると思います。ウェブデザイナーではない多くの人は特にそうです。実際に影響を受けている人たちのために、誰かが声を上げるべきだと思いました。その後、Googleリーダーからあなたのサイトにアクセスし、コメントを残そうとした際に、他の問題に遭遇しました。
チュートリアルをありがとうございます。うまくいくことを願っています。
編集スタッフ
Tarynさん、こんにちは。
このようなフローティングフッターバーには、確かに長所と短所があります。短所はすでに指摘されています。通常のユーザーがバーを閉じ、二度と表示されないようにするクッキートラッキングオプションを検討しましたが、通常のユーザーでさえそれのために素晴らしい取引を見逃すことがあります。また、ブラウザのキャッシュをクリアしたり、別のコンピューターを使用したりすると、バーが再び表示されます。クッキートラッキングのもう1つの欠点です。ユーザー登録とサイトでのパーソナライゼーションの提供について、広範に検討しました。
コメントに関しては、フィールドの「本名」テキストは1つの目的、つまりスパムを停止するために存在します。コメントポリシーを読むと、「名前フィールドにキーワードを詰め込むことは許可されていません。コメントするには、あなたの名前またはニックネームを使用する必要があります。」と書かれています。多くの場合、人々はニックネームを使用しており、私たちはそれに完全に同意しています。しかし、あなたのニックネームが「最高の保険会社」のようなものである場合…それはスパムとしてマークされます。
タイポをご指摘いただきありがとうございます。修正いたしました。
管理者
パルタ・バタチャリヤ
これは、上記のTarynのコメントに関するものです。
「フッターバーに対するバナーブラインドネスを感じる人がほとんどで、せいぜい無関心で、最悪の場合は迷惑だと感じていると思います。」
それらを使い続けているということは、それらから恩恵を受けていることは間違いなく、私も今行ったように、更新するために人々はそれらをクリックします…別のページからここに来ました。
フッターバーがあなたにとってどれほど効果的か、またヘッダーバーを使用するのと比べてどれほど効果的かについて、統計/インサイトを共有していただけませんか？
staion
この簡単で素晴らしい小さなチュートリアルをありがとう！すでにサイトに実装しましたが、jqueryは使用せず、単にアナウンスとして使用しています。
フリーダムジャクソン
シェアしてくれてありがとう、ダディ。更新作業をしていて、このフッターバーを追加する良い方法を探していました。
mucho grande gracias senior