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

えむしとえむふじんがあらわれた

オタクな夫婦が書く日常とか思った事なんかのアレコレに思い出話とか。三人の子持ちです。

スポンサーリンク

【カスタマイズ】コピペするだけ!押した事が感覚的に分かるエフェクト付き「続きを読む」ボタン

ブログカスタマイズ はてなブログ

f:id:mshimfujin:20160724195409j:plain

こんにちは、えむしです。

テーマを変更したことで「続きを読む」のボタンがうまく表示されなくなったので 思い切ってカスタマイズしてみる事にしました。

完成図と参考にしたサイト

f:id:mshimfujin:20160916033118g:plain 挙動はこんな感じです。 うちのサイトのボタンを録画したので下のコードを貼り付けた時の色味とは別です。 下のコードではグレーに仕上がっています。

ボタンを押した時に、ちゃんと押した感じのするボタンにしたくてこちらを参考にして作りました。

参考にしたのはここのmoema

tympanus.net

コード

きちんとcssを勉強するしたわけではないので、もしかしたら必要のない指定をしているかもしていません。 テーマによっては上手く動作しないかもしれないのでご容赦を。

貼り付ける場所はこちら。

f:id:mshimfujin:20160726114748j:plain

cssの欄に以下のコードを貼り付けてください。

/* 続きを読むボタンカスタマイズ */
.entry-content .entry-see-more {
    display: inline-block;
    font-size: 0.875em;
    line-height: 44px; /* Button height */
    min-width: 176px; /* Button width */
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    background: #323232; /* 背景色 */
    border: solid 2px #f4f4ed; /* ボーダー色 ボーダーが要らなければこの行を削除 */
    color: #fff; /* 文字の色 */
    vertical-align: middle;
    position: relative;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
}

.entry-content .entry-see-more:focus {
    outline: none;
}
.entry-content .entry-see-more::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    bottom: -15px;
    right: -15px;
    background: inherit;
    z-index: -1;
    opacity: 0.4;
    -webkit-transform: scale3d(0.8, 0.5, 1);
    transform: scale3d(0.8, 0.5, 1);
}
.entry-content .entry-see-more:hover {
    -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    color: #ECEFF1; /* カーソルを重ねた時の文字の色 */
    background-color: #5b5b5b; /* カーソルを重ねた時の背景色 */
    border:solid 2px #a4a4a4; /* ボーダー色 ボーダーが要らなければこの行を削除 */
    -webkit-animation: anim-1 0.3s forwards;
    animation: anim-1 0.3s forwards;
}
.entry-content .entry-see-more:hover::before {
    -webkit-animation: anim-2 0.3s 0.3s forwards;
    animation: anim-2 0.3s 0.3s forwards;
}
/* アニメーション部分 */
@-webkit-keyframes anim-1 {
    60% {
        -webkit-transform: scale3d(0.8, 0.8, 1);
        transform: scale3d(0.8, 0.8, 1);
    }
    85% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes anim-1 {
    60% {
        -webkit-transform: scale3d(0.8, 0.8, 1);
        transform: scale3d(0.8, 0.8, 1);
    }
    85% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@-webkit-keyframes anim-2 {
    to {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes anim-2 {
    to {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

汎用性を考えて、この上の設定では初期の背景色を濃いめのグレーにしておきました。 お好みで変更してください。

テーマを変更した理由

サイトの直帰率が85%なんて言う酷い事になっていたので 直帰率の改善対策にこちらを導入したくなって moonnote.hateblo.jp 思い切ってテーマを「Innocent」に変更しました。 もう少しスッキリ見せたいので、これも手が入れられるならいつか手を入れてみたいなー。

テーマをSpireaからInnocentに変えると cssの記述が不完全だったせいでいくつか表示崩れがありました。 続きを読むボタンもそのうちの一つでした。

本当はナビゲーションバーを変えようと思って色々と見て回っていたんですけどお手軽にできるこちらからに。

ではでは、また次の記事で。

CSSに詳しいブロガーさんがよく紹介されているオススメ解説本。

スポンサーリンク


2週間無料です!
まずはお試しあれ〜!

ベネッセコーポレーション 進研ゼミ・こどもちゃれんじ

その他
PVアクセスランキング にほんブログ村