休日ぶらぶら散歩ブログ

休日ぶらぶら散歩ブログ

探検、散歩、購入した物などをツラツラ書いていきます。

【はてなブログ】記事をタイトル一覧方式にした方がいい理由と方法【初心者向け】

はてなブログに投稿し始めてブログを本格的に始めようとしている人向けの記事。
f:id:cb125250zzr250:20210130133123j:plain

今回はタイトル一覧方式にした方がいいというテーマです。

前置き

 

自分のブログがどう見えているのかは自分用に日記としてつけている人以外なら気になると思います。

 

まだ見たことがない人はパソコン・スマートフォンの両方から自分のブログがどのようにインターネット上に表示されているかを確認した方がいいです。

 

ユーザーファーストなサイト構成とは

 

俺の推しブログのましゅろぐを例に見ていきたい。

スマートフォン上でサイトにアクセスしたところトップページは綺麗に見えておりわかりやすい。

 

参考画像

スマートフォンで見たブログ
f:id:cb125250zzr250:20210130115706j:plain


こちらはスマートフォンから見たましゅろぐのサイトです。

 

タイトル一覧形式のメリットとは?

この通りトップページはタイトルと数行の文のみで【タイトルを確認して読みたい記事を選択する】事が容易です。

 

あの人のこの記事クソ面白かったからまた見たいな〜って事が私はあるのでトップページがこうして日付とタイトルで分かれていると記事が探しやすくて助かります。

 

では記事一覧方式ではないサイトとは?

こちらもましゅろぐを参考にして見ていきたい。実はスマートフォンとPC上でサイトの見え方が違うという事がはてなブログではあるのだ。

 

どのように違うか確認していこう。

 

PC・iPad上で見たブログ

f:id:cb125250zzr250:20210130115731j:plain

こちらがトップページとなる。

スマートフォンとの見え方の違いに気づけるだろうか。

タイトルのその下に記事が続いてしまっているのだ。

しかもこれが【数行】ではなく【全ての内容】が続いているのだ。

 

トップページ上で記事が続いてると何が悪い?

つまり過去の記事を見たい場合スクロールにてページを送らなければいけないという作業が発生する。

f:id:cb125250zzr250:20210130132522j:plain

例えば私の好きな過去記事ドッヂボール編を読み返したい時に約2回分の記事をスクロールして下方へアクセスしないとこの記事が読めないのだ。

 

これは正直大変な作業である。

アクセス解析を見た時に【トップページにのみアクセスが集中】かつ【トップページから離脱】が起きてしまっている場合恐らくこの現象が起きている。

 

ユーザーはこの人のいろんな記事が見たい!と思ってもズラズラとページを送らないと過去にアクセスできないからだ。

仮にブックマークしていてもアクセスするたびにまた最新記事から読み進めなくてはいけないのでユーザーが離れる原因となる。

 

かなり面白くて過去の記事も全部見たい!と思うブロガーは多く楽しく読ませてもらっている。

ところがサイトがこの構成だった時アクセスするたびにページを送る作業が発生してしまいそのうち見なくなってしまうのだ。

 

すごく勿体無いと思います。

 

ではどのように解決すればいいのか?

少しブログ初心者には難しく感じる作業ですがソースコードを埋め込む必要がある。

豆知識
ソースコードとは【どんな動作をさせたいか、どんな表示にするか】等が書かれているテキストの事です。

ソースコードはてなブログにぶち込む事で自分の理想の形へとカスタムする事ができます。

STEP1ソースコードを自分用にカスタム

使用するソースコードはコチラ

<script type="text/javascript">
if( location.href == 'https://www.kanzaki3.com/'){
location.href='https://www.kanzaki3.com/archive';
}
</script>
<noscript>
<p><a href="https://www.kanzaki3.com/archive">休日ぶらぶら散歩ブログ</a></p>
</noscript>

 これをコピーして使うのですが、これはあくまで【私のブログ】用にカスタマイズされています。

これをこのままコピーしてもあなたのブログでは作動してくれません。

ではどこをカスタムすればいいのか?
<script type="text/javascript">
if( location.href == 'あなたのブログのアドレス/'){
location.href='あなたのブログのアドレス/archive';
}
</script>
<noscript>
<p><a href="あなたのブログのアドレス/archive">あなたのブログのタイトル</a></p>
</noscript>

....カスタム出来たでしょうか。

カスタムしたものをコピーして下さいね。

STEP2はてなブログに貼り付ける。

ではどこにこのソースコードを打ち込むのか。

iPhoneiPad向けの方法

このいかにも設定っぽい歯車マークをタップ。

f:id:cb125250zzr250:20210130130045j:plain

設定画面に飛びます。

f:id:cb125250zzr250:20210130130125j:plain

設定画面と確認しましたら次に詳細設定をタップ。

f:id:cb125250zzr250:20210130130222j:plain

【headに要素を追加する】というところにペーストします。
もう一度画像の緑マーカー部分がご自身のサイトのアドレスとご自身のサイトの名前になっているか確認しておきましょう。

f:id:cb125250zzr250:20210130130542j:plain

最後に間違いなければ変更ボタンを押して終了です。

PCの場合

ほとんど同様です。
1番初めの設定までの手順のみ異なります。

f:id:cb125250zzr250:20210130130750j:plain

PC上ではこのようになっています。

必ずソースコードが正常に反映しているか確認しよう!

ここまで行ったら必ず確認しよう。

ソースコードは一部違うだけで途端に機能しなくなります。(モノによるけど)
失敗するとただの文字列となるので必ず確認!

f:id:cb125250zzr250:20210130132625j:plain

やったあああああ。成功だああああ。みたいな感じ。

ソースコードをカスタムしだすとなんかプロっぽいよね。
結構簡単にできるので自分のブログを見やすくしたい人におススメです。

仮に失敗した場合はよく確認したうえで貼り付けた部分のみを削除しましょう。

すでにソースコードが多数ある人はスペースを多くとって埋め込んだ部分をわかりやすくするなど工夫してもいいと思います。

はてなブログ運営シリーズ
www.kanzaki3.com
www.kanzaki3.com
www.kanzaki3.com
www.kanzaki3.com
www.kanzaki3.com
www.kanzaki3.com
www.kanzaki3.com
www.kanzaki3.com
www.kanzaki3.com

おわり