Leeway's Life Log

札幌でWebデザイナーしてます。Mac、ガジェット情報など好きなこと書いていきます。

Stinger3 WordPress

「Stinger3カスタマイズ」続きを見るの上にマウスを置いたら変化するようにしてみた

投稿日:

Stinger3カスタマイズ、マウス続きを読む

こんにちは。Leewayです。今回もWordPress無料テーマである、Stinger3のカスタマイズ記事です。

どこをカスタマイズしたかというと、「続きを読む」ボタンです!トップページなどにある「続きを読む」ボタンにマウスを置いてみてください。

じんわりと大きくなるのがわかりますか?カッコイイと思ったそこのあなた!スゴーク簡単なので、ぜひカスタマイズしてみてください。

カスタマイズ前にバックアップは必ず行ってくださいね。オネシャス!

では、Stinger3の「続きを読む」ボタンのカスタマイズ方法を紹介していきたいと思います。

スポンサーリンク

Stinger3カスタマイズ手順

1.修正するファイルを開く

ファイル名:style.css

「style.css」をテキストエディタで開きます。

2.検索する

「style.css」から「.motto a {」&「.motto a:hover {」という記述を探す。

[.motto a ]が、通常の「続きを読む」ボタンの状態を表している部分で、「.motto a:hover」が、マウスを置いたときの状態を表す部分になります。

3.修正しよう!

こちらがソースコードです。

■.motto a {

.motto a{
/*元々ある記述*/
/*下記の3行を追加する*/
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}

■.motto a:hover{

.motto a:hover{
/*元々ある記述*/
/*下記の4行を追加する*/
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}

scale(1.2, 1.2);の数字を大きくすればするほど、マウスを置いたときのボタンが大きくなります。

いろいろ試して、1番しっくりくる値にしてみてはいかがでしょうか。

Stinger3カスタマイズまとめ

以上で修正は完了です。お使いのStinger3かっこよくなったでしょうか。

未だに少しづつStinger3をカスタマイズしております。

カスタマイズが一段落したらStinger3カスタマイズ記事をまとめたいと思います。

スポンサーリンク

-Stinger3, WordPress

執筆者:


  1. […] WordPress「Stinger3カスタマイズ」続きを見るの上にマウスを置いたら変化するようにしてみた | Leeway’s Life Log […]

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

関連記事

Stinger3をカスタマイズしている私が、テーマをアップデートされた際の差分インストール方法を紹介

Stinger3がアップデートされた際の、差分インストール方法をご紹介致します。 Stinger3のカスタマイズを行っている方はやはり気になるんではないでしょうか。私は他の方がどうやっているのかすごく …

「Stinger3カスタマイズ」画面下へ付いてくる、SNSボックスを削除する方法

こんにちは。Leewayです。今回もWordPress無料テーマである、Stinger3のカスタマイズ記事です。修正した内容は、画面下部へ付いてくるSNSボックスを削除するように修正致しました。 SN …

「Stinger3カスタマイズ」ブログのシンボルであるファビコン(favicon)を変更する方法

WordPress無料のテーマである、「Stinger3」のカスタマイズを行いました。 今回は、サイトのシンボルであり顔である、ファビコンを変更してみました。 Stinger3の初期のファビコンは、W …

「Stinger3カスタマイズ」サイト名をテキストから画像へ変更

WordPress無料テーマである、「Stinger」シリーズの「Stringer3」のカスタマイズを行いました。 今回カスタマイズしたところは、サイト名をテキストから画像へ変更! 画像へ変更と言って …

今話題のSEOに強いWordPressのテーマ「Stinger3」をカスタマイズしてみる

SEOに強い「Stinger3」というテーマをカスタマイズしようと考えていおります。 「Stinger3」は、無料のテーマで、こちらのサイトからダウンロードすることができる。 SEO対策に強い無料Wo …

@LEEWAY

@leeway

はじめまして。当ブログ管理人のLeewayと申します。
20台後半の元サラリーマンです。現在はフリーで活動中。 書きたいことを自由に書いております。
更新情報などつぶやきますので、よかったらフォローお願いします。


follow us in feedly