思わず押したくなるような「続きを読む」ボタンを実装

スポンサーリンク

抜粋記事表示に必要な「続きを読む」というリンク。Twenty Seventeenのデフォルトではシンプル過ぎて味気ないので、せっかくなのでボタン風にしてブログに溶け込むように、かつ押してもらえるようなデザインにカスタマイズしてみます。

スポンサーリンク

このカスタマイズの狙い

一般的なブログのレイアウトでは、記事一覧ページで抜粋表示にした場合抜粋文を表示した後に「続きを読む」というリンクを表示するのがスタンダードです。記事のタイトルをクリック/タップすれば記事に飛ぶので、別に「続きを読む」のリンクは必要ないという派の方もおられます。ですが個人的にはあったほうがブログらしいし、記事を読んでもらえる確率も上がるような気がします。このTwenty Seventeenのテーマに合ったリンクのデザインを考えてみます。

スポンサーリンク

ボタン風に表示してみる

デザイン的にもいい感じで、サイトに訪問してくれた方が押してくれるようなボタンを表示したいです。色んなサイトを参考にしてとりあえずやってみました。

content-excerpt.phpを編集

抜粋表示なので、今回はcontent-excerpt.phpを編集してみます。<div class=”entry-summary”>という部分が抜粋表示に関する部分なので、ここを編集します。そしてstyle.cssにも記述をしてデザインを整えます。以下のような記述をしてカスタマイズします。

HTML

<div class="entry-summary">
<?php echo mb_substr(get_the_excerpt(), 0, 130); ?>...
<br>
<br>
<Div Align="right"><a href="<?php the_permalink(); ?>"><span class="readmore"><i class="fa fa-check-square"></i>&nbsp;Read More</span> </Div></a>
</div>

CSS

.readmore {
    padding: 0.3em 0.5em 0.3em 0.5em;
    margin: 2em 0;
    background: #4682b4;
    border: solid 1px #4682b4;
    border-radius: 5px;
	box-shadow: 2.5px 5px 10px rgba(0,0,0,0.25);
}
.readmore p {
    margin: 0; 
    padding: 0;
}

.entry-summary a{
    color: #FFF;
}
.entry-summary a:hover{
    color: #FFF;
}

.entry-summary a:hover .readmore {
    background: #43a0d5;
    border: solid 1px #43a0d5;
	box-shadow:none
}
スポンサーリンク

編集結果

まずはHTMLで抜粋文を130文字に設定しました。その後「…」という記号が表示され、改行して「続きを読む」ボタンが出るようにしています。

ちょっとかっこつけて英語で「Read More」という表示にしてみました。文の前にはFont Awesomeを使ってチェックマークを付けて、バランスを考えて右揃えにしています。そしてブログのデザインに合わせて青っぽい色にしています。影を付けて立体的に、カーソルを合わせると光って、影が消えてボタンを押す感じのギミックを付けてみました。

まとめ

Twenty Seventeenのデフォルトの「続きを読む」ではちょっとシンプル過ぎて浮いていて、色々プラグインも試しましたがしっくりくるものがなかったので、自力でカスタマイズしてみました。一応満足いくボタンができました。これでちょっとブログが華やか（？）になった気がします。それぞれのブログのデザインがあるのでこのまま使っても合わないかも知れませんが、よかったら参考にしてみてください。

コメント