「はてなブログ」シンプルな「続きを読む」にカスタマイズ

「続きを読む」ボタンをオリジナル、シンプルにカスタマイズしましょう★

「続きを読む」のつけ方

記事を書いてるときに「続きを読む」を挿入します。

１、「続きを読む」を入れたいところで①を押す 

２、②「＝＝＝＝」が記事内に表示されます。 

表示されました。

続きを読むボタンのカスタマイズ方法

気に入ったデザインのCSSを設定してください。

詳しいコピー・ペーストの方法はこちら

www.enikki.site

大きすぎるので小さめシンプルなデザインを用意しました。

黒角丸「続きを読む」

.entry-content .entry-see-more {
  background-color: #222;
  border-radius: 5px;
  box-sizing: border-box;
  color: rgba(255,255,255,0.9);
  display: inline-block;
  font-size: 0.875em;
  line-height: 20px;
  min-width: 100px;
  text-align: center;
  text-decoration: none;
}

白角丸「続きを読む」

.entry-content .entry-see-more {
  border: solid 1px #222;
  background-color: initial;
  border-radius: 5px;
  box-sizing: border-box;
  color: #222;
  display: inline-block;
  font-size: 0.875em;
  line-height: 20px;
  min-width: 100px;
  text-align: center;
  text-decoration: none;
}

灰ドット角丸「続きを読む」

.entry-content .entry-see-more {
  border: dotted 1px #222;
  background-color: #eee;
  border-radius: 5px;
  box-sizing: border-box;
  color: #222;
  display: inline-block;
  font-size: 0.875em;
  line-height: 20px;
  min-width: 100px;
  text-align: center;
  text-decoration: none;
}

それぞれの個別解説

文字色を変えたいとき

  color: #222;

「#222」　の部分を変えます

　color: #ff0000;

　color: #00ff00;

背景色を変えたいとき

  background-color: #eee;

「#eee」　の部分を変えます

　background-color: #ff0000;

　background-color: #00ff00;

線色を変えたいとき

  border: dotted 1px #222;

「#222」　の部分を変えます

　border: dotted 1px #ff0000;

　border: dotted 1px #00ff00;

線の太さを変えたいとき

  border: dotted 1px #222;

「1px」　の部分を変えます

　border: dotted 2px #222;

　border: dotted 3px #222;

線のデザインを変えたいとき

  border: dotted 1px #222;

「dotted 」　の部分を変えます

　border: solid 1px #222;

すべていっぺんに変えたり

　border: double 2px #ff0000;

うまくいかない場合

・最後の「;」マークはありますか？
・間の「:」はありますか？