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