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

通常はピンク枠のように「タイトル」の続きを読むとなっています。
この「続きを読む」をCSSでカスタマイズしていきます。
出来上がりイメージはこんな感じです。

参考サイト
http://inosh.jp/keni-top-page-customize/
まず、index.phpと、archive.phpから次のコードを探します。
1 2 3 4 |
<!--本文抜粋--> <?php the_excerpt(); ?> <p class="link-next"><a href="<?php the_permalink() ?>">「<?php echo(get_the_title('', '', false)); ?>」の続きを読む</a></p> <!--/本文抜粋--> |
上記コードをカスタマイズします。
1 2 3 4 5 6 |
<!--本文抜粋--> <div id="top_entry_description"> <?php the_excerpt(); ?> <p class="link-next"><a href="<?php the_permalink() ?>">続きを読む</a></p> </div> <!--/本文抜粋--> |
続いてCSSの編集にて、下記の記述をします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
/* 抜粋部分 */ #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+αを参考にホバーエフェクトを変えてみましょう。