イメージ・キャラクターを固定の位置に表示させる方法｜WordPress
kensatools_QA
前回の投稿で地元の県西三河地方のケーブルテレビKATCHの番組『アインシュタインのオタスケシュタイン』でkensatoolsのイメージ・キャラクターが決まったことをお知らせしました。
https://www.kensatools.com/katch_character_20240809/ 早速、そのキャラクターを本サイトに表示させました。それがトップのスクリーンショット画像です。
普通に画像として埋め込んでもよかったのですが、固定、投稿ページ問わず、どのページの上にも表示させられないかとそれらしいプラグインを探してみました。フローティング・ボタンなどボタンやCTAなどを表示させたりできるものがあってトライしてみましたが、画像を表示させるものが見つかりませんでした。
そうこうするうちハッと思い出したのですが、それがこの↓記事で紹介した プラグイン「Boxzilla」！！
プラグインの「Boxzilla」は、画面の四隅にPopupボックスを表示するためのプラグインで、ボックスの色や幅、表示位置の指定（右、左、上、下、中央）や表示タイミングの条件指定、表示するページ指定などを設定できるスグレモノです。このページでも下へスクロールすると、右下角にメルマガ登録用の水色Popupボックスが表示されますが、それを実現させているのが「Boxzilla」です。
ボックス内に表示させる内容はHTMLで記述できるので画像の表示はお手のモノです。表示場所として指定できるのは四隅と中央だけですが、ボックスのデザインも含め、CSSでなんとかなるだろうと考え、やってみたのがスクショ、そしてこのページにも右側上角から少し下がったところにキャラクターが表示されてるはずです。
なお、CSSで変更したのは、画像の背景を透過にすることと表示位置を下に動かすことです。
コードは以下の通りで、#boxzilla-9314 というのはキャラクターに設定されていたIDです。
/* Boxzillaのボックス（キャラクター）の背景を透明にする */
/* Boxzillaのボックス（キャラクター）の位置をズラす */
#boxzilla-9314 {
background: transparent!important;
top: 200px!important;
}あとは、Boxzillaの設定です。
”Auto-show box?”（自動表示の設定）を ”Yes, after □ seconds on the page.”を選択して、□に”0”（0秒）を入れれば、画像は常に表示されます。
表示させるページの設定は、 ”Load this box if ” で行います。デフォルトでは全てのページ（everywhere）になっていますが、いろいろな方法（固定or投稿やそれぞれID/スラッグで指定、URL、URLに含まれる／ない文字を指定など）で設定できます。
