読者です 読者をやめる 読者になる 読者になる

プログラマ独女の貯金生活

プログラマをしているアラサー独女。家計簿をつけながら貯金に勤しみます。

はてなブログの続きを読むをカスタマイズ

続きを読むがあまり目立たないので、カスタマイズしました

やりたかったことは

  • 枠で囲む
  • 文字と枠の色を変える
  • マウスを乗せたらなんか動く(適当w)

サンプルコード

entry-see-more というクラスに色々と設定をします

今回は上から降ってくるようなモーションを入れてます

transition: 0.4s;

ここでモーションの速さを調整します

.entry-see-more {
  display: block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  text-decoration: none;
  font-weight:bold;
  position: relative;
  color: #ff99cc;
  background:#FFF;
  border: 1px solid #ff99cc;
  z-index:2;
  overflow: hidden;
  transition: 0.4s;
}

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

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

.entry-see-more:hover:after {
  top:0;
  background:#ff99cc;
}
参考にしたサイト

色々なパターンがあって、とてもわかりやすかったです

www.ituore.com

はてなの本 (NT2X)

はてなの本 (NT2X)