早いものでこのブログサイトを立ち上げて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; /* アイコンの高さ */
}
}
読者の記憶に少しでも残すため
こうすることで少しでも読者の記憶に残ってくれたら嬉しい。
「こんなんどうでしょう」というサイト名は覚えられなくても、「画面下でバイクが走ってる記事」と認識してもらえれば、もし何かの機会で再びこのサイトに訪れた際には、「これこれ！このサイト！」となり、そこで「こんなんどうでしょう」を覚えてくれたらこの上ない。
この記事どうでしょう
-
【フレキシスポット】自分に合ったデスクを選ぶ基準｜ポイントは脚の形状
記事を書くときは基本、自宅のデスクで作業することが多いんだけど、ずっと座っていると肩や腰が痛くなってくるし集中力も途切れてくる。デスクもイスも高さは合ってるから、どうやらデスク環境が原因ではなさそう。 ...
続きを見る
-
【30代メンズ】おすすめの上質小物を3選と限定ものをおすすめしない理由
20代までは「とりあえず」とか「流行ってるから」で選んでいた洋服や持ち物。 しかし30代になるとそうはいかなくなってくる。 仕事やプライベートで人に見られる機会が増えることから、質の良いアイテムを選び ...
続きを見る
こっちはどうでしょう
