2013/10/31  17 Shares

Stinger「続きを見る」ボタンをカスタマイズしてクリック率アップ

続きを見るボタンをカスタマイズ

Stingerシリーズのトップページ、記事一覧部分に表示されている「続きを見る」ボタンをカスタマイズしてみましょう。

右寄せにし、さらにグラデーションをかけてみました。グラデーション部分はIEを全く無視しておりますのでごめんなさい。色は小見出し(h3)で使っている緑色(#22ac38)をベースにしました。

home.php の改造

単に右寄せする方法は公式サイトで@ENJILOGさんが回答しています。

変更箇所

僕は該当部分の記述をごっそり変更しました。

変更前

<p class="motto"><a class="more-link" href="<?php the_permalink() ?>">続きを見る</a></p>

変更後

<div class="motto_link_box"><p><a href="<?php the_permalink() ?>">続きを見る</a></p></div>

<p>と<a>からclassを取り除き、かわりにdiv要素に「motto_link_box」というクラスを適用してそこに記述しています。

class名にセンスがないのはご了承ください……

改造前の状態を保存しておきましょう

今回変更する部分は一行だけですが、すぐ元に戻せるようバックアップしておきましょう。

「home.php」を丸ごとテキストエディタにコピペしておけばOKです。ダウンロードしたテーマファイルを保存してあるなら不要ですが、バージョンアップで中身が変更される可能性もあるので、必ず同じバージョンを使ってください。

CSSの改造

cssはこのように設定しました。

.motto_link_box{
	background-color: #22ac38;
	border-radius: 5px;
	width: 150px;
	float : right;
	text-align: center;
	margin: 10px 10px 20px 0;
	position: relative;
	background: -moz-linear-gradient(top, #7acd88, #22ac38);
	background: -webkit-gradient(linear, left top, left bottom, from(#7acd88), to(#22ac38));
	border: 1px solid #197b28;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8),
                    inset 1px 0 0 rgba(255, 255, 255, 0.3),
                    inset -1px 0 0 rgba(255, 255, 255, 0.3),
                    inset 0 -1px 0 rgba(255, 255, 255, 0.2);
}

.motto_link_box p{
	margin: 3px auto;
}

.motto_link_box a {
	color: #fff;
	text-decoration: none;
	font-weight: normal;
	font-size: 95%;
	margin: 0;
}
.motto_link_box a:hover {
	color: #ffd700;
	text-decoration: none;
}

右寄せ指定

公式サイトと同じく、「float:right」をつけて右寄せします。

ちなみに、home.phpにはフロート解除の記述がありますので、改めて記述する必要はありません。

グラデーション

グラデーションをかけているのは、この部分。

background: -moz-linear-gradient(top, #7acd88, #22ac38);
background: -webkit-gradient(linear, left top, left bottom, from(#7acd88), to(#22ac38));

ちょっと物足りないので、1pxの枠を表示。

border: 1px solid #197b28;

立体感を演出するために、1pxのハイライトをつけて少し派手にしています。

box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8),
            inset 1px 0 0 rgba(255, 255, 255, 0.3),
            inset -1px 0 0 rgba(255, 255, 255, 0.3),
            inset 0 -1px 0 rgba(255, 255, 255, 0.2);

緑色が嫌い、ブログのテーマカラーにそぐわない、という場合は指定色を変更してください。

ベースの色、ちょっと薄い色(グラデーションの上部分)、ちょっと濃い色(ボタン枠)の3パターンで構成すると綺麗に仕上がります。

オリジナルCSSには余分な記述があります

「stinger3ver20131016」を使用していますが、続きを見るボタンを装飾しているのはcssのこの部分。

/*記事を読む*/

.motto a {
	color: #FFF;
	text-decoration: none;
	background-color: #f3f3f3;
	width: 90px;
	color: #666666;
	text-align: center;
	display: block;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
	font-weight: normal;
}
.motto a:hover {
	color: #FFF;
	text-decoration: none;
	background-color: #FFAAAA;
	color: #FFF;
	text-align: center;
	display: block;
}

「color」が2つあります。この状態では8行目と21行目の設定が優先されるので、表示に問題はありません。気になる方は上記の4行目と18行目を消しておきましょう。

最新版では修正されているかも。

サイドバーの「もっと見る」ボタンを削除

サイドバーの新着情報欄にある「もっと見る」リンク。記事一覧ページではなくTOPページへのリンクなので、不要と思い削除しました。

「sidebar.php」のこの部分です。

<p class="motto"> <a href="<?php echo home_url(); ?>/">→もっと見る</a></p>

サイトマップへのリンクに変更するのも良いでしょう。

まとめ

緑色にしたのはそれなりに理由があるのですが、機会があればまたご説明します。

今回のカスタマイズは、TOPページにアクセスしてくれた方が迷わず該当の記事へ行けるよう誘導するのが目的です。サムネイル画像やタイトルからも記事へ飛びますが、クリックできるかどうかわかりません。

ボタンがあれば、カーソルをウロウロさせることなく、「ここをクリックすれば読める」というのが一目でわかります。

テーマ自体がカラフルすぎたり、ボタン自体を派手にしすぎると逆に目立ちません。バランスを考えて設定してみてください。

それでは、また。

改良点の追記

よく考えたら、このままではテキストだけクリックできてボタン全体を押すことができません。cssに一行追加して改善しました。

.motto_link_box a {
	color: #fff;
	text-decoration: none;
	font-weight: normal;
	font-size: 95%;
	margin: 0;
	display: block;
}