読者です 読者をやめる 読者になる 読者になる

《はてなブログ》続きを読むの挿入位置を変更したら2つの劇的なメリットが生まれたよ。

ブログのコツとメリットと検証

 

トップをアーカイブページにするメリット

ブログを立ち上げて初期のころに、センパイブロガーさんの真似をしてトップページをアーカイブページに差し替える方法を導入していました。

メリットは当然、トップページを訪問してきたひとに、過去の最新記事が見やすくならんでくれるという点です。
しかし……

検索に不利っぽい。

まあ細かい理屈は置いときまして、長期的にみると検索に不利っぽい気がしてきました。
そこで、トップページからアーカイブページに自動遷移するのをまずヤメました。

元々のトップページに表示が戻ると、

f:id:vintraw:20161228143122j:plain

こんな感じに「続きを読む」を設置したところより手前は表示されてしまいますね。

これだと一覧感がない。
これに対処しようとちょっとだけ手をいれました。

本文のいちばん最初に「続きを読む」を持ってくる

これだけです。
ただし、最初に「続きを読む」を持ってくるだけでは、いざ公開したときに無効にされて「続きを読む」を設置してないことになってしまいます。

手前に中身のない「続きを読む」は自動的に消されてしまう

そこで「続きを読む」のある段落よりひとつ手前にも段落を用意し、その中には「全角スペース」を置くことで中身があるフリをさせました。

<p>ここに全角スペース</p>
<p>ここに続きを読むのはてな記法</p> 

で、このままだと続きを読むの手前の全角スペースが不自然な段落をつくってしまい不自然になっちゃうので、CSSでなかったことにしちゃいます。

<p style="display:none;">ここに全角スペース</p>
<p>ここに続きを読むのはてな記法</p>
display:none; はそこにあるんだけど表示しないという指示を出しています

これで完成です。
これを全記事に対しておこなっておけば、

f:id:vintraw:20161228144615j:plain

このように一覧っぽい感じが出るように。 スマホでも同様です。
トップページも不自然じゃないし、各記事ページも自然な仕上がりになります。
今見ているこのページの冒頭にも上記コードが入っていますが、不自然な段落ははいっていませんね。

劇的なメリットが生まれました。 

1.一覧の状態で

タイトルだけを表示することで、一覧で見たときの訴求力が高まります。
記事というのはタイトルが最も訴求力高いですよね。ほぼタイトルのみでみなさん「見るか見ないか」を決定しているはずです。
不要なものは排除したほうが、かえって視線を分散させずに見てもらいたい部分へ集約できるようになります。
筆者にとっては、タイトルの次に続く冒頭いくらかの本文は見せる必要がないと思っているので、ちょうどいい形におさまりました。

2.管理画面で

ビフォーアフターをお見せします。

f:id:vintraw:20161228145158j:plain

これがビフォー。そして、次がアフターです。

f:id:vintraw:20161228145217j:plain

何が良くなったか、賢明な読者さまはお分かりですね!

そうです、管理画面でも一覧で見やすくなりました
知らなかったのですが「続きを読むボタン」より後ろは、この管理画面一覧でも表示がカットされる仕組みでした。

ブログと記事をつくった本人なら、わざわざ本文冒頭を見せられなくてもどれがなんの記事かなんてわかりますもんね。不要です。
正直、過去記事がかなり探しやすくなりました。

書き手も読み手もうれしいメリットたち。

今回の偶然の発見は、書き手にもうれしいメリットを提供してくれました!

まだブログ開設してから時間が浅く経験値が低いため、トップをアーカイブに自動遷移させることのSEOへの影響はハッキリ見えていないので、もう少し追いかけてみようと思います。

もし同じような考えをもつかたがいらっしゃいましたら、ぜひ一度お試しください。 

このブログでも、ブログ執筆に必要最低限なHTMLとCSSを講座にすると以前書きつつ全然書けていないのでスミマセン…。書きます。
HTML/CSSは軽く知っておくとブログのカスタマイズや記事の装飾が楽しくなるのでおすすめですよ! 

2016 (c) 天田蒼衣 All rights reserved.