続きを読むボタンのカスタマイズ | WordPress | 賢威

WordPressテンプレート 賢威の【続きを読む】ボタンのCSSでカスタマイズする方法です。

70454_c

通常はピンク枠のように「タイトル」の続きを読むとなっています。

この「続きを読む」をCSSでカスタマイズしていきます。

出来上がりイメージはこんな感じです。

72_c

 

参考サイト
http://inosh.jp/keni-top-page-customize/

 

まず、index.phpと、archive.phpから次のコードを探します。

<!--本文抜粋-->
<?php the_excerpt(); ?>
<p class="link-next"><a href="<?php the_permalink() ?>">「<?php echo(get_the_title('', '', false)); ?>」の続きを読む</a></p>
<!--/本文抜粋-->

上記コードをカスタマイズします。

<!--本文抜粋-->
<div id="top_entry_description">
<?php the_excerpt(); ?>
<p class="link-next"><a href="<?php the_permalink() ?>">続きを読む</a></p>
</div>
<!--/本文抜粋-->

 

続いてCSSの編集にて、下記の記述をします。

/* 抜粋部分 */
#top_entry_description p {
    margin-bottom:0;
}
 
/* 続きを読むボタン */
.link-next {
    clear:none;
}
 
.link-next a {
    display:inline-block;
    position:relative;
    z-index:2;
    color:#fff;
    text-decoration:none;
    background:#333;
    border:2px solid #333;
    margin-top:10px;
    padding:3px 15px;
}
 
.link-next a:before,
.link-next a:after {
    position:absolute;
    z-index:-1;
    display:block;
    top:0;
    width:50%;
    height:100%;
    background-color:#333;
    content:'';
}
 
.link-next a:before {
    right:0;
}
 
.link-next a:after {
    left:0;
}
 
.link-next a:hover {
    color:#e41858;
    background-color:#fff;
    border-color:#333;
}
 
.link-next a:hover:before,
.link-next a:hover:after {
    width:0;
    background-color:#333;
}
 
.link-next a,
.link-next a:before,
.link-next a:after {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box; 
    -webkit-transition:0.3s;
    -moz-transition:0.3s;
    -o-transition:0.3s;
    transition:0.3s; }
}

以上で設定完了です。

また、上記コードは、扉を開くようなホバーエフェクトになっています。

 

他のホバーエフェクトへ変更する場合、
CSSのみで実装するボタンデザインやホバーエフェクト 20+αを参考にホバーエフェクトを変えてみましょう。

 

私が月100万円以上稼いでいるアフィリエイトの全てを
無料のメール講座で限定公開することにしました。
Sotook!ブランド×トレンドアフィリエイト

なぜ、アフィリエイトだけで月100万円以上を稼げるのか?

そのすべてのメソッドを初心者でも再現できるように実践レベルに落とし込みました。

 

このメール講座では、アフィリエイト初心者だった頃の私が

ゼロから最初の1万円を稼いだ方法

3ヶ月後に10万円稼いだ方法

そして現在まで継続して100万円以上を稼ぎ続けている方法

初心者でも再現できるように一つひとつ丁寧にお伝えしています。

 

さらに期間限定で、私がアフィリエイト初心者の頃に、

40,615円稼いだ全手法

実際に稼いだサイトURLをE-Bookにして無料配布しています。

 

このE-Bookは、非常に再現性が高い手法なので今のうちに入手しておいてください。

 

E-Bookはメルマガ登録後、すぐにお届けしています。

メルマガ登録【無料】

コメントを残す

メールアドレスが公開されることはありません。