はてなブログのトップページに、記事の全文を出さない方法
はてなブログのトップページは、デフォルトのままだと記事の全文が表示されます。
そのままだと先頭の記事が全画面を占めてしまいます。
でも、できれば複数の記事を紹介したいわけです。
最も簡単な方法は記事に「続きを読む」を設定し、以降の記事内容を閉じてしまうことです。方法はとても簡単で、はてなブログの場合
このアイコンをクリックすると、moreタグが記事に追加されます。そこが「続きを読む」の起点となり、以降の記事はトップページに表示されなくなります。
ただ、設定してみると微妙なんですよね。
問題は「続きを読む」がしょぼい文字列リンクだったことです。いやー、これは目立たせないとダメっしょ？ みたいな。読者、そのリンクに気づかずに帰っちゃうよ？ みたいな。
というわけで、続きを読む、を目立たせる方法を探しました。
「続きを読む」を目立たせる方法
同じことを考える人は多いようで、すでに先人はたくさんいます。分かりやすかったのは以下のサイト。
ここで紹介されている「ノーマルタイプ」のサンプルを以下にぺたっと貼り付ければOKとなります。
「はてなブログの設定＞デザイン＞カスタマイズ（スパナのアイコン）＞デザインCSS」
他サイトの内容を紹介するだけで終わるのも何なので、ここでは上記のコードのカスタマイズ方法について紹介します。
「続きを読む」を目立たせる方法、のカスタマイズ方法
基本的に、いじって意味がある部分は以下のとおりです。
ボタンが大きすぎる、と思うのなら、width, height, font-sizeを小さくしましょう。ボタンの丸み系の設定は、30pxだとかなり丸くなるので5pxあたりで止めると、少しだけ設定できます。
※１の色は以下のサイトを見て、その色にあったものをコピーすればよいです。
私が個人的に設定したのは、以下のとおりです。
設定してみて、違いを確認してみるといいかもしれません。
わりと気に入る設定を見つけたのですが、しかし、私は使いませんでした。それは別の方法で、トップページの記事表示を制限する方法があったからです。
トップページの記事表示を制限する、別の方法
それはarchiveページを開くことです。ちょうどいい感じに、省略した記事を表示してくれます。具体的には
という感じに表示されます。方法はいろいろとあるようで「はてなブログ archive」と検索すると、先人たちの叡智を確認できます。
とりあえず、私が採用したのは以下のページ。
ここのサイトにある「方法①ブログタイトルのリンク先をarchive形式に変更」のコードを以下に貼り付けます。
「はてなブログの設定＞デザイン＞カスタマイズ（スパナのアイコン）＞フッタ」
これは特にカスタマイズするものではないので、そのままで貼り付けでOKです。この状態でブログタイトルのリンクをクリックすると、archiveページに飛ぶようになります。
利用者の動線としては「Google検索から各記事にくる＞興味を持てば、ブログタイトルをクリックでトップページ確認」という流れかと思いますので、当面は充分です。
はてなブログのカスタマイズはいろいろあるみたいなので、他にも調べていきたいものですね。
