【ウィジェット機能】スクロール追従サイドバーを活用|WordPress【ルクセリタス】
サイドバーや 記事の一覧画面、記事の下などに 設置するBOX = ウィジェット
この ウィジェットの組み合わせで サイトのレイアウトを設定することができます。
今回は スクロール追従 機能と使い方についてまとめています。
スクロール追従機能
スクロール追従とは その言葉通り、Webサイトの画面を下へスクロールした時に追いかけてついてきてくれる機能。
サイト画面、コンテンツの内容によっては 記事の長さとサイドバーの表示のバランスが合わず
記事以外の表示が 全く何も無くなってしまって、なんだか 寂しいページになってしまいます。
またその逆に サイドバーの情報量が多すぎて メインの画面が空白なんてことも。
このバランス、難しいですよね。
情報が多すぎる画面を嫌がるユーザーさんもいると思うので シンプルでもいいんじゃない?
なんていう考え方もあるかもしれませんが 情報量が少なすぎるのは問題です。
離脱率を減らす
他にはどんな情報が載っているのだろう。「ちょっと、見てみたい。」と関心を持ってもらえる情報が
すぐそこにある、ということが大事になります。
知りたい情報のページを探すのに 移動が多いとサイトからの離脱にもつながりますので
2クリックくらいで移動できるのが理想的と言えます。
追従スクロール
追従スクロールは 好みのウィジェットを設置することができます。
画面のスクロールに合わせて サイドバーのウィジェットがついて来てくれるので 欲しい情報が
探しやすく、サイトのイメージも良くなりそうです。
ウィジェットを設置する
管理画面の外観の項目にウィジェットの設定画面があります。
通常のサイドバーの設定画面の下に 追従スクロールのBOXがあります。
メインのウィジェットは3タイプ
メインのウィジェットは 汎用・トップページ用・トップ以外の 3タイプから選びます。
H3・H4とありますが その違いは 記事のタイトルと同じく
H1(大見出し)が 一番重要ですから 表示内容の重要度に合わせて 設置することが大切ですね。
追従スクロールで使用できるのは h4のタイプのみになります。
追従スクロールへ設置する項目
追従してほしい項目としては 目次が一番でしょうか。
TOPに戻るためのボタンはありますが、少し前の章に戻りたい時など、目次があると便利に感じます。
目次は設定したH2の数によって表示されない場合があり、私の場合は
ナビゲーションメニューを設置しました。
スクロール用の カテゴリーなどをメニューで作成してもよさそうです。
あと、AdSenseなどの広告も!( ̄▽ ̄;) ぜひ、設置したいですよね。
追従スクロールの注意点
気を付けたいのは あまり多くのウィジェットを設置してしまうと
画面からはみ出てしまい ウィジェットや 広告の一部が途切れてしまうという
逆に見づらい サイドバーになってしまいますのでご注意を!
グローバルナビゲーションも追従?
最後に 合わせて設定したい項目として グローバルナビゲーションの外観カスタマイズについてのおはなしです。
グローバルナビゲーションも サイト内の記事を分かりやすく表示させるために有効ですが
スクロールして移動した場合、画面から消えてしまいます。
サイドバーの追従と同様、画面の移動に合わせてバーが移動してくれることで
ユーザーが記事を検索しやすくなります。
グローバルナビゲーションの固定
カスタマイズは 外観カスタマイズ → ヘッダーナビ(グローバルナビ) の スクロールの固定 から行います。
基本的にグローバルナビは ヘッダーの下、パンくずリンクの上に表示されています。
それを外観カスタマイズの設定で スクロールの固定 を選択した場合、
このようにスクロールで画面を移動した場合でもナビバーが付いてきてくれる、といった感じです。
固定オプション – 影と半透明
あとは バーに影を付けるのと 半透明にする、といった設定があります。
どちらも追従されていることが分かりやすくなるため どちらか片方だけでも
設定しておくのがいいのではないでしょうか?
外観 & CSSカスタマイズLuxeritas,ウィジェット
Posted by 45
関連記事
【 CSSカスタマイズ 】ラインの基礎から アンダーラインの使い方
サイトデザインに重要な見出しや 投稿記事でよく見かける ラインや囲み枠。 Web ...
リンクのカスタマイズ – 色と アンダーラインを消すCSS
リンクは 青文字にアンダーラインが基本的なCSSのデザインです。 アンダーライン ...
サイト画面の各名称と ルクセリタスの外観カスタマイズの設定|WordPress
WordPressテーマ ルクセリタスの機能のひとつに 外観カスタマイズがありま ...
タイトル付き囲み枠 ー title-box ー のCSS作成とHTML
タイトル付きの囲み枠にもいろいろと種類があります。 囲み枠の部分にタイトルを入れ ...
番号なしリスト – ul 要素 -の CSSカスタマイズ注意点
投稿記事で使用するリストや 目次やグローバルナビなどのリストのカスタマイズにはu ...
フッターに表示された Fatal error: Uncaught Error: について|問題箇所の特定と改善方法
Webサイトで突然、フッター部分に Fatal error: Uncaught ...
Tag