いがちゃん’s雑記帳 ~ 能天気で天然な男 ~

プライベートや買い物していいもの見つけた時♪

続きを読むボタンを設置する方法!!

続きボタン

続きボタンがあると見た目もよく、使いやすいと思ったのでネットで調べ、
ど素人でもすぐ出来そうなのを紹介します。

●基本CSS
下記のコードを「デザイン」⇒「カスタマイズ」⇒「デザインCSS」にコピペする。

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

.entry-content .entry-see-more:hover {
    background-color: #555;
    color: rgba(255, 255, 255, 0.9);
}


●サンプル

1. アイコンを表示

続きを読む

CSS

.entry-content .entry-see-more::before {
    content: "\f0a9";
    display: inline-block;
    font-family: FontAwesome;
    margin-right: 7px;
}

::before 擬似要素で「続きを読む」の前にアイコンを表示するデザインです。
margin-right はアイコンと「続きを読む」の間隔になります。
表示できるアイコンの一覧と対応する番号 \f*** は以下のページを参照して下さい。

fontawesome.io

参考にした記事はこちらです。
ありがとうございます。

他にも色々なパターンがあるので下記のページを参照してみてください。

moonnote.hateblo.jp


ウェブログ ブログランキングへ