人生RPG

2児のパパで今年30歳の冒険者(サラリーマン)が日々の生活を通して勇者(自由を手に入れた者)を目指すサクセスブログです。

人生RPG

「続きを読む」をカスタマイズしてホームを見やすくする方法

SPONSORED LINK


皆さんは「続きを読む」機能を使っていますか?
今回は、「続きを読む」機能を使うことによって
・どういったメリットがあるのか
・オシャレで見やすいデザインの「続きを読む」ボタンのカスタマイズ方法

を紹介していきます。

「続きを読む」を設置するメリット

私が設置したいと思った一番の理由は
「ブログのホームを整理できる」
ことにあります。

はてなブログを使っていると、他のはてなユーザーのブログを見ることが多いと思います。
色んなブログがありますが、そのブログホームのページが見やすい人と見にくい人がいますね。
一番の原因は『記事の表示の仕方』だと思います。
記事一覧がパッと見れたら分かりやすく「どんな記事があるのだろう?」と簡単に見れるのでいろんなページを回りやすくなり回遊率が上がります。
しかし、「続きを読む」を設定していないと記事丸ごとホームに載ってしまうのですごい長い表示のページになってしまいます。

これは、無料版ユーザーの話で、有料版(PRO)を使用している方は表示設定ができる様になっています。

私も「有料版にしないと綺麗にできないのかぁー」と諦めていたのですが、調べていくうちに「続きを読む」機能のことをしりました。

記事中(なるべく冒頭)に「続きを読む」を設置することで、ホームのページには「続きを読む」までの文章が表示され、それ以降の文章は隠れる形で表示されなくなります。
これにより、表示される幅も短くなるので、無料版でもホームを整理でき複数の記事が綺麗なデザインにすることができます。

デザイン

私のホームの一部画像です。(スマホ画面)

記事文章冒頭に記事内容の概要(説明)を記入し、「続きを読む」を設置したことにより、分かりやすくコンパクトに表示できています。この画像の下にはすぐ他の記事が紹介されています。
こんな感じでコンパクトになった記事が5つ並んでいます。
スマホの小さい画面でも少しのスクロールで次々色んな記事が見れるので読者にストレスを与えることになりません。

また、「続きを読む」に背景を付けることによってボタン風になるのでインパクトがありわかりやすいデザインになってます。
ボタンの横幅を大きくすることで、ホームのページに表示される記事と記事との区別線の役割も出てきて有料版機能にも負けないホームデザインになりますね。

参考にした記事

www.ituore.com
shunさんはいろんなカスタムを紹介していて、デザインも豊富です。
今回私が使わせてもらっている「続きを読む」デザインも色々パターンがあるので自分の好みのデザインを選べます。 ありがとうございました。


www.yukihy.com
ゆきひーさんの記事では、「続きを読む」のデザインサイズの設定変更コードを使わせていただきました。
以前からゆきひーさんのホームデザインが分かりやすいなーと思っていて私が求めていた「続きを読む」の横幅を画面いっぱいに使う方法が知りたかったので助かりました。
ありがとうございます。

設定方法

今回のカスタマイズはデザインCSSのみでできるので初心者にも簡単と思います。
また、本家コードを少しいじっている部分もあるのでそこは説明も述べます。

手順①

下のコードをコピペ(コピー<複製>&ペースト<貼り付け>)します。

/*続きを読むボタン*/
.entry-see-more {
  display: block;
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  font-weight:bold;
  background-color: #333;
  color: #fff;
  border: 2px solid #333;
  border-radius: 3px;
}
.entry-see-more:hover {
  background-color: #545252;
  border-color: #545252;
  color: #fff;
}

ダッシュボード(管理画面)
  ↓
デザイン
  ↓
カスタマイズ(スパナマーク)
  ↓
デザインCSSに貼り付けます。
画面右のプレビューを確認してください。
「続きを読む」の部分のデザインが変わったとおもいます。
一応マウスを「続きを読む」に合わせてみてホバー機能(色が変化)も正常か確認しましょう。


手順②
下のコードをコピペ(コピー<複製>&ペースト<貼り付け>)します。

.entry-see-more{
    width: 100%;
}

同じくデザインCSSのさっきのソースコードの下に続けて貼り付けます。
画面右のプレビューを確認してください。
「続きを読む」の横幅サイズが画面いっぱいに広がっているデザインになると思います。

このコードの「 width: 100%」の部分は、ゆきひーさんは50%で紹介していたのですが、これは横幅サイズを指定するコードなので100%にして画面いっぱいになるように変更しました。
サイズを指定する場合「〇〇px」という記述もありますが、今回はどのデバイスで見ても自動調整してくれる%を使ったということですね。
これが仮にpx指定なら小さい画面で見たときにはみ出ていたり、大きい画面で見たとき中途半端な位置までしかなかったりとバランスが悪くなります。

以上でカスタマイズは終わりなので、上部の「変更を保存する」をクリックし完了です。

おまけ

コード内の数値を変更することで、好きな背景色や文字色にできるので余裕がある方は自分オリジナルの配色にしても楽しいですね。
html-color-codes.info

まとめ

無料版のブログサービスでも少し工夫してカスタマイズすることで、有料版のようなきれいなデザインにできるということが分かりました。

HTMLやCSSといったカスタマイズは初心者にとって不安でしかないですよね。
でも少しずづチャレンジしていくうちに理解し、知識がどんどん集まってきます。
私は今はてなブログをはじめて1か月ですが、結構理想のデザインになってきています。
ブログデザインは、訪問者(読者)にとっても居心地がいいか悪いかの大切な基準になります。
多くの訪問者に楽しんでもらえるように頑張っていきましょう☆

レスポンシブデザインにするとさらにカスタマイズの幅が広がり簡単にデザイン変更もできるのでこちらの記事もオススメですよ。↓
life-is-rpg.hatenablog.jp