ロイヤルノート|ろくでもない知識をきみに。

ろくでもない知識をとにかくかき集めて、どこかの誰かのためにウェブの海へ放り投げているブログ

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

 

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

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

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

検索に不利っぽい?

まあ細かい理屈は置いといて……長期的にみると検索にやや不利っぽいんじゃないかなあという気がしてきました。
わからないですけどね!?
なんとなくです、なんとなく。

そこで、トップページからアーカイブページに自動遷移させるのをとりあえずヤメました。
元の状態に戻ると、「続きを読む」を設置したところより手前は表示されてしまいますよね。

これだと一覧感がない!(スマートさがない!)
という感じがしたため、ちょっとだけ手を加えました。

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

これだけです。
ただし最初に「続きを読む」を持ってくるだけではダメ。

いざ編集保存したとき、または公開処理をしたときに無効にされて「続きを読む」を設置してないことになってしまいます。

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

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

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

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

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

これで完成です。
これを全記事に対しておこなっておくと、現在のウチのトップページみたいな感じになります。

偽装工作だけどトップページとしても不自然じゃない、一覧っぽい感じになりました。

もちろん各記事ページも自然な仕上がりになりますよ。
今見ているこのページの冒頭にも上記コードが入っていますが、不自然な段落ははいっていませんね。

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

1.一覧の状態で

タイトルだけを表示することで、一覧で見たときの訴求力が高まりました。

タイトルは記事全体の中で最も訴求力の高い部分。
ほぼタイトルのみでみなさん「見るか見ないか」を決定しているはずです。

不要な部分をそぎ落として、見せる部分は少なめに引き締めておく。
このほうが視線を分散させずに見てもらいたい部分に集約できるようになります。

2.管理画面で

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

f:id:vintraw:20161228145158j:plain

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

f:id:vintraw:20161228145217j:plain

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

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

記事を書いた本人なら、わざわざ本文冒頭を見せられなくてもどれが何の記事かなんてわかりますもんね。
これで過去記事をぐっと探しやすくなりました。

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

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

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

気になったかたは、ぜひ一度お試しくださいませ。