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

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

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

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

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

参考サイト
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＋αを参考にホバーエフェクトを変えてみましょう。