Ryun's Web Note

おすすめのグッズや役立つ情報をあなたにお届けします。

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

      2013/10/28

motto

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

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

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

 

カスタマイズする前に

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

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

 

カスタマイズする箇所

PC・スマホ両方とも. motto aというクラスになっています。Style.cssの

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

 

右寄せにする

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

 を追加する方法です。

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

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

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

 

参考にした記事はこちら

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

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

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

ここに

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

 

参考にした記事はこちら

りゅんた的ℜoundUp

ちょっとしたカスタマイズですが、やってみると見た目が随分変わってきます。

簡単なのでカスタマイズしてみてください♪

 - Stinger3カスタマイズ