ずいぶん長々とした記事が続いたので、今日はさくっと、「続きを読む」をCSSでボタンにする方法をご紹介します。

「続きを読む」のCSS〜Twenty Ten メイン部分のCSSカスタマイズ（6）で、「続きを読む」を画像に置き換える方法などを書きましたが、今回はCSS3をつかってカラフルなボタンをつくります。

基本のCSS

全ての色のボタンに共通するCSSです。

.entry-content .more-link{
   display: inline-block;　/*　ブロック要素のように表示　　*/
   margin-top: 1em;
   padding: 8px;　/*　余白　　*/
   float: right;　/*　ボタンを右に　　*/
   text-decoration: none;
   line-height: 1;
   font-weight: bold;
   color: #FFF;
   text-shadow: 0 -1px 1px rgba(0,0,0,0.25);　/*　テキストに影をつける　　*/
   border-radius: 5px;　/*　ボタンを角丸に　　*/
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;　/* Firefox用 */ 
   -webkit-box-shadow: 2px 2px 4px rgb(122, 120, 122);　/*　ボタンに影をつける　Safari,Google Chrome用 */ 
   -moz-box-shadow: 2px 2px 4px rgb(122, 120, 122);　/* Firefox用 */ 
   box-shadow: 2px 2px 4px rgb(122, 120, 122);
   background: url(gradient.png) repeat-x;　/*　グラデーション　　*/　　
}

.more-link .meta-nav{
   display: none;　/*　続きを読むの次の→を消す　　*/
}

「display: inline-block」でmore-linkをブロック要素のように表示させ、paddingで余白をとっています。「display: block」にして、幅を指定する事もできますが、paddingと同時に指定するとIEでの表示に響きますので、この方法にしました。余白を変える事で、ボタンの大きさが変わります。

「text-shadow」でテキストに影をつけています。

「border-radius」でボタンを角丸にします。この数字を変えてあげるといろいろな角丸が作れます。「-webkit-border-radius」 「-moz-border-radius」はそれぞれブラウザに対応させるためのものです。まだCSS3に完全対応していないブラウザがありますのでこのような指定になります。

「box-shadow」でボタンに影をつけています。こちらも同様にブラウザ用の指定がしてあります。

背景に透過pngを指定してグラデーションをかけたような表現をつくります。

各色のCSS

今回は黒、ピンク、水色、グリーン、赤、オレンジ、黄色の7色をご用意しました！それぞれ、マウスオーバーのときの色も変わるようになっています。先ほどの基本のCSSにお好みの色の部分を足してお使い下さい。

色の見本です。

CSSです。

/*　黒　　*/
.entry-content .more-link{
   background: #000;	
}
.entry-content a:hover.more-link {
    background: #333;   
}

/*　ピンク　*/
.entry-content .more-link{
	background: #FF5BC1;
}
.entry-content a:hover.more-link{
    background: #E34FAC;
 }

/*　水色　　*/
.entry-content .more-link{
	background: #00BEC0;
}
.entry-content a:hover.more-link{
    background: #009A9C;
 }

/*　グリーン　*/
.entry-content .more-link{
	background: #8FC100;
}
.entry-content a:hover.more-link{
    background: #78A400;
 }

/*　赤　*/
.entry-content .more-link{
	background: #F32F07;
}
.entry-content a:hover.more-link{
    background: #D02806;
 }

/*　オレンジ　*/
.entry-content .more-link{
	background: #FB9A02;
}
.entry-content a:hover.more-link{
    background: #E08902;
 }
 
/*　黄色　*/
.entry-content .more-link{
	background: #FCDE38;
}
.entry-content a:hover.more-link{
    background: #EFC329;
    }

基本色と、マウスオーバーのときの暗めの色を指定しているだけですので、お好みの色に変えて、色々なボタンを作ってみると面白いと思います。

透過PNGもご一緒にどうぞ。
透過PNGのダウンロード

IEへの対応

CSS3をがっつりと使っているので古いIEには対応していません。（IE9のみになります。）角丸、シャドウなどが無視されて、ただのカラーの四角いボタンになります。