WordPressネタです。今回紹介するのは、トップページとかでよく見る「続きを読む」っていう各記事へのリンクをカスタマイズする方法です。「続きを読む」っていう文言を変える方法と、画像を使ってボタンをつける方法、さらに、CSSを使ってボタン風にする方法を紹介します。
※moreタグを使っている場合です。テーマによっては、自動で抜粋を生成して「続きを読む」のようなリンクをつくっているものもあります。
「続きを読む」の文言を変える方法
まずは、文言を変える方法です。index.php（テーマによってはloop.phpとかの場合もあります）の中にある<?php the_content() ?>という部分を弄ります。
例えば、「この続きを読む」に変える場合は、<?php the_content('この続きを読む') ?>とします。つまり、表示させたい文言を”（シングルコーテーション）でくくって()の中に入れてやります。
また、デフォルトテーマであるTwenty Elevenであれば、content.phpのなかにある<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?>のところを弄ってやればOKです。
といっても、<!–more–>タグを使っているのであれば、<!--more この続きを読む -->というふうに、moreの隣に半角スペースを空けて、文言を入れてやれば、カンタンに変更できます。この方法であれば、記事ごとに文言を設定することも可能です。
画像を使って「続きを読む」ボタンをつける方法
まずは、画像を準備しましょう。こんなカンジのやつです。
「続きを読む」部分はWordPressから「more-link」というclassを与えられているので、この画像をサーバーにアップロードしてCSSでちょちょってやってやるとOKです。
.more-link {
width: 150px;
height: 50px;
float: right;
text-indent: -9999px;
background-image: url("more_read.png");
background-repeat: no-repeat;
}width・heightは作成した画像に合わせてください。もちろん、画像のURLもアップロードしたところを指定してくださいね。
CSSで「続きを読む」をボタン風にする
では、最後に紹介するのがCSSを使って画像を使わずにボタン風にカスタマイズする方法です。さっきつくったボタンの画像に似せてつくってみます。
CSSはこんなカンジでしょうか。
.more-link {
font-size: 20px;
display: block;
background-color: #39f;
color: #fff;
padding: 15px 0;
width: 150px;
position: relative;
text-align: center;
text-decoration: none;
line-height: 20px;
border-radius: 5px;
box-shadow: 0px 1px 3px #444, inset 0px 2px 3px #fff;
}これだと、こんな風なボタンができます。あ、IEの方はちゃんと表示されないと思います。
続きを読む
あとは、hoverしたときにふわっとするとか色変わったりとかしてやればいいんじゃないでしょうか？
the_excerpt()を使って抜粋を表示している場合
ここまでは、moreタグを使って抜粋を表示していた方の場合を紹介しましたが、みはら.comのようにmoreタグでなく、単純に先頭から○文字を抜粋として表示しているテーマを使っている方もいらっしゃると思います。
そんな方は、<?php the_content() ?>のところを弄ってもダメですので、というか、index.php（loop.php）に<?php the_content() ?>はないと思いますので、また、後ほどカスタマイズの方法を紹介したいと思います。
あ、もし、「続きを読む」のところにclassが割り当てられていたら、今回紹介した方法で文言を変えることはできませんが、デザインだけはカスタマイズできますよ：）
