Gush2 スマートフォン表示でも右サイドバー感覚が再現できた！

2015/01/12 2017/09/05

今回挑戦したGush2のカスタマイズはこちらです。

スマートフォン表示(width780px以下)で、画面の右側からサイドバーを呼び出す” javascript “を実装しました。

※以下は当ブログのスマホ表示画面です。~~右上の所にサイドバーを呼び出すボタン(固定)が設置されています。~~

※右上ではなく、フッター下に設置し直しました。理由は記事の読みやすさと、アドセンスの誤クリックを予防するためです。

重要

※こちらのカスタマイズですが、某ブロガーさんよりアドセンスを利用している場合に規約違反になる可能性があるとの指摘を貰いました。その方の話しによれば、飛び出すサイドバー(メニュー)は開くタイミングによってはコンテンツに掲載されたアドセンスの上に表示される場合がありヤバイ＿とのこと。展開したサイドバーへの操作がアドセンスの誤クリックに発展する可能性は考えにくいものの、広告表示の操作という部類の規約違反の可能性は捨てきれないということです。( ※プルダウンメニューなどが、広告に重なるような仕様も規約違反になるとアドセンスのヘルプに記載があります。)＿なるほど、確かに言われてみれば一瞬とはいえアドセンスを覆い隠してしまう仕様は広告主にとってはデメリットでしかありません。今回紹介したカスタマイズとアドセンスを併用する場合は自己責任においてお願いします＿。

詳しいカスタマイズ方法はこちら、

参考サイドバーって死んだの？〜STINGER5のスマホ表示をカスタマイズ〜

｢おーとえすとさいと｣さんが、これ以上ないくらい、わかりやすく解説してくれてます。順番通りにやるだけです＾＾

※一度目の実装に失敗した事をツイートした際、おーとえすさんがその原因を記事の中で追記(解決)してくれました。

とっても有り難うございました＾＾

※フッターに埋め込むスクリプトの設定ですが、Gush2ユーザーでは表示幅(ブレークポイント)の設定を768px(Gush2初期値)に直した方がいいと思います。

780pxのままだとタブレット表示で、少しデザインが崩れます。

飛び出すサイドバーでGush2ユーザーが注意するべき点

今回紹介した、飛び出すサイドバーを実装すると表示幅が780px以下の時に、従来コンテンツ下に回りこんでいたサイドバー(カテゴリ･新着記事など) が非表示になるようです。

ということは、サイドバーを開閉するボタンにユーザーが気がつかないままサイトを去ってしまう可能性がありますね。

もしかしたらPVが減ってしまうかも；；

＿かといって従来通りコンテンツ下にサイドバーを長々と表示させるのでは、今回のスクリプト実装の意味合いが薄らぐ気がします。

ボタンのデザインを工夫するなど、開閉式のメニューがある事をユーザーにわかりやすく提示する必要があるはずです。初期状態では、リスト表示のアイコンフォントになっています。

~~私は個人的に左向きの矢印フォントに変更し、丸だった外枠を四角にしました。~~PVを含め、しばらく様子を見てみたいと思います。

暫定的にこのようなボタンを作ってみましたw

スマートフォンでサイドバーを表示させるカスタマイズですが、デフォルトでは、画面右上にメニュー開閉の為のアイコンが表示される仕様です。

私のカスタマイズの最終案としては、画面隅にアイコン表示をするのを辞めてフッター下に横幅目一杯にメニュー開閉のリンクを設置する仕様にしました。ちょっと場所を取りますが、コンテンツ領域にボタンが干渉しないのでスッキリする感じです。

フッター下にリンクを表示する場合のCSSの修正の一例はこちらです。

 .modalbtn{
    width: 100%;
        z-index: 999;
    position: fixed;
    bottom: 0;
    right: 0;
    border: none;
    height: 33px;
    background: #ddd;
    outline: none;
    padding: 0;
    margin: 0;
}
.modalbtn:hover{
    opacity: 0.7;
}

変にアイコンのデザインに頭を悩ますよりも、この方法がシンプルで実用的なのかな？

ただ一つ思うのが、ながらくデスクトップでネットを見てきた世代とスマホ世代とで便利だと感じる仕様にギャップがあって当然です。小さなボタンをクリックするより、スクロールさせるほうが楽チンっていう場合もあるはずです。

まあ、とにかく様子を見てみたいと思いますw