D!S!E!

ハロプロおたくの書き散らし雑記ブログ。

Nakedカスタム グローバルメニューを固定する

ひさしぶりに家でゆっくりネットする時間がとれたので、ブログカスタマイズを行いました。 今回の改造内容は「スクロールした際、グローバルメニューをヘッダーに固定する」です。

今このブログで使用しているテーマはゆきひーさん作の「Naked」です。

www.yukihy.com

こちらのテーマ向けカスタマイズ解説になります。
といっても、私も公開されている各種ソースコードをコピペするくらいのレベル感なので解説といえるほど大したことはできないのですが、同じようなことをしたいなーと思っている人へのヒントになれば幸いです。

そもそもなんでグローバルメニューを固定する必要があるのか

答えとしては、サイトの回遊率を上げるためです。

PCは右横カラムがあるので固定しなくても別にいいんですけど、スマホだと特に他記事への導線って作りにくいんですよね。画面が狭いから。
なので、メニューをヘッダーに固定して少しでも回遊率を上げましょうというカスタマイズです。
これ、通販サイトとかでよくあるやつですね。
結果が出るまではしばらくかかるでしょうが、結果が出たかどうかはアナリティクスで「一人あたりのPV数」と「滞在時間」を比較します。   (でもまだ回遊するほど各カテゴリに記事数ないんだよね!)

それから、訪問者の男女比によってメニューボタンの位置を変えた方がよかったりします。(これは次の改造目標です)
例えば女性が多いサイトであればメニューボタンは左、男性が多いサイトでは右に設置することが多いです。
これはなぜかというと、手の大きさによるスマホの使い方の違いに起因します。

男性だと右手でスマホを持って親指でスクロールしていることが多く、片手ですべて操作を完結させた方が良い。
なので右手の親指で押せる位置(=ページの右上)にメニューボタンを持ってきます。
逆に、女性は左手でスマホを持ち、右手でスクロールするという両手持ちスタイルで使うことが多いです。 こういう持ち方でメニューを使う場合は左上にボタンがあった方が使いやすいんですよね。
利き手の違いとか個人差はあるとは思いますが、全体的には上記のような傾向があります。

ほんというと、できればスマホだけメニューの中身増やしたいとかいろいろやりたいことあるので時間あるときに探ろうと思います。

メニューの固定化について

こちらの記事を参考に行いました。ここにも書かれていますが、そもそもヘッダーメニューの固定化ははてなPro向けのカスタマイズになります。

design.syofuso.com

こちらの記事に記載されているコードの1,2を自分のブログの指定位置に貼ります。 次に、1のコードの3行目#menuを#n-menuに書き換えます。

var nav = $(‘#menu’), ←ここを書き換える

これはなぜかというと、Nakedのメニューは#n-menuという名前で書かれており、それを指定するためです。
このコードを入れるとメニューの文字が上部に固定されます。Nakedを入れたデフォルトの状態だとメニューの文字色は白なので、スクロールした際に白い文字が画面の上の方に固定されていればOKです。

メニュー背景色の追加

メニューの固定化ソースを追加しましたが、これだけだとメニューの文字がコンテンツに同化してしまって見づらいですね。なので背景色を指定する必要があります。 サイトのデザインカスタムのデザインCSS欄に下記のコードをつっこんでください。

#n-menu {
    background: rgba(0,0,0,0.5);
}

このコードが何かというと、メニューの色と透明度を指定するコードになります。そのままコピペして貼り付けると、このブログと同じく「背景色が黒、50%の透明度で表示される」メニューができます。
このコードは、rgbaがかっこ内の数字とリンクしていて、

RED→最初の数字
GREEN→二番目の数字
BLUE→三番目の数字
ALPHA(透明度)→最後の数字(上記のコードだと0.5、つまり50%ってこと)

となります。

色を変えたい人はここのサイトから好きな色を持ってきましょう。

www.colordic.org

#から始まる6桁の色コードは16進数で書かれているため、2桁ずつ区切って上記のソースコードにつっこんでもうまくいきません。
RGBの数値に変換してあげる必要があります。ここで変換しましょう。

16進数・RGB・RGBAカラーコード変換ツール

例えば「オペラopera #e95388」という色にしたい場合。

1)#e95388をRGBの数値に変換。「233,83,136」だそうです。
2)ソースコードの該当の部分に貼り付ける
(というかRGBAの形式で表示してくれるのでそれをそのままコピペ)
3)そうすると下記のようになります。最後のALPHAの数値が1の場合は透過なしになるので、好きな透け感になるまで数値いじってみましょう。

#n-menu {
    background: rgba(233,83,136,1);
}

これで好きな色に変更できます。
ヘッダに指定している画像と馴染むような色に指定しておくといい感じにバランス取れるんじゃないかと思います〜。

まとめ

カスタマイズはうまくいきましたか?
私もまだまだ勉強の身ですが、お役に立てれば幸いです!
それじゃ!