WordPressのデフォルトテーマ「TwentyEleven」でトップページを記事の抜粋表示に設定したはいいものの、続きへのリンクが「続きを読む→」なんて味気ない！ということでボタンを設置してみました。ちなみにこれは「twentyeleven」の子テーマを作ってからいじっています。
さて、一からボタンを作るとなると、詳しく知りませんがPhotoshopやIllustratorといった専門のソフトを使わなくてはいけません。素人には簡単なことではありません。そこで、今回は「Css Gradient Button - create css button」つーのを使います。
開くとこんな画面ですね。この中から、自分のサイトのイメージに一番近い色を選びます。これだけでもいいのですが、細かく設定したい方は、左下の「Edit button」をクリックすると、
にょきっと詳細な設定が出てきます。英語ですがなんとなくわかると思います。あまり意味がわからなくても、スライダーをいろいろいじってみると真ん中のボタンがリアルタイムに変化するので大丈夫です。いろいろいじくりながらしっくりくるボタンを作りましょう。
出来上がって、ずーっと下にいくとコードが表示されています。これをコピーして自分のブログに貼付ければいいのですが、すべてコピーするわけではありません。<style type="text/css">のすぐ下の「.button_example〜」から</style>のすぐ上までをコピーします。
.button_example{
border:1px solid #7d99ca; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;width:137px;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: #A5B8DA;
background-image: -webkit-gradient(linear, left top, left bottom, from(#A5B8DA), to(#7089B3));
background-image: -webkit-linear-gradient(top, #A5B8DA, #7089B3);
background-image: -moz-linear-gradient(top, #A5B8DA, #7089B3);
background-image: -ms-linear-gradient(top, #A5B8DA, #7089B3);
background-image: -o-linear-gradient(top, #A5B8DA, #7089B3);
background-image: linear-gradient(to bottom, #A5B8DA, #7089B3);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#A5B8DA, endColorstr=#7089B3);
}
.button_example:hover{
border:1px solid #5d7fbc; background-color: #819bcb;
background-image: -webkit-gradient(linear, left top, left bottom, from(#819bcb), top(#536f9d));
background-image: -webkit-linear-gradient(top, #819bcb, #536f9d);
background-image: -moz-linear-gradient(top, #819bcb, #536f9d);
background-image: -ms-linear-gradient(top, #819bcb, #536f9d);
background-image: -o-linear-gradient(top, #819bcb, #536f9d);
background-image: linear-gradient(to bottom, #819bcb, #536f9d);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#819bcb, endColorstr=#536f9d);
}
ちょうどこの部分ですね。細かいところは作ったボタンによって微妙に違います。これをstyle.cssの
.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 .more-link{」の直後に
display:block; width:8em; float:right;
を書き込めば出来上がりです。
ね？けっこう簡単にかっこいいボタンができあがったでしょ？
