2015/06/23

初心者向け、リンクをカスタマイズするCSSコード!ふわぁーっとフェードイン&フェードアウト

リンクにマウスを乗せた時、ふわぁ~っとフェードイン。外すと、ふわぁ~っと消える。ブログのリンクの動きが可愛いんですよね。色変えるのは簡単だけど、どんなコードを入れたら良いかわからない、初心者さんに^^

カスタマイズをしたのに、画面で表示されないのは、キャッシュが関係してるから、それを切れば、反映されるので、その理由と原因も説明しますね。

ふわぁっとした羽

スポンサーリンク

WordPressのCSSの場所

CSSは、HTMLに書いてるタグにはさまれた文字など指定して、ブログのデザインを変えるように指定してあげるファイルです。スタイルシートはどこにあるのか、CSSへ向かう手順。

  1. ダッシュボード
  2. 外観(左側)より
  3. テーマの編集
  4. 右側のテンプレートのずずっと下、スタイルシート (style.css)

今回触るコードはaタグ、アンカーテキスト。だいたいCSSの上の方に記載されててSutingerやGush、Simplicityは、上から見てくと直ぐにみつかりますよ。

WindwsならコントロールキーctrlFキーで簡単にさがせるので試してくださいねっ。

CSSに貼り付けるコード

まずは、CSSのaに装飾を加えます。下記部分のコードを探してください。

次に書きの装飾を加えます。

transition(トランジション)は、変化する時間を調整してます。aタグにtransitionを1秒つけるとリンクが可愛くフェードインします。

ピンク色を1秒間で、ホバーしたとき紫に変更。0.5sに変更させると、0.5秒かけて紫に変更完了すると言う意味です。

※これだけで、ふわぁ~っと可愛い動きになるので、他にも使えそうですね。私は、ツイッターやFB、グーグルプラスやFeedのフォローボタンにもトランジションをつかってます。オンマウスすると、ふわーっとボタンが回りますよぉ。

画像はSimplicityですが、Gushは元々記載がありますので、数字だけお好みの秒数に変えれば完璧ですよね。

aタグ リンクをふわぁ~っとフェードイン、フェードアウトさせるCSSコード

リンクの色をこの際変更しようと考えたき、Web上の好きな色ポチポチするだけカラーコードがゲット出来る、拡張機能がオススメです!

 

コードを参考にさせてもらったページは▼下記

引用元

http://webfeelfree.com/css3-change-color-text/

mozとか、webkit、o、msを検索したので引用させていただきますね。

「-moz-」がFirefox等のMozilla系ブラウザ用です。
「-webkit-」がSafari,Chrome等のブラウザ用です。
「-o-」がOpera用です。
「-ms-」がIE用です。

仕様が正式になったらこのベンダープレフィックスをはずすことが推奨されています。

引用元:HTML5をマスターする

ブラウザによって指定をしてあげたって事です。この記事は2011年のもので、既にこの仕様は正式なものになってるのでベンダープレフィックスを外しました。

CSSに書いて更新出来たのにブログで反映しないはなぜ?よくある事2つとは?

カラーコードを変更する時とか、Topへ戻るボタンを色々試したりしてると、更新しても全然反映しなくって、何でかなぁ?って思った事とかないですか?

今まで大抵これでクリア出来た事、2点をあげておきますねぇ(๑ơ ₃ ơ)♥

キャッシュが関係している

読み込んだデータを一時PC上に保存させておけば、再読み込みする時間が短縮されますよね。訪問したユーザー的には、表示が速いほうがストレスが少ないからです。

反映しないのは、ブラウザがキャッシュを一時保存してるので、ブラウザ画面を更新しても、CSSが反映されてないように感じます。はじめに読み込んだカスタマイズする前のデータを表示してるだけなので。

ブラウザに保存され表示してる古いデータを、削除して再読み込みすればカスタマイズしたデータを表示するから、新たに書いたCSSが反映されますよ。

CSS、PHP更新した時反映されない時の対処法:Chromeキャッシュの削除

Chromeのキャッシュの削除画面の『キャッシュされた画像とファイル』にチェックを入れて、『閲覧履歴を消去する』をクリックしたら反映されます。

そもそもシークレットウィンドウ使えば良いのかも、、キャッシュクリアで便利な拡張機能を紹介しておきますね。

参考カスタマイズ時のキャッシュを削除!ワンクリで手間省けるChrome拡張機能「Incognito This!」

CSSの優先順位が関係している場合

CSSって後に、下に書いたモノの方が優されます。例外もあるけど、その可能性があるって事。下記引用で関係ある一部を紹介します。詳しい事知りたい方は、リンクより詳しい情報へ向かってみてくださいね。

複数箇所でスタイルを指定すると、同じプロパティに異なる値が指定されてスタイルが競合することも起こりえます。 こうした場合には、よりタグに近いところで指定されたスタイルや、 より後から読み込まれたスタイルが優先されて、プロパティの値が上書きされます。

~ 中略 ~

引用元:http://www.htmq.com/csskihon/007.shtml

色んな場合があるけど、下の方に書き足されたもの有効になる、スマホの記載場所に書いてるから反映しないとか、色んな場合がありますが。。

LINK目次:CSSが反映されない原因は、書いてる場所が違ってるときの対処法

さいごに

リンクを少し変えただけで印象が変わりますよね。こうやって少しづつ自分の好きなブログへカスタマイズしていくと、だんだんブログカスタマイズも楽しくなって自分っぽいブログが出来ていくのではないでしょうか。

ではでは、かうたっくでした!

書いた人:かうたっく

何も知らない初心者ですが、WordPressでブログを始めました。 ブログの技術系でつまずいたエラーを経験したことからエラー関連を、初心者が初心者に向けて分かりやすい言葉で書いてます★子どもの喘息様気管支炎や、幼い子どもとの生活ページなどよく読まれる雑多ブログを運営中^^♪ご意見、感想、質問はお問い合せよりお待ちしています。

Twitterフォロー