早いものでこのブログサイトを立ち上げて5ヶ月が経過した。
サイトの構成もほぼほぼ固まりひたすら記事を書く日々を過ごしてるんだけど、やはりネタ探しに苦労してるのが常。
ネタが無くなっては、自分と同じようなレビュアーさんの記事を読むんだけど、みんな記事のボリュームがえげつない。
3,000文字前後がやっとの自分にとっては、毎記事10,000文字も書ける運営者が雲の上の存在に思える。
ただ読んでいる途中で思うことがある。
「この記事いつ終わるんや...？」
ここに見やすいサイトのヒントが隠されてた。
おそらくブロガー視点でそう思っているなら、単なる読者はもっと思っているはず。
そして最後まで読まずに離脱しているに違いない。
これがシークバーを設定しようと思ったきっかけだ。
X(旧Twitter)もやってます。
【自己紹介・お問い合わせ】はこちら。
現在地が分かればストレスが減る
ボリュームのある記事ほどスマホ画面の右側にあるグレーのシークバーが短くなり、スクロール回数が増える。
そこそこ読んだあとに右側を見ると、まだバーが半分にも届いてないなんてこともある。
そこで一気に読むのがストレスになってしまうんだ。
しかもこのバーは記事が終わった後のおすすめ記事一覧も含まれてるから、記事自体のゴールもわからない。
逆に読んでる記事の現在地とどれくらいで記事だけを読み終えられるかが分かれば、少しはストレスも減るだろう。
なのでこんなんどうでしょうでは、画面下にYouTube風のシークバーを導入した。
シークバーとアイコンを設定した
YouTube画面の下にどれくらい動画が進んだかを表す赤い線。これがシークバー。
これを記事にも設定することにした。
シークバーだけだと面白みに欠けるので、シークバーの右端にアイコンも設定した。
アイコンはChatGPTで適当に作ったもの。
俺は水曜どうでしょうが好きだから、原付が走るイメージのアイコンにした。
シークバーの設定方法
シークバーの導入方法はめちゃくちゃ簡単。
「WP Reading Progres」というプラグインを入れるだけ。
プラグインの設定は下記。
- バーの表示位置：bottom
- バーの色：#da1725
- バーの太さ：.7vh
- バーのスタート：0%
- ページ全体の参照：オフ
- 表示ページ：post, page
プラグインの設定から簡単にカスタマイズできるから、気になる人はやってみてほしい。
アイコンの設定方法
アイコンの設定は追加CSSに下記コードを追加するだけ。
CSSコードを追加するには「外観」→「カスタマイズ」→「追加CSS」の順にクリックするだけ。
下記のコードがアイコン用CSS。
これは俺が設定しているアイコンのCSSなんだけど、「/* アイコン画像のURL */」部分を自分が設定したいアイコンのURLに置き換えればすぐに設定できる。
/*-----------------------------------
プログレスバーの改造
------------------------------------*/
#ruigehond006_wrap{
Max-width:98%;
}
#ruigehond006_bar {
position: relative;
overflow: visible;
Max-width:98%;
}
#ruigehond006_bar::after {
content: "";
position: absolute;
top: 50%;
right: -14px;
transform: translate(50%, -50%); /* 中央揃え */
width: 80px; /* アイコンの幅 */
height: 110px; /* アイコンの高さ */
background-image: url('https://doudesho.com/wp-content/uploads/2025/05/IMG_1005-e1747734876249.png'); /* アイコン画像のURL */
background-size: contain; /* アイコンを枠に合わせる */
background-repeat: no-repeat;
z-index: 10; /* アイコンが他の要素より前に表示されるように */
}
/*-----------------------------------
シークバーのスマホ表示の横幅調整
------------------------------------*/
@media only screen and (max-width: 20%){
#ruigehond006_wrap{
Max-width: 50%;
}
#ruigehond006_bar::after {
width: 10px; /* アイコンの幅 */
height: 10px; /* アイコンの高さ */
}
}
読者の記憶に少しでも残すため
こうすることで少しでも読者の記憶に残ってくれたら嬉しい。
「こんなんどうでしょう」というサイト名は覚えられなくても、「画面下でバイクが走ってる記事」と認識してもらえれば、もし何かの機会で再びこのサイトに訪れた際には、「これこれ！このサイト！」となり、そこで「こんなんどうでしょう」を覚えてくれたらこの上ない。
この記事どうでしょう
-
aimeve アイマスク 「光の遮断」プレミアムとノーマルの違い、使用感をレビュー
睡眠って意外に軽視されがちで、実際日本人の平均睡眠時間は7時間ほどなんだ。 そして働き盛りな年代ほど睡眠時間は短く、それが原因で体調不良や精神疾患にかかってしまう。 風邪や体調不良の予防には食事が大事 ...
続きを見る
-
サムソナイト「ミンター」をレビュー「究極の使いやすさを実現」
俺はフィットネスのコンテストに出場する際に、地元ではなく地方を会場に選ぶ。その理由が旅行も兼ねたいからだ。 地元や準地元だと、ある程度は何処に何があるか分かるし、退屈してしまう。 コンテスト後に遠征先 ...
続きを見る
こっちはどうでしょう
