リンクにマウスを乗せた時、ふわぁ～っとフェードイン。外すと、ふわぁ～っと消える。ブログのリンクの動きが可愛いんですよね。色変えるのは簡単だけど、どんなコードを入れたら良いかわからない、初心者さんに＾＾
カスタマイズをしたのに、画面で表示されないのは、キャッシュが関係してるから、それを切れば、反映されるので、その理由と原因も説明しますね。
WordPressのCSSの場所
CSSは、HTMLに書いてるタグにはさまれた文字など指定して、ブログのデザインを変えるように指定してあげるファイルです。スタイルシートはどこにあるのか、CSSへ向かう手順。
- ダッシュボード
- 外観（左側）より
- テーマの編集
- 右側のテンプレートのずずっと下、スタイルシート (style.css)
今回触るコードはaタグ、アンカーテキスト。だいたいCSSの上の方に記載されててSutingerやGush、Simplicityは、上から見てくと直ぐにみつかりますよ。
Windwsならコントロールキーctrl＋Fキーで簡単にさがせるので試してくださいねっ。
CSSに貼り付けるコード
まずは、CSSのaに装飾を加えます。下記部分のコードを探してください。
/* リンクの色 */
a{
color: #××××××;
/*下記コードをコピペ*/
}
a:hover {
color: #××××××;
}
次に書きの装飾を加えます。
transition: 1s;
transition（トランジション）は、変化する時間を調整してます。aタグにtransitionを1秒つけるとリンクが可愛くフェードインします。
/* リンクの色 */
a{
color: #f78a97;/*ピンク*/
transition: 1s;
}
a:hover {
color: ##c17af4;/*紫*/
}
ピンク色を1秒間で、ホバーしたとき紫に変更。0.5sに変更させると、0.5秒かけて紫に変更完了すると言う意味です。
※これだけで、ふわぁ～っと可愛い動きになるので、他にも使えそうですね。私は、ツイッターやFB、グーグルプラスやFeedのフォローボタンにもトランジションをつかってます。オンマウスすると、ふわーっとボタンが回りますよぉ。
画像はSimplicityですが、Gushは元々記載がありますので、数字だけお好みの秒数に変えれば完璧ですよね。
リンクの色をこの際変更しようと考えたき、Web上の好きな色をポチポチするだけでカラーコードがゲット出来る、拡張機能がオススメです！
コードを参考にさせてもらったページは▼下記
.demo2{ color: #00f; /*-webkit-transition: 2s; -moz-transition: 2s; -o-transition: 2s; -ms-transition: 2s;*/ transition: 2s; } .demo2:hover { color: #f00; }引用元
mozとか、webkit、o、msを検索したので引用させていただきますね。
「-moz-」がＦｉｒｅｆｏｘ等のMozilla系ブラウザ用です。
「-webkit-」がＳａｆａｒｉ，Ｃｈｒｏｍｅ等のブラウザ用です。
「-o-」がＯｐｅｒａ用です。
「-ms-」がＩＥ用です。仕様が正式になったらこのベンダープレフィックスをはずすことが推奨されています。
引用元：HTML5をマスターする
ブラウザによって指定をしてあげたって事です。この記事は2011年のもので、既にこの仕様は正式なものになってるのでベンダープレフィックスを外しました。
CSSに書いて更新出来たのにブログで反映しないはなぜ？よくある事２つとは？
カラーコードを変更する時とか、Topへ戻るボタンを色々試したりしてると、更新しても全然反映しなくって、何でかなぁ？って思った事とかないですか？
今まで大抵これでクリア出来た事、２点をあげておきますねぇ(๑ơ ₃ ơ)♥
キャッシュが関係している
読み込んだデータを一時PC上に保存させておけば、再読み込みする時間が短縮されますよね。訪問したユーザー的には、表示が速いほうがストレスが少ないからです。
反映しないのは、ブラウザがキャッシュを一時保存してるので、ブラウザ画面を更新しても、CSSが反映されてないように感じます。はじめに読み込んだカスタマイズする前のデータを表示してるだけなので。
ブラウザに保存され表示してる古いデータを、削除して再読み込みすればカスタマイズしたデータを表示するから、新たに書いたCSSが反映されますよ。
Chromeのキャッシュの削除画面の『キャッシュされた画像とファイル』にチェックを入れて、『閲覧履歴を消去する』をクリックしたら反映されます。
そもそもシークレットウィンドウ使えば良いのかも、、キャッシュクリアで便利な拡張機能を紹介しておきますね。
参考カスタマイズ時のキャッシュを削除！ワンクリで手間省けるChrome拡張機能「Incognito This!」
CSSの優先順位が関係している場合
CSSって後に、下に書いたモノの方が優されます。例外もあるけど、その可能性があるって事。下記引用で関係ある一部を紹介します。詳しい事知りたい方は、リンクより詳しい情報へ向かってみてくださいね。
複数箇所でスタイルを指定すると、同じプロパティに異なる値が指定されてスタイルが競合することも起こりえます。 こうした場合には、よりタグに近いところで指定されたスタイルや、 より後から読み込まれたスタイルが優先されて、プロパティの値が上書きされます。
～ 中略 ～
p {color:red;} /*赤色*/ p {color:yellow;} /*黄色で上書き*/ p {color:blue;} /*青色で上書き、この値が有効となる*/引用元：http://www.htmq.com/csskihon/007.shtml
色んな場合があるけど、下の方に書き足されたものが有効になる、スマホの記載場所に書いてるから反映しないとか、色んな場合がありますが。。
LINK目次：CSSが反映されない原因は、書いてる場所が違ってるときの対処法
さいごに
リンクを少し変えただけで印象が変わりますよね。こうやって少しづつ自分の好きなブログへカスタマイズしていくと、だんだんブログカスタマイズも楽しくなって自分っぽいブログが出来ていくのではないでしょうか。
ではでは、かうたっくでした！
Comments