Endoo Site

好きなこと、感じたことを、ちょっぴり誰かのために。

【はてなブログ】ブログトップの記事一覧を「続きを読む」以外の方法でスッキリさせてみる

blog-long

今日はPC版の記事一覧をスッキリ表示させる方法を見つけたので紹介したいと思います。

 

コピペするだけでOKなので、良かったら参考にさせて頂いたブログ含め、ご覧ください。どーぞ!

 

記事をズラッと表示させたいという悩み

はてなブログのPC版って、何もしなければトップページにズラッと記事が表示されてしまいますよね?本文がダァーっと表示されて、また違う記事の本文がダァーっと。

 

なんていうか、スマホ版みたいにスッキリとした記事一覧が表示されないんです。

 

で、無知な僕が調べたところ、「続きを読む」っていう機能を使えば、本文たちが丸裸にされず「一部」だけ表示されるようになるみたいです。

 

でも、1つ1つの記事に「続きを読む」を入れていくのは面倒ですし、区切る場所によっては省略された記事の高さがあべこべになってしまいます。どうぞ試してみてください。なんかしっくりきません(笑)

 

話は変わって「ヒトデさん」

ブログを始めてから、ツイッター等でブロガーさんたちの動向をチェックしております。こんな記事の書き方があるんだーなんて、日々勉強させて頂いております。

 

そして、よくチェックしているブロガーさんの1人が、「ヒトデさん」です。

 

▼ヒトデさんのブログ「今日はヒトデ祭りだぞ!」

www.hitode-festival.com

 

普段はスマホ版から見ている「今日はヒトデ祭りだぞ!」ですが、珍しくPCから覗いてみると記事一覧がキレイに表示されてます。

 

おや?僕もこんなふうにしてみたいぞ!?

 

ってことで調べたところ、アーカイブ表示にすることで記事がキレイに表示されるみたいです。(なるほど!)

 

はてなブログのPC版でアーカイブをトップページに指定する方法

なんだか僕もよく理解していないんですが、自分のブログのURLの末尾に「/archive」と入力すれば記事一覧が表示されるみたいです。(おぉぉぉ!)

 

僕の場合、ヒトデさんと同じようにブログタイトルをクリックした時、記事一覧に飛んでほしいので、トップページをアーカイブに指定することにしました。

 

▼参考にさせて頂いたブログ(ありがとうございます!!)

www.ito-tomohide.com

kosumoro2.hatenablog.com

 

さっそくやってみる!

下記のコードをデザイン設定画面のフッターへ入力

 <script>
!function() {
document.querySelector("#blog-title a").href = "/archive";
}();
</script>

 

次にメニューバーなどに「HOME」や「トップページ」へのリンクを貼っている場合は、ブログのURL→アーカイブに差し替える。

 

僕のブログではメニューの中に「HOME」というボタンがあるので、アーカイブのページに飛ぶように差し替えました。

 

悩み解決!!

はてなブログの素晴らしいところは、カスタマイズ方法をアップしてくれている優しい方々がいるということです。

 

本当に感謝です。そして、こんな方法もあるんだ!と気付かせてくれたヒトデさんにも感謝です。

 

また少しずつカスタマイズしていきますね。

 

では。