ブログ散歩|はてなブログのオリジナル、カスタマイズ方法&インテリア

部屋のインテリア同様、ブログをお気に入りのオリジナルデザインにカスタマイズ方法を解説。と長くブログを楽しむ、続ける方法を工夫しています。

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

広告

f:id:hachi001:20171228030838j:plain

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

「続きを読む」のつけ方

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

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

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

続きを読むカスタマイズ


表示されました。

f:id:hachi001:20171228005926j:plain

 

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

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

詳しいコピー・ペーストの方法はこちらf:id:hachi001:20171228031151p:plain

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;

うまくいかない場合

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