このBlogでもやっていますが、
リンクの貼ってある文字にマウスが触れると、ゆっくりと色が変化していきます。
優しいフェードが女性向け♪
些細な所なのですが「リンクの装飾」は意外と重要。
マウスが触れた時にアクセントがあると人は反応し、ボタンを押しやすくなります。
（テキストリンクが激しく動きまわるとウザイと思われる要因になるため、
臨機応変を推奨します
）例） CSSで設定をしていない 通常のリンク
例） CSSで設定でふわりと変わる リンク
設置方法です♪
管理画面の「CSSの編集」ページを開いて
ちょっとスクロースで下がり「(1) 文字のスタイル」の所に記載されている
「リンク」「訪問済みのリンク」「マウスオーバーした時のリンク」を書き換えます。
/* リンク */
.skinAnchorColor,.skinBaseAnchorColor,.skinBlock a,a{
color:#423d38;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/* 訪問済のリンク */ .skinAnchorVisitedColor,.skinBaseAnchorVisitedColor,.skinBlock a:visited,a:visited{ color:#423d38; }
/* マウスオーバーしたときのリンク */ .skinAnchorHoverColor,.skinBaseAnchorHoverColor,.skinBlock a:focus,.skinBlock a:hover,a:focus,a:hover{ color:#ffc703; }
/* 訪問済のリンク */ .skinAnchorVisitedColor,.skinBaseAnchorVisitedColor,.skinBlock a:visited,a:visited{ color:#423d38; }
/* マウスオーバーしたときのリンク */ .skinAnchorHoverColor,.skinBaseAnchorHoverColor,.skinBlock a:focus,.skinBlock a:hover,a:focus,a:hover{ color:#ffc703; }
お好みで色を指定変更する場所は3ケ所！
color：6ケタの数字アルファベットが色指定コード。
HTMLカラーピッカーサイトで色のコードを調べる事が出来ます » #●●●●●●
「0.3ｓ」は3秒かけて変化する秒数の指定です。0.9s等にするとさらにゆっくりと変化します。
お好みでアレンジをどうそ～
第3回 「アメブロのリンク文字に触れるとふわりと色が変わる方法」でした
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
私ごと。。。アメブロヘッターやカスタマイズ制作させていただいたりしているのですが
（とても素敵なお客さまばかりなので早くご紹介したい！）
このブログの趣旨でもあるカスタマイズネタが少ないと思い、
悩んだ結果、こちらの記事を先にアップ。
ネタの重複を気にせずに記載できる私のホームページのBlogの方に先に
五月雨でご紹介をさせていただこうなど思いつつ。
（25日までにはアメブロでもご紹介するぞと自分への宣言）
更新にそそげる労力が足りず、アレモコレモ書きたいと気持ちばかりが募っています。