エキサイトブログで続きを読む「more」をカスタマイズ

エキサイトブログを書いている時に、よく使う人と使わない人がわかれる[more]機能

a0342241_11260649.png

よく見かける使い方としては、序文であおってから本文にいかせるというパターンでしょうか。
TOPページを見た時に文章が長いとページがすっごく長くなってしまいますよね。
読み込みが重いとユーザーストレスがたまるし、序文だけ書いてきになる人は見てねの方がもしかしていいのかも。。。と今更思ったりします。
公式がめっちゃ宣伝していますがここがわりと分かりやすい例かもしれません。
これもエキサイトブログなんですねー。

Moreのクラスを変更してみる

それでは早速CSSをいじっていきましょう。moreのクラスは一律下記となっています。

class="more-post"

まずは、ボタン自体を右寄せ・中央寄せ

右寄せ

続きを読む
  .more-post {
    float: right;
    font-size: 15px;
  }

中央寄せ

続きを読む
  .more-post {
    font-size: 15px;
    text-align: center;
    display: block;
  }

fontサイズは適宜変更してください。次はもっとボタンぽくしてみましょう。

Moreをボタン化

先ほどのクラスに足して・・・と言いたいところですが、リンクがある場合は、aタグに対して色をつけてあげましょう。

右寄せ+色

続きを読む
  .more-post {
    float: right;
    font-size: 15px;
  }
  .more-post a {
    background:#E15B5F;
    padding: 8px 20px;
    color: #fff;
    border-radius: 3px;
  }

中央寄せ

続きを読む
  .more-post {
    font-size: 15px;
    text-align: center;
    display: block;
  }
  .more-post a {
    background:#E15B5F;
    padding: 8px 20px;
    color: #fff;
    border-radius: 3px;
  }

Hover時の処理

上記までのボタンにカーソルを合わせると、アンダーラインがでてきます。このままでもいいのですが、色が変わったりした方がそれっぽいっですよね。
そんなわけで、もう少しいじってみましょう。

右寄せ+色+hover時色を変更

続きを読む
  .more-post {
    float: right;
    font-size: 15px;
  }
  .more-post a {
    background:#E15B5F;
    padding: 8px 20px;
    color: #fff;
    border-radius: 3px;
    text-decoration: none;
  }
  .more-post a:hover {
    background:#E15B5F;
  }

中央寄せ+色+hover時 透過0.7

続きを読む
  .more-post {
    font-size: 15px;
    text-align: center;
    display: block;
  }
  .more-post a {
    background:#E15B5F;
    padding: 8px 20px;
    color: #fff;
    border-radius: 3px;
    text-decoration: none;
  }
  .more-post a:hover {
    opacity: 0.7;
  }

ボタンデザイン集などもググればあるので、この辺をうまく使ってカスタマイズしてみましょう!

5つの効果で作る、よく使うCSS3ボタンデザインサンプル集
[PR]
名前
URL
画像認証
削除用パスワード
by exblog-tips | 2016-01-05 11:34 | 本文周り | Comments(0)

エキサイトブログをとことん使い倒すブログです。こんなことできないかな?をゆるっと募集中!


by エキブロまん