久々に色々な人のブログを読み漁っていたんだけど、他人のブログを読むと初心に帰れるというか、自分のブログを読み返しているだけでは気づけない不満点に色々気付く。
というのもガジェマガは俺のブログなんだ。だから俺はガジェマガを隅々まで把握してる。そんな俺がガジェマガを読むのと、俺以外の人がガジェマガを読むのとでは体験も全然違ってくる。その外からの目線がとても大切。
ということで第三者目線からガジェマガを読みやすく改良したからその報告をしたい。
この記事の目次（クリックでジャンプ）
【報告】プログレスバーと固定目次ボタンを実装
まず最初に報告すると今現在この記事でもスマホなら右下に固定目次ボタン、画面下に記事の進捗状況を示すプログレスバーが表示されてると思うから活用してほしい。
これによってより記事が読みやすくなるはず。と信じてる。
人のブログを読んで感じた不満点2か所
別にこれはブログに限った話ではないんだけど、人のブログ朗読にはマジで気づきが多かった。些細な不満だと
- スマホ版トップページに記事が1カラムしか表示されない
- アイキャッチが文字のみ
- アイキャッチの画像が見づらい
- 記事タイトルが長すぎて入ってこない
と色々あるんだけど、中でも俺が感じた大きな不満点は2点。それが広告表示が邪魔なことと現在地がわからないことだった。
残酷だけどブログ内に表示されてる運営者が見せたい広告は本当に見ない。意識すらせず飛ばしてる。ただ俺のスクロール量が増えるだけ。
更にスマホ版のブログ記事は現在地が全然わからなくてもどかしい。結果終わりが見えなくて読み進めるのが辛いという感想だった。
グーグルアドセンス広告を消した
まず一番でかいのがこれ。ブログ界隈ではグーグルアドセンスの審査通過が一つの登竜門とされてるし、アドセンス広告なら確実に小銭が稼げる。非常に嬉しいんだけど、普及しすぎた結果読者側もグーグルアドセンス広告に耐性が付きすぎた。
というのも記事を開いてから俺やたらスクロールしてるなと思ったら全部広告だった。しかも完全に無意識。脳がグーグルアドセンスを認識する前に読み飛ばしてる。ってことに気付いた。
あれ？これ読者にスクロールさせてるだけで意味ないぞ？
って思った。
読者は広告より先に記事を読みたい
というのも読者は記事を読むために記事にアクセスしているんだ。グーグルアドセンス広告を見るためではない。だから記事を読む前に広告はクリックしない。牛丼食べに来た客に不動産をお勧めするなという話。
つまり何より重要なのは記事。いかに早く記事にたどり着かせて読ませるかが重要。それ以外の要素はストレスにしかならない。
そして読者はストレスを感じると無意識的にブログに対する嫌悪感を募らせる。一刻も早く離脱したいと思われたらブログは終わり。離脱した読者は離脱したことすら覚えていない。
ブログで重要なのはいかに読者を満足させるか、そしてもっと読みたいと思ってもらえるか。そこからようやくアフィリエイト広告への勝負が始まる。だからまずはなによりメインディッシュとなる記事に素早くアクセスさせることを重視すべきだと思い直した。
記事上の広告を完全に排除
ということでガジェマガで実施したのが下記。
- 記事上に表示していた楽天モバイルをお勧めする記事リンクを削除
- 目次の下に表示していたグーグルアドセンス広告を削除
これによって記事上部が非常にすっきりした。記事をクリックした読者は無駄なスクロールをすることなく最速で記事にアクセスできる。
結果ブログの回遊率が上がってSEOの評価が上がり、全体のアクセス数が伸びれば俺も嬉しい。わざわざ広告で読者の邪魔をする必要はなかったと反省した。
現在地と記事内固定目次を表示した
次に他人のブログを読んでいて不満に感じたのが現在地がわからないことだった。
というかこの記事いつ終わんの？
ってのがスマホ表示だと非常にわかりにくいんだ。
というのもパソコン版では一般的に表示されているスクロールバーがスマホ版では小さすぎるんだ。ほぼ見えない。故に記事の残量がわからない。
この記事もしかして終わらない？
って不安になった。
タイパ重視社会での迷子は即途中離脱される
しかもブログを書いているのは俺含めあくまでも素人。別に面白いとも限らない文章を長々と読まされるのは特にタイパが重視される現代では読者にとってかなりの負担になる。結果途中離脱に繋がってしまうという流れ。
ということでガジェマガでの対策は下記。
- ページ下にシークバーを追加
- スマホ版の記事右下に固定目次を追加
ページ下にシークバーを追加
ページ下のシークバーは丁度Youtube動画の進行度を表すのと同じイメージで、シークバーの色もYoutubeのものと統一した。
これによって今の記事の進行度がわかる。ゴールが見えればモチベーションも維持できる。離脱率も減るという算段。
しかもこのシークバーはページ全体ではなく記事範囲のみを参照する。記事を読み終わればまだページが続いていても達成度は100%を表示してくれるという話。使いやすい。
記事右下に固定目次を追加
次にスマホ版の記事右下に固定目次ボタンを追加した。これで記事を読んでる時もいつだって目次を表示可能だし、タップすれば任意の目次へのジャンプも可能。
ジャンプするとすぐ下に表示されてるシークバーも同時に動くから、これによってシークバーがページの進行度を表示していることにも気付いて貰える狙いがある。
シークバーと目次表示によって記事の現在地を認識してもらい、読者を迷わせず、最後まで読み切ってもらいたい想い。全ては読者ファーストで、読者ファーストが俺のメリットにもなるのがブログなんだ。
固定目次ボタンの追加と同時に内容が被るトップへ戻るボタンは廃止した。
スマホ版ではガジェマガロゴを常に表示
最後にスマホ版の記事ページの上に常にロゴを表示することにした。これはブログトップページに瞬時にアクセスできるようにするため。
離脱前にトップページを見てほしい
大体の人は記事に飽きて途中で離脱するんだけど、俺にとって一番悲しいのは「戻る」ボタンで検索画面に戻られることなんだ。ならせめて最期の願いとして、ブログのトップページだけでも見て行ってほしいという想いを込めた。
ページの上にロゴが表示されていれば離脱前に無意識的にロゴをタップしてしまう。トップページだけでも確認してもらえるという流れ。そこで面白そうな記事を見つけてくれれば読者を1秒でも長くガジェマガに繋ぎとめられるというからくり。
ロゴがあればトップページを一応見る
一方ロゴを常に表示することによって記事ページの情報量を減らすのもどうかとは思ったんだけど、色々な人のブログを見た結果、トップページにだけはアクセスしている俺がいることに気付いた。読者としても別れ際の死に目だけは見てやるという意識があるんだと思う。
でもそんな時も「トップページに戻る」ボタンすら見つからなければわざわざ探すようなことはしない。さらっと戻るボタンをタップしてお別れ。5秒後にはお別れしたことすら忘れてる。それがブログの世界。
だから常にロゴを表示することにした。プラスアルファでブログ名を覚えてもらえるし、メニューボタンから別のカテゴリにアクセスしてくれたら更に嬉しい。1%の積み上げの先に成功があるのがブログビジネスだと信じてる。
シークバーの導入手順
やったこと報告だけで終わると参考にならなさすぎるからこれらの機能をどうやって実装したのかも一応書いていく。パクるなり参考にするなり自由にしてほしい。
まずはシークバーから。これはほぼ「WP Reading Progress」プラグインを入れるだけだから超シンプル。
設定は下記。
- バーの表示位置 bottom
- バーの色 #da1725
- バーの太さ .7vh
- バーのスタート 0%
- ページ全体を参照 オフ
- 表示ページ post,page
これだけ。非常に簡単。できればバーの右端にカエルのアイコンでもつけて存在をわかりやすくしたいんだけど俺にその技術はなかったからパス。余裕があればCHATGPTと格闘しながら実装に挑みたいと思ってる。
追記:シークバーにカエルアイコンを実装しました
一晩ChatGPTと格闘した結果シークバーにカエルアイコンを実装できたからその方法も解説する。
といってもやり方は簡単で下記CSSを追加するだけ。
/*-----------------------------------
プログレスバーの改造
------------------------------------*/
#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: 50px; /* アイコンの幅 */
height: 50px; /* アイコンの高さ */
background-image: url('https://2week.net/wordpress/wp-content/uploads/画像2-2.png'); /* アイコン画像のURL */
background-size: contain; /* アイコンを枠に合わせる */
background-repeat: no-repeat;
z-index: 10; /* アイコンが他の要素より前に表示されるように */
}
/*-----------------------------------
シークバーのスマホ表示の横幅調整
------------------------------------*/
@media only screen and (max-width: 600px){
#ruigehond006_wrap{
Max-width:96%;
}
#ruigehond006_bar::after {
width: 33px; /* アイコンの幅 */
height: 33px; /* アイコンの高さ */
}
}
これで俺のサーバーに置いてあるカエルのフリー画像アイコンが参照される。
任意のアイコンに変更したい場合は自分のサーバーに画像を上げてURLを変更すればOK。
記事内固定目次の導入手順
次に記事内固定目次を導入する。こっちは少し難しい。
まず「Easy Table of Contents」プラグインをインストールする。
設定は下記。
一般タブ
- サポートを有効化 投稿、固定ページ
- TOC Loading Method JavaScript
- スクロールを滑らかにする オン
高度タブ
- 見出し 見出し2(h2)のみチェック
Sticky TOCタブ
- Sticky TOC オン
- サポートを有効化 投稿、固定ページ
- カテゴリー 表示
- デバイス 設定なし（選択）
- 位置 右
- 高さ 下
- 幅 auto
- 高さ auto
- ボタンテキスト 目次
- Click TOC Close on Mobile オフ
- Click TOC Close on desktop オフ
次に追加CSSが下記。
/*-----------------------------------
固定目次ボタンの位置とサイズの調整
------------------------------------*/
.ez-toc-open-icon {
top:auto;
bottom: 50px;
background-color: #040404a6;
color: #fff;
box-shadow:none;
padding: 3px 10px 10px;
}
.ez-toc-open-icon span.text {
transform: rotate(0deg);
}
/*-----------------------------------
目次表示時の高さと表示スピードの調整
------------------------------------*/
.ez-toc-sticky-fixed.show {
top: auto;
bottom: 20px;
}
.ez-toc-sticky-fixed.show {
-moz-transition: right .1s linear;
-o-transition: right .1s linear;
transition: right .1s linear;
right: 0;
}
.ez-toc-sticky-fixed.hide {
-webkit-transition: opacity .3s linear, right .3s cubic-bezier(.4, 0, 1, 1);
-ms-transition: opacity .3s linear, right .3s cubic-bezier(.4, 0, 1, 1);
-o-transition: opacity .3s linear, right .3s cubic-bezier(.4, 0, 1, 1);
transition: opacity .1s linear, right .1s cubic-bezier(.4, 0, 1, 1);
right: -100%;
top: auto;
bottom: 20px;
}
/*-----------------------------------
目次表示時の配置と文字サイズと下線の調整
------------------------------------*/
.ez-toc-sticky-fixed .ez-toc-sidebar .ez-toc-sticky-title-container {
border-bottom-color: #EEEEEE;
background-color: #ffffff00;
border-bottom: 0px solid #e5e5e5;
}
.ez-toc-sticky-fixed .ez-toc-sidebar #ez-toc-sticky-container {
margin-top: 25px;
}
.ez-toc-sticky-fixed .ez-toc-sidebar .ez-toc-sticky-title-container {
padding: 0px;
height: 0px;
top: 0;
}
.ez-toc-sticky-fixed .ez-toc-sidebar #ez-toc-sticky-container {
font-size: 14px;
min-width: 100%;
}
#ez-toc-sticky-container a {
color: rgba(255, 255, 255, 1);
}
.ez-toc-sticky-fixed .ez-toc-sidebar {
padding: 0px 10px;
background-color: #040404d1;
border-radius: 10px 0 0 10px;
height: auto;
}
#ez-toc-sticky-container li, #ez-toc-sticky-container ul, #ez-toc-sticky-container ul li, div.ez-toc-sticky-widget-container, div.ez-toc-sticky-widget-container li {
line-height: 2;
border-bottom: dotted 1px #ccc;
}
/*-----------------------------------
タップした目次を灰色表示しない
------------------------------------*/
#ez-toc-sticky-container a:visited {
color: rgba(255, 255, 255, 1);
}
/*-----------------------------------
×ボタンを白色表示
------------------------------------*/
.ez-toc-sticky-fixed .ez-toc-close-icon {
color: rgba(255, 255, 255, 1);
}
/*-----------------------------------
デスクトップ表示のみのサイズ変更
------------------------------------*/
@media only screen and (min-width: 960px){
.ez-toc-sticky-fixed .ez-toc-sidebar #ez-toc-sticky-container {
max-width: 300px;
}
.ez-toc-sticky-fixed.show {
bottom: 30px;
}
.ez-toc-sticky-fixed.hide {
bottom: 30px;
}
}
これで俺と同じ目次表示が可能なはず。
できれば現在地に応じて目次をハイライトさせたかったけど現在の俺の技術では無理。余裕があればCHATGPTと格闘しながら実装に挑みたいと思ってる。
追記：現在地ハイライトも実装できました
これもChatGPTと一晩格闘すると実装できたからその方法も解説する。
ただこれはちょっとテクニカルで、まずウィジェット画面にあるEasy Table of Contentsの「目次」ウィジェットをどこでもいいからなるべく見えないところで表示させる。俺はスライドメニュー内の下という誰も開かない場所に表示した。
見えなくていい。読み込ませることが重要。これによってスクロールに応じて要素「.ez-toc-sticky-container」にactiveが追加されるJavascriptが走る。
次にスマホ内固定目次の要素となる「.ez-toc-sticky-container」にもactiveが付与されるようにJavascriptを追記する。それが下記。
<script>
document.addEventListener('DOMContentLoaded', function() {
// アクティブなリストアイテムを監視
const tocListItems = document.querySelectorAll('.ez-toc-widget-container ul.ez-toc-list li');
// 対象の sticky コンテナ
const stickyContainer = document.querySelector('.ez-toc-sticky-container');
const stickyListItems = document.querySelectorAll('.ez-toc-sticky-container ul li');
// 関数: アクティブなアイテムの状態を更新
function updateActiveState() {
let foundActive = false;
tocListItems.forEach((item, index) => {
if (item.classList.contains('active')) {
foundActive = true;
// stickyコンテナにactiveを追加
stickyContainer.classList.add('active');
// 対応するstickyリストアイテムにactiveを追加
stickyListItems.forEach((stickyItem, stickyIndex) => {
if (stickyIndex === index) {
stickyItem.classList.add('active');
} else {
stickyItem.classList.remove('active');
}
});
}
});
// アクティブなアイテムがない場合、stickyコンテナのactiveを削除
if (!foundActive) {
stickyContainer.classList.remove('active');
stickyListItems.forEach(stickyItem => {
stickyItem.classList.remove('active');
});
}
}
// MutationObserverの設定
tocListItems.forEach((item) => {
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'class') {
updateActiveState(); // activeの状態を更新
}
});
});
// 監視を開始
observer.observe(item, { attributes: true });
});
// 初期化: ページ読み込み時にアクティブ状態を更新
updateActiveState();
});
</script>
全部ChatGPTに書いてもらったから内容は全く理解していない。動けばOK。
このJavascriptをワードプレスの「外観」→「ウィジェット」→「カスタムHTML」に書き込んで、フッターウィジェットに放り込む。
これでスクロール位置に応じてリスト項目に「active」が追加されるから、そのactiveに対するCSSを最後に追加して表示を微調整するのが下記。
/*-----------------------------------
active項目のみの変更
------------------------------------*/
.ez-toc-sticky-container li.active>a {
font-weight: 900;
background-color: #9e9e9e3d;
}
これで俺は動いた。何かあっても責任は取らない。特にJavascriptをいじるのは色々怖い。復旧できる体制を整えてから挑戦してほしい。
グーグルアドセンスとはお別れ
結果的にではあるけどガジェマガは開設から8年間お世話になったグーグルアドセンスとお別れすることになった。グーグルアドセンスの審査通過ではテンションが上がったし、月数万円ではあるけど積み重なる収入は非常にありがたかった。グーグルアドセンスに感謝。
ただありがたいことにガジェマガはある程度の知名度とPVを得ることができて、グーグルアドセンスが無くてもアフィリエイト収入で十分運営できるようになった。
月100万の収入があるのに月2万円のアドセンス収入の為に読者にストレスを与えるべきではない。寧ろ2万円を手放した方が回遊率が上がって収入が上がる可能性も十分ある。という総合的な判断でグーグルアドセンスは削除した。
現在はアドブロック全盛時代
しかも今はアドブロック全盛でそもそもクリック型広告が下火なんだ。俺自身もブレイブブラウザを便利に使わせてもらってる。
つまりアクセス数が増えてもクリック型広告だと大きな収入が見込めないのが現実なんだ。グーグルアドセンス排除は時代の流れ。ならこっちから排除して適応してしまえば良いという話。
別にグーグルアドセンスを否定したいわけではないけど、大きな流れには逆らえないし、今のガジェマガには必要ないというだけ。もちろんブログビジネスはまずグーグルアドセンスからという認識は変わらない。
他人のブログは良くも悪くも写し鏡
俺も最近はYoutubeとかTikTokばかり見ていて、動画って勝手に進んでくれるから楽だよなーなんてことを思いながら文字を読むことをさぼりまくっているんだけど、なんだかんだ俺はブロガーでもある。
ブロガーとして生きていく以上業界研究とライバル分析は必須。なら他人のブログは読まないと。そうすることで写し鏡となり、他人の良い点が参考になるだけでなく悪い点も多く目につく。いずれにせよ自分の改善に繋がるという流れ。
令和になって更に文字需要は減り、電車の中でも皆スマホでYoutubeとインスタばかりの世界ではあるんだけど、とはいえ文字需要はなくならないのもまた事実。少ないパイだからこれからの参入はお勧めしないけど、ライバルが少ないからこその旨味はある。
俺はそこにあやかっていきたいし、何よりブログが好き。書き続けたいからこそ読んでほしい。だから今後も妥協なく改善していきたい想い。という美しい締め方で終わる。
