画面をスクロールしてもサイドバーのウィジェットが自動追尾してくれるWordPressのプラグイン『Q2W3 Fixed Widget』。
今回の記事はこれを初めて使ってみた私の備忘録的な形になります。
私の書く記事は、基本行間をあけて文を書くスタイルでいるので、記事を読んでいくとまー長い長い。なんでこんなに長いのというくらい長くなってます。
これを書いている時点ではブログを始めて二ヶ月弱ということもあり、仕事の合間にこなしつつなのでスタイルがまだ定まってないところもあります。
しかし、文を長くするにしても短くするにしても、記事を読んでいってスクロールしたあとにサイドバー部分が空白、というのは少しもったいない気がしました。
10年くらい前に何も考えずにブログを書いていただけの頃とは違って、今は段違いでカスタマイズもしやすいし、研究もされているし、ビジネス展開も広く、使われるプラグインも豊富で凄いです。
WordPressに関してはまだ初心者なので、出来うる限り出力できるよう、書いていこうと思います。
Q2W3 Fixed Widgetのインストール方法
WordPressにログインして、ダッシュボードの「プラグイン」→「新規追加」をクリックします。
右上にある検索欄に「Q2W3 Fixed Widget」と入力。検索が掛かって出てきた「Q2W3 Fixed Widget」プラグインを「今すぐインストール」→「有効化」させます。
上画面では、もう私は有効化してしまった後ですね。
Q2W3 Fixed Widgetを適用させる初期設定
有効化された「Q2W3 Fixed Widget」を実際に適用するため、サイドバーのウィジェット編集画面にいきます。「外観」→「ウィジェット」とクリック。
スクロールに追従してくる（サイドバーに固定表示される）項目をクリックして、「『Fixed widget』にチェック」→「保存」。
これで、設定完了。
あとはこの項目がスーパーマリオブラザーズ3の砂漠ステージに出てくる、難しい顔した太陽の如く自動で追っかけてきてくれます。
あの太陽、倒してもしばらくしたらまた出てくるからなぁ・・・嫌だったなぁ。
ちなみにこの画面をスクロールして付いて来る項目は、サイドバーの一番下に持ってくると自然だと思います。
私は最初、「目次」をここに持ってきて、いつでも同じページ内を反復できるようにしようかなと考えていたのですが、
「いや、なるべくなら最後まで記事を読んでもらえるような内容を心がけて、
読み終わった後にブログ内の他の記事にも興味をもってもらえた場合、
その選択肢を右に置いておきたい」
と考えて、「カテゴリー」を選びました。
本音を言えば、文字だけの「カテゴリー」よりも、画像のついた人気記事一覧を右に置いたほうが自然かもなぁと思いましたが、人気記事一覧は一応下にも出ますしね。
ひとまずやってみないことには何もわからないので、「カテゴリー」でまずはいってみようということです。
フッターかぶり
やったーこれで念願の追随カテゴリーを手に入れたぞ！！
と思ったのも束の間、後半の追い上げに粘り強さを発揮する競走馬のように、カテゴリー一覧が無表情に疾走してきます。そして勢い余ってブログのフッターに、もろかぶりしてきました。
フュージョンに失敗したガリガリのゴテンクスか。
もしくは王蟲に食い破られてるペジテのドームみたいになりました。
PCから見る分には、現在フッター幅を拡張していないので問題ありませんでしたが、スマホはもうド直撃。何がなんだかわからないというか、こんなん迂闊に触りたくない。てかフュージョンできてない。
うーんどうしたものかと思っていたのですが、調べたら割とすぐに出てきました。ｽﾊﾞﾗｼｲ。
↓その素晴らしいブログはコチラ↓
アフィリエイトで独立起業した元公務員のブログ「Stable Life」
ここを見た瞬間、なんか凄い人のところに来てしまったというかこれもう自分がわざわざブログの記事にする必要ないよね？ってすごく思いましたが、書かないと多分、というか絶対忘れる。（笑
それに折角だからブログの書き方も少し吸収させて頂いて慣れていかねばあかんとも思っているので、今ばばーっと記事を書いてます。ありがたや。
Q2W3 Fixed Widgetのフッターかぶりの対処法
「Q2W3 Fixed Widget」プラグイン本体の設定はどこにあるのかというと、これまた「外観」にありました。「外観」→「Fixed Widget 設定」をクリック。
まず「下マージン」。
「margin（マージン）」とは「余白」のことで、この「下マージン」に設定した数字より下には、サイドバーの追尾はやってきません。ブログのフッターの高さ幅よりも大きい数値を入れてやれば、かぶることはないということになります。私はとりあえず「300px」で設定しました。
次に、「幅を無効化」。
ブラウザの画面幅がこれよりも狭くなったら追っかけてこなくなる、という横幅。巨人は小人族であるコロポックルの家には入ってこれない、というわけですね？どういうわけだ
最初はStable Lifeさんの記事のご説明通り、ここを「1000px」にしてみたところ、スマホの追尾は無くなりました。ですが、PC上でブラウザの横幅を狭くしていくと、思ったより広めの段階で追尾してこなくなった印象がありました。
この幅辺りからちょっとブラウザを狭めると・・・
ここで追尾がなくなってしまう。この「カテゴリー」氏、探してみますとまるで初めから走ってすらいなかったかのような素振りで、他のウィジェット達と上でじっとしていました。あれ、今の夢だった？みたいなくらい素知らぬ顔でいた。
なので、「夢だけど！夢、じゃなかった！」ということを思い出させてあげるよう、ある程度はついて来てくれるよう「800px」に設定してみました。
そうすると、
ご覧の通り、というか少しわかりにくいかもしれませんが、このくらいまで狭くしてもついて来てくれるようになりました。
・・・なんか、プレイヤーについてこれなくなると勝手に自宅に帰ってるNPCみたいなイメージだ。そういうゲームあった気がする。
スマホでも同様、追尾せずにしっかり止まってくれていました。
まとめ
サイドバー追尾のフッターかぶりの解消法の記事ですが、一応まとめてみます。
- Q2W3 Fixed Widgetは、指定したウィジェットをスクロール追尾させてくれるプラグイン
- Q2W3 Fixed Widget自体の設定は「外観」に入ってる
- フッターかぶりは、一般設定の「下マージン」を調整で解決
- モバイル版での対処は「幅を無効化」で自分の使っているブログの幅より広めに設定することで解決
ちなみに、このプラグインを使用するにあたってちょっと気になった点をStable Lifeさんが書かれておられたので引用します。
大手サイトなどでは、同様の機能を用いてAdSense広告を追尾しているものも見られますが、本来これは規約違反ですので、真似をしないようにご注意ください。
大手サイトなどの場合は、プレミアムアカウントと言って、Googleに特別扱いをしてもらい通常の規約では禁止されている行為が認められている可能性があります。
とのこと。
「AdSense広告」というのは、ブログ内に貼る広告の事。CMみたいなものです。
表示されたり、クリックされたりすると報酬が発生するというものなのですが、
それだけに利用制限がしっかり設けられています。やみくもに貼ったりしてもいけない。
ブログ界の日の浅い私には、こういった注意点はほんとありがたい。
というわけで、今回はこんな感じでした。
それでは！