どうもスーです。はてなブログのカスタマイズ等の振り返りをやっていきます。スマホから使いやすいブログを目指すべくカスタマイズを行っていました。脱初心者と言ってますがまだまだ未熟者です。何か気になるものがあれば参考にしてください。
カスタマイズで行ったこと
スマホのヘッダに検索窓をつける
スマホのヘッダに検索窓を付けてみました。一応デフォルトではスマホ画面の下の方にありますが目に入りにくい場所にあるため機能していないと思います。ブログ内検索はあるとブログに訪れた方が記事を探しやすくなって良いのではないかなと思い一番目に入りやすいヘッダに設置することにしました。
デザイン→スマホ→ヘッダ→タイトル下
<form class="search-form" role="search" action=自分のブログのURL/search" method="get">
<input name="q" class="search-module-input" value="" placeholder="ブログ内検索" required="" type="text">
<input value="検索" class="search-module-button" type="submit">
</form>
僕はこれで設置しています。同じことを考えになった方がいたので参考記事を貼らせて頂きます。
スマホの記事上に設置してあるものを消した
スマホの記事上に人気記事一覧とシェアボタンを配置しておりましたがどちらとも削除しました。客観的に僕のブログを見ていただいたのですが記事を読むまでに長いことスクロールしなければならないため使いづらいとの指摘を受けました。
僕の考えとしては回遊率アップのために人気記事一覧とシェアボタンを設置していました。スマホからだとPCとは違いスクロールする手間が増えるため不快に思われる方もいるようです。スマホ表示では記事下のみに人気記事一覧とシェアボタンを設置することにしました。PCはいずれも気にならないと思うのでそのままにしてあります。
スマホのシェアボタンの変更
僕が今までスマホのシェアボタンとして採用していたのが忍者おまとめボタンのものです。非常に簡単に好みのデザインを付けることができるため便利なものです。ただ気になり始めたのがスマホから見たときのブログの読み込み速度です。記事上にもシェアボタンを付けていたときにシェアボタンが表示されるまで5秒以上かかっていたので明らかに原因はここにあるなと思っていました。そこで思い切ってシェアボタン自体を変更してみたところブログの読み込み速度は明らかに速くなりました。シェアボタンの変更は行って良かったと思います。
参考にさせていただいた記事はこちらになります。
スマホ下メニューバーの改善
スマホメニューバーについてはゆきひーさんの記事を参照ください。
メニューバーからはてブ順を無くした
僕の今現在のブログへのアクセス状況は圧倒的に検索流入から来る方が多いです。そしてはてブ順を上位から見ていくと明らかにはてなブログ関連が多いです。おそらくスマホから見に来る方からしたら需要が無いため外してしまいました。僕の場合はブログへ訪問される方と合わないと判断したためあえて無くしましたが逆に訪問される方との関心が合いそうなものがはてブ上位に並んでいる場合ははてブを入れたほうが良いと思います。
メニューバーの色の変更と透過
スマホ下のメニューバーの色をデフォルトのものから変更し透過させました。デフォルトの色よりかは人の目に付くようになったのではないかと思います。あと強調しすぎないように透過もさせました。気にして欲しいけどでしゃばりすぎないようにしたつもりです。（でしゃばってないとは言っていない。）
.btn-area span{
display: block;
float: left;
width: 25%;
height: 50px;
line-height: 25px;
text-align: center;
font-size: 70%;
background: #003366;/*メニュー部分の背景色*/
color: #fff;/*メニュー部分の文字色*/
opacity: 0.8;/*透過処理*/
}
僕がいじったのはこの箇所です。メニュー部分の背景色と文字色の変更と「opacity: 0.8;」を追加しました。opacityの数値を下げるごとにどんどん透明になっていきます。
一応変更したい方はカラーコード表も一緒にどうぞ。
カテゴリ欄の内容を変更
カテゴリ欄も中身をがらっと変えてみました。何か目に止まる物があれば良いと思いざっくりとしたカテゴリから特定の人だけ興味を持ちそうなものに的を絞ってみました。カテゴリを押した時に少しでも関心を持ってくれたら良いなーと思い変更しております。実際のところ逆効果かもしれないのでとりあえずやってみて様子見ます。
最後に
今回はスマホのカスタマイズメインでした。PCの方は付けたい機能を見つけては動かない、見つけてはやり方が分からない・・・を繰り返して全然手が回せていません。良いなあと思うものは結構見つけるんですけどね。
自分で納得しても客観的に見てもらうとまだまだ未熟者だなと実感しますね。経験値を積まなければなりません。あと気になるのがスマホにつけた読者ボタンの読み込みですね。ヘッダにあるやつだけ取り外すかもしれません。
最近はgoogle神に心を開いてもらうため過去記事リライトに全力を注いでいます。初心を忘れてはいけないということを過去記事見ながらしみじみ思いました。
ではまたー!!
