Templates for SLMaMe

以前ご紹介したカスタマイズで、「続きを読む」をボタン画像にしました。これだと「続きを読む」を他の文字列にしたい時に画像を作り直すしかありません。

現在、当ブログでカスタマイズしているテンプレートは出来上がったら公開するつもりでいるので、この部分を見直すことにしました。文字のないボタン画像を背景にして、その上にテキストリンクを表示させたいと思います。

画像を作成する

今回用意する画像はこちら。



「続きを読む」以外の文字列にしてもはみ出さないよう、横幅はある程度余裕を持たせた方が良いでしょう。

CSS テンプレートに手を加える

以前カスタマイズした部分を、以下のように修正。

a.acontinues {

   display: block;

   width: 170px;

   height: 45px;

   margin: 20px 0 0 0;

   padding: 10px 0 0 0;

   overflow: hidden;

   font-weight: bold;

   text-align: center;

   background: url(ボタン画像のURL) no-repeat;

}



a.acontinues:link, a.acontinues:visited {

   color: #333;

   text-decoration: none;

}



a.acontinues:active, a.acontinues:hover {

   color: #009933;

   text-decoration: none;

}

これで、「続きを読む」がいつでも変更できるようになりました。文字列だけでなく、リンク色やフォントサイズも好みのものに変更することができます。