コピペ一発！はてなブログの続きを読むボタンをめっちゃオシャレにカスタマイズ！

ブログのカスタマイズってこだわると本当に終わりがないですね。

どうも、shunです。

今日ははてなブログのPC版の続きを読むボタンをめっちゃオシャレにカスタマイズしちゃいたいと思います！

なんとなく、続きを読むボタンって手を抜いてしまいがちなんですよね。

なので、コピペだけでそこそこオシャレになったらと思って色々作ってみました。

PC版であることが前提なので、スマホでチェックしている人はあとでPC版でも確認していただけると嬉しいです！

コードを貼る場所

コードを貼る場所は、デザインに入って、デザインCSSの中に貼り付けて貰えばOKです。

枠線

まずは普通に枠線のついたボックスです。

これだけでも見やすくなりますね。

続きを読む

コピペコードはこちら↓

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

色つきのブロック

こちらもシンプルでいいですね。

非常にわかりやすいです。

続きを読む

コピペコードはこちら↓

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

ホバー時に破線に変わる 

ここからは少し動きを出していきますよ。

ここではマウスをのせたときに、枠線のスタイルが変わります。

続きを読む

コピペコードはこちら↓ 

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

.entry-see-more:hover {
  border-style:dashed;
}

ホバー時に枠線が重なる

次はマウスをのせると、いい感じに枠線が重なります。

おしゃれや。

続きを読む

 コピペコードはこちら↓

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

.entry-see-more:after {
  position:absolute;
  content:'';
  width:100%;
  height:100%;
  top:3px;
  left:3px;
  border: 2px solid #333;
  opacity:0;
}

.entry-see-more:hover:after {
  opacity:1;
}

ホバー時に内側に枠線が出る 

こちらも枠線ですが、今度は内側に出てくるタイプ。

続きを読む

 コピペコードはこちら↓

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

.entry-see-more:after {
  position:absolute;
  content:'';
  width:96%;
  height:80%;
  top:2px;
  left:2px;
  border: 2px solid #333;
  opacity:0;
}

.entry-see-more:hover:after {
  opacity:1;
}

色が変わる

こちらは割とシンプルに色が変わるボックスです。

続きを読む

 コピペコードはこちら↓

/*続きを読むボタン*/
.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 {
  display: block;
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  font-weight:bold;
  position: relative;
  color: #fff;
  background:#333;
  border: 2px solid #333;
  z-index:2;
  overflow: hidden;
  transition: 0.2s;
}

.entry-see-more:hover {
  color:#333;
}

.entry-see-more:after {
  position:absolute;
  content:'';
  width:100%;
  height:100%;
  top:-100%;
  left:0;
  z-index:-1;
  transition: 0.2s;
}

.entry-see-more:hover:after {
  top:0;
  background:#fff;
}

背景が左上から降りてくる

さっきの左上から来るバージョンです！

続きを読む

 コピペコードはこちら↓

/*続きを読むボタン*/
.entry-see-more {
  display: block;
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  font-weight:bold;
  position: relative;
  color: #fff;
  background:#333;
  border: 2px solid #333;
  z-index:2;
  overflow: hidden;
  transition: 0.2s;
}

.entry-see-more:hover {
  color:#333;
}

.entry-see-more:after {
  position:absolute;
  content:'';
  width:100%;
  height:100%;
  top:-100%;
  left:-100%;
  z-index:-1;
  transition: 0.2s;
}

.entry-see-more:hover:after {
  top:0;
  left:0;
  background:#fff;
}

色々頑張ったやつ

最後に色々頑張ってみました。

大変だった。。。

続きを読む

 コピペコードはこちら↓

/*続きを読むボタン*/
.entry-see-more {
  display: block;
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  font-weight:bold;
  position: relative;
  color: #333;
  z-index:2;
  overflow: hidden;
  color:#fff;
  background:#333;
}

.entry-see-more:hover {
  color:#333;
  background:#fff;
  transition:all 0.5s;
}

.entry-see-more:before,
.entry-see-more:after{
  position:absolute;
  content:'';
  width:0%;
  height:0%;
  transition:all 0.5s;
  opacity:0;
}

.entry-see-more:before {
  top:0;
  left:0;
  z-index:-1;
  border-top: 2px solid #333;
  border-left: 2px solid #333;
}
  
.entry-see-more:after {
  bottom:0;
  right:0;
  z-index:-1;
  border-bottom: 2px solid #333;
  border-right: 2px solid #333;
}

.entry-see-more:hover:before,
.entry-see-more:hover:after {
  width:100%;
  height:100%;
  opacity:1;
}

まとめ

いかがだったでしょうか？

簡単におしゃれになるので、よかったら皆さんお試しあれ。

以上！