Blogger日本語テーマ「Smart」のジャンプボタンをカスタマイズ!

2020/10/20

Google(神)よ!天のお恵みを下さいまし。オオカミはもうびしょ濡れです。

今後「Smart」を利用するBloggerユーザーが増えていく事が予想されるので、カスタマイズネタを一つ提供させてもらう。

「Smart」といえば、シンプルかつ多機能なBloggerテーマで、テンプレート(ウィジェット)やレイアウトタグの仕様が最新のバージョンで凄い。

それってどゆこと?だからなにって言われても返答に困るのでヤメて。詳しくは、以下公式サイトをチェックしてくれ。

SIDEボタンは「Smart」目玉機能のひとつだけど?

今回僕が言いたいことはたった一つ。

このSIDEボタンが凄くお気に入りってこと。もうあえてギミックと呼びたいくらい。

スマートフォン表示の時にここをタップすると、一瞬でサイドバーのトップ位置にアクセスする事ができる。ちなみにトップへ戻るボタンと併用すると、上下にギュンギュンさせる事もできる。

ただね過信は禁物だなと。

なぜかと言えばブログに訪問したユーザーがこのボタンを意図的に使う理由が想像しにくい。

ひょっとしたら宝の持ち腐れになってしまうかもしれん;;

そんなことを考えていた次の瞬間、ふと思いついたのが、、、

SIDEボタンをサーチアイコンに入れ替える?

これサーチアイコンで一石二鳥じゃないの!?

_ってことだった。

検索ボックスとサイドバー。どちらの需要がより高いかはサイトごとに違うとして。そもそも論、”SIDE”の表記でサイドバーへの導線だと気づく人がどれほどいるだろう。

僕のような”ブログに死す”レベルの人間でもない限りは、、、

_ってことだった。

どうだろう?

この対策はサイドバーに検索ボックスを設置していることが前提条件となるが。

仮に検索ボックスをフッターに設置していた場合は、SIDEボタンのジャンプ先を「#BlogSearch」のような”id”に書き換えてやればいい。

デフォルトのジャンプ先は「#aside」となっている。

SIDEボタンのカスタマイズ方法

カスタマイズ箇所は、「#aside」_で検索をかけて。

黄色マーカー部分をサーチアイコンに置き換えばOK。「Smart」のデフォルトアイコンは”Font Awesome”なので、<i class="fas fa-search" id='side-icon'></i>_に置き換える。

アイコンサイズなどは、「#side-icon」で検索して、該当箇所のCSSで調整する。
(※アイコンのクラスに直接CSSを設定しても同じ結果になる。)

僕はブログの読み込み速度を改善するために、Font Awesomeは外して、かわりにSVGやPNG画像で代用している。

テーマに手を加える際は、.xmlファイルのバックアップを忘れずに。

検索ボックス直下のアドセンスはOK?

Blogger無料テーマ「Smart」のサイドバートップに検索ガジェットを設置。かつ直下にアドセンスを貼っている場合の話。

ユーザーがSIDEボタンをタップすることで、いきなり広告を表示する事が可能になる。これってアドセンス規約は大丈夫なのか?

一応アドセンス単体であれば、追尾型広告は規約違反にはならないようだが。ユーザーが意図しない状態でジャンプする場合は意味合いが違ってくる可能性がある。

僕が調べた範囲では、この挙動がOKなのかどうか分からなかった。

僕も本来であれば、検索ボックス直下にアドセンスを設置したかったが、この辺の規約がよく分からず回避する形になっている。

コメント

0 件のコメント :