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

おにメモ

SIerを辞めてフリーランスになったシステムエンジニアのブログ。

はてなブログのトップページに、記事の全文を出さない方法

はてなブログのトップページは、デフォルトのままだと記事の全文が表示されます。

そのままだと先頭の記事が全画面を占めてしまいます。

でも、できれば複数の記事を紹介したいわけです。

最も簡単な方法は記事に「続きを読む」を設定し、以降の記事内容を閉じてしまうことです。方法はとても簡単で、はてなブログの場合

f:id:onipad:20170115111027j:plain

このアイコンをクリックすると、moreタグが記事に追加されます。そこが「続きを読む」の起点となり、以降の記事はトップページに表示されなくなります。

ただ、設定してみると微妙なんですよね。

問題は「続きを読む」がしょぼい文字列リンクだったことです。いやー、これは目立たせないとダメっしょ? みたいな。読者、そのリンクに気づかずに帰っちゃうよ? みたいな。

というわけで、続きを読む、を目立たせる方法を探しました。

「続きを読む」を目立たせる方法

同じことを考える人は多いようで、すでに先人はたくさんいます。分かりやすかったのは以下のサイト。

georges.hatenablog.jp

ここで紹介されている「ノーマルタイプ」のサンプルを以下にぺたっと貼り付ければOKとなります。

はてなブログの設定>デザイン>カスタマイズ(スパナのアイコン)>デザインCSS

他サイトの内容を紹介するだけで終わるのも何なので、ここでは上記のコードのカスタマイズ方法について紹介します。

「続きを読む」を目立たせる方法、のカスタマイズ方法

基本的に、いじって意味がある部分は以下のとおりです。

  • width: ⇛ボタンの幅。
  • height: ⇛ボタンの高さ。
  • line-height: ⇛heightと同じ値にしてください。
  • color: ⇛文字の色(※1)
  • background-color:⇛ボタン背景の色(※1)
  • font-size: ⇛フォントの大きさ
  • -webkit-border-radius: ⇛ボタンの角の丸み
  • border-radius: 5px; ⇛-webkit-border-radiusと同じ値でOK

ボタンが大きすぎる、と思うのなら、width, height, font-sizeを小さくしましょう。ボタンの丸み系の設定は、30pxだとかなり丸くなるので5pxあたりで止めると、少しだけ設定できます。

※1の色は以下のサイトを見て、その色にあったものをコピーすればよいです。

www.colordic.org

私が個人的に設定したのは、以下のとおりです。

  • width: 120px;
  • height: 35px;
  • line-height: 35px;
  • color: #ffffff;/文字色/
  • background-color:#333333;/背景色/
  • font-size: 14px;
  • -webkit-border-radius: 5px;/角丸はここを『30』/
  • border-radius: 5px; /角丸はここを『30』/

設定してみて、違いを確認してみるといいかもしれません。

わりと気に入る設定を見つけたのですが、しかし、私は使いませんでした。それは別の方法で、トップページの記事表示を制限する方法があったからです。

トップページの記事表示を制限する、別の方法

それはarchiveページを開くことです。ちょうどいい感じに、省略した記事を表示してくれます。具体的には

f:id:onipad:20170115111500j:plain

という感じに表示されます。方法はいろいろとあるようで「はてなブログ archive」と検索すると、先人たちの叡智を確認できます。

とりあえず、私が採用したのは以下のページ。

www.ito-tomohide.com

ここのサイトにある「方法①ブログタイトルのリンク先をarchive形式に変更」のコードを以下に貼り付けます。

はてなブログの設定>デザイン>カスタマイズ(スパナのアイコン)>フッタ」

これは特にカスタマイズするものではないので、そのままで貼り付けでOKです。この状態でブログタイトルのリンクをクリックすると、archiveページに飛ぶようになります。

利用者の動線としては「Google検索から各記事にくる>興味を持てば、ブログタイトルをクリックでトップページ確認」という流れかと思いますので、当面は充分です。

はてなブログのカスタマイズはいろいろあるみたいなので、他にも調べていきたいものですね。