【初心者ブログカスタマイズ】～続きを読むボタン～

どうも。こんにちは。アラサー投資家K2です。初心者で試行錯誤しながらブログのカスタマイズをしていますが、備忘も含めて手順を超簡単に残していこうと思います。

今日は「続きを読むボタンの作り方・カスタマイズする方法」です。

f:id:haitouman:20220226222011p:plain

はてなブログ無料版ですとトップ画面の記事がズラッと順番に並んでいて少し見にくく記事が探しにくいと思います。「続きを読むボタン」を利用する事でシンプルに整理されると思いますので、ぜひご覧ください。

手順①

まずは編集見たまま画面にてここから下については続きを読むというボタンを表示させ切りたい部分で「続きを読む」設定をします。

赤く囲んでいるボタンを押下しますと編集画面に点線が表示されます。

f:id:haitouman:20220226221908p:plain

手順②

以下をコピーする。

/*続きを読むボタン*/
.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;
}

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