[R]【Stinger3カスタマイズ】”記事を読む”などのボタンを好みのボタンに変える

motto

Stinger3を導入してからすぐにカスタマイズはしていたのですが、少しカスタマイズを加えたので忘備録として。

そして記事にしてる方も多いのですが自分なりにまとめてみます。

カスタマイズの中では簡単にできるので、試してみてください。

カスタマイズする前に

カスタマイズ系記事には毎度書いていますが、記述を間違えるとレイアウトが崩れたりするので必ずバックアップを取っておいてください。

今回いじるファイルはStyle.css+αなのでバックアップを取っておきましょう。

カスタマイズする箇所

PC・スマホ両方とも. motto aというクラスになっています。Style.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;
}

上記コードをカスタマイズしていきます。

右寄せにする

右寄せにする方法はいくつかありますが、簡単なのは

float: right;

を追加する方法です。

 .motto a {
	color: #FFF;
    float: right;
	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;
}

このように追加するだけで右になります。ただ問題があってfloatさせると要素が浮いているので、別の要素と被ってしまいます。

これを防ぐためにはsingle.phpとhome.phpのコードに

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

このように<div style="clear: both"></div>を記述してあげます。すると他と被ることがなくなります。

参考にした記事はこちら

[browser-shot url="http://www.oh-blog.net/blog/2013/08/18/more-link-right-stinger2/" width="150"]

【Stinger2】「続きを読む」ボタンを右下に設定する方法 | Oh-Blog

ボタンをゆっくり色が変わるようにする

デフォルトではカーソルを合わせると瞬時に文字・背景色が変わります。

これをゆったり変わるようにします。記述させる箇所は先ほどと一緒のStyle.cssのmotto aです。

 .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;
}

ここに

-webkit-transition: color linear 0.3s;
-moz-transition: color linear 0.3s;
-o-transition: color linear 0.3s;

この３行を追加します。するとカーソルを合わせた時にゆっくりと色が変わるようになります。

参考にした記事はこちら

[browser-shot url="http://insight-seo.net/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA/%E3%80%90stinger3%E3%80%91%E3%81%98%E3%82%8F%E3%80%9C%E3%81%A3%E3%81%A8%E5%BE%90%E3%80%85%E3%81%AB%E8%89%B2%E3%81%8C%E5%A4%89%E3%82%8F%E3%82%8B%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E8%A8%AD%E7%BD%AE/" width="150"]

【Stinger3】じわ〜っと徐々に色が変わるボタンを設置した | ウェブ屋のインサイト＆SEO