wordpressのデフォルトテーマtwentyelevenの「Continue reading」ってちょっと地味過ぎると思いませんか。ウェブシュフはグラデーション＆角丸＆影付きの「続きを読む」ボタンに変えてみました。

リンク文字を変える

まず、「Continue reading」を「続きを読む」に変えました。

content.phpの以下の部分をいじります。

<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?>

こんな感じにします。

<?php the_content('続きを読む <span class="meta-nav">⇒</span>', 'twentyeleven'); ?>

リンク文字が「続きを読む」に変わりました。

リンクをグラデーション＆角丸ボタンにする

以前の記事でも紹介したcssgradientbutton.comを使います。

25個のサンプルのうちから好きなものを選んでカスタマイズします。ウェブシュフは、
青色ベースのボタンをチョイス。「preview button」が表示されるので、その左下の「Edit button」をクリックしてさらにカスタマイズ。

ボタンに黒い影をつけたりしたかったので、赤枠で囲った部分をいじりました。

最終的にこんなボタンが完成

次に、Html & css code for gradient buttonの<style type=”text/css”?>と</style?>で囲まれた中身だけをコピーします。具体的には、こんな感じの部分です。

.button_example{
     border:1px solid #26759e;-webkit-box-shadow: #000000 3px 3px 3px;-moz-box-shadow: #000000 3px 3px 3px; box-shadow: #000000 3px 3px 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px; font-family:arial,helvetica,sans-serif; padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #3093c7;
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3093c7), color-stop(100%, #1c5a85));
     background-image: -webkit-linear-gradient(top, #3093c7, #1c5a85);
     background-image: -moz-linear-gradient(top, #3093c7, #1c5a85);
     background-image: -ms-linear-gradient(top, #3093c7, #1c5a85);
     background-image: -o-linear-gradient(top, #3093c7, #1c5a85);
     background-image: linear-gradient(top, #3093c7, #1c5a85);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3093c7, endColorstr=#1c5a85);
}
.button_example:hover{
     border:1px solid #26759e; background-color: #26759e;
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#26759e), color-stop(100%, #133d5b));
     background-image: -webkit-linear-gradient(top, #26759e, #133d5b);
     background-image: -moz-linear-gradient(top, #26759e, #133d5b);
     background-image: -ms-linear-gradient(top, #26759e, #133d5b);
     background-image: -o-linear-gradient(top, #26759e, #133d5b);
     background-image: linear-gradient(top, #26759e, #133d5b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#26759e, endColorstr=#133d5b);
}

これを、twentyelevenとか子テーマのstyle.cssの830行目付近

.entry-content td,
.comment-content td {
    border-top: 1px solid #ddd;
    padding: 6px 10px 6px 0;
}
.entry-content #s {
    width: 75%;
}

の直後に挿入します。そして、.button_exampleを.entry-content .more-linkに書き換えます。すると、下のようになります。（;で改行しています。）

.entry-content td,
.comment-content td {
    border-top: 1px solid #ddd;
    padding: 6px 10px 6px 0;
}
.entry-content #s {
    width: 75%;
}
.entry-content .more-link{
    border:1px solid #26759e;
    -webkit-box-shadow: #000000 3px 3px 3px;
    -moz-box-shadow: #000000 3px 3px 3px; 
    box-shadow: #000000 3px 3px 3px; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px;
    border-radius: 3px; 
    font-family:arial,helvetica,sans-serif; 
    padding: 10px 10px 10px 10px; 
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
    font-weight:bold; 
    text-align: center; 
    color: #FFFFFF; 
    background-color: #3093c7;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3093c7), color-stop(100%, #1c5a85));
    background-image: -webkit-linear-gradient(top, #3093c7, #1c5a85);
    background-image: -moz-linear-gradient(top, #3093c7, #1c5a85);
    background-image: -ms-linear-gradient(top, #3093c7, #1c5a85);
    background-image: -o-linear-gradient(top, #3093c7, #1c5a85);
    background-image: linear-gradient(top, #3093c7, #1c5a85);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3093c7, endColorstr=#1c5a85);
}
.entry-content .more-link:hover{
     border:1px solid #26759e; 
     background-color: #26759e;
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#26759e), color-stop(100%, #133d5b));
     background-image: -webkit-linear-gradient(top, #26759e, #133d5b);
     background-image: -moz-linear-gradient(top, #26759e, #133d5b);
     background-image: -ms-linear-gradient(top, #26759e, #133d5b);
     background-image: -o-linear-gradient(top, #26759e, #133d5b);
     background-image: linear-gradient(top, #26759e, #133d5b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#26759e, endColorstr=#133d5b);
}

最後に、.entry-content .more-link{の直後に以下の3行を挿入します。

display:block;
width:8em;
float:right;

また、以下の部分を

padding: 10px 10px 10px 10px;

このように変えます。

padding: 3px 10px 3px 10px;

すると、こんな感じの「続きを読む」ボタンが出来ました。