育休男児

1年間育児休暇を取得した男の奮闘記。これからの働き方、DIY、ロードバイクなどの情報も。

WordPress カスタマイズ

[P]【TwentyEleven】続きを読むボタンを簡単にかっこよく設置する方法

投稿日:

WordPressのデフォルトテーマ「TwentyEleven」でトップページを記事の抜粋表示に設定したはいいものの、続きへのリンクが「続きを読む→」なんて味気ない!ということでボタンを設置してみました。ちなみにこれは「twentyeleven」の子テーマを作ってからいじっています。

子テーマについてはこちら

抜粋表示の設定方法はこちら

さて、一からボタンを作るとなると、詳しく知りませんがPhotoshopやIllustratorといった専門のソフトを使わなくてはいけません。素人には簡単なことではありません。そこで、今回は「Css Gradient Button - create css button」つーのを使います。

スクリーンショット_2013_03_13_20_22

開くとこんな画面ですね。この中から、自分のサイトのイメージに一番近い色を選びます。これだけでもいいのですが、細かく設定したい方は、左下の「Edit button」をクリックすると、

スクリーンショット_2013_03_13_20_25

にょきっと詳細な設定が出てきます。英語ですがなんとなくわかると思います。あまり意味がわからなくても、スライダーをいろいろいじってみると真ん中のボタンがリアルタイムに変化するので大丈夫です。いろいろいじくりながらしっくりくるボタンを作りましょう。

出来上がって、ずーっと下にいくとコードが表示されています。これをコピーして自分のブログに貼付ければいいのですが、すべてコピーするわけではありません。<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%;
}

のすぐ後ろに貼付けます。そして、2カ所ある「.button_example」を「.entry-content .more-link」に書き換えます。そして最後に1つ目の「.entry-content .more-link{」の直後に


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

を書き込めば出来上がりです。

ね?けっこう簡単にかっこいいボタンができあがったでしょ?


-WordPress, カスタマイズ
-, ,

Copyright© 育休男児 , 2017 AllRights Reserved.