雑貨はデザイン。 by BonnyDesign

オンライン雑貨ショップ【BonnyDesignShop】開店準備中の
ボニー店長による、雑貨やネットのあれこれ。
本業はWebデザイナー。
※現在、ショップ構築よりアメブロカスタマイズに専念中。勉強しつつ改造していくので、デザインがどんどん変わるかも。


テーマ:
これから、地味~にフリープラグインの外部化に取りかかりたいと思います。



スクリプトを外部ファイルにし、【フリープラグイン】には読み込むコードだけを記入することで、使用できるプラグインがかなり増えるという訳です。

…なぜ「地味~に」かというと、ブログ上は何にも変化しないのでさっぱり面白くないから。

結構面倒。。
だけどこれをしないとこれ以上プラグインが導入できない。大切な作業なのです。。

(-_☆)

ここ数日、気に入ったプラグインをどんどん追加していたので、とうとう、というか、当然ながら、フリープラグインの文字制限3800字にひっかかったんですねぇ。(^_^;)

ちなみに導入中、文字制限に引っかかった記念すべき(?)プラグインは、下記参照ブログでご紹介のプロフィール画像をコメント欄と読者一覧の上に表示させるというもの。



サイドメニューにある【このブログの読者】スペースにランダム6人のプロフィール画像を表示させたり、コメント欄にもプロフィール画像を表示させるので、にぎやかな感じになります(*⌒∇⌒*)


ところで、このプラグインを導入して思ったのが、せっかく表示された皆さんのプロフィール画像。もちろんクリックするとそれぞれのプロフィールページにリンクしますよね。

リンク画像といえば、最近ではロールオーバー効果ポインタを載せると画像やテキストが変化する動作)が当たり前になりました。

というか、ロールオーバーしないとあれ?設定ミス??とまで思うくらいで。(^_^;)

ロールオーバー効果を実現させる方法はいろいろありますが、主流の方法(と私が思っているだけかも?)は、JavaScript利用にしても、CSS設定にしても、オンマウス時に表示した画像を自分で用意する必要があります。

でも今回の対象には『プロフィール画像』も含まれるので当然、こちらで勝手に用意することができません。

だけど、今日ご紹介する方法は超簡単!

CSSに以下をコピペするだけです。(*^-^)b

a:hover img{
opacity:0.50;
filter:alpha(opacity=50);
-ms-filter: "alpha( opacity=50 )";
-moz-opacity:0.50;
}




オンマウス時に画像が半透明になるので、ハイライトされた印象になります。

上記コードの赤い数字を変えると、透明率(ハイライトの強弱)が変えられますが、詳しくはご紹介した参照サイトでお願いします。

(。-人-。)

このコードを貼り付けると、プロフィール画像だけではなく、全てのリンク画像に対してこのロールオーバー効果が適用されます。


ちなみに、自分で入れ替え画像が用意できる箇所、例えばグローバルナビなら、JavaScriptやCSSでもっとカッコいいロールオーバーが実現できますよ。

ぜひ、いろいろと試してみてくださいね( ゚ω^ )b
AD
いいね!した人  |  コメント(0)  |  リブログ(0)

雑貨ショップ店長(予定)兼WEBデザイナー ボニーさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

AD

ブログをはじめる

たくさんの芸能人・有名人が
書いているAmebaブログを
無料で簡単にはじめることができます。

公式トップブロガーへ応募

多くの方にご紹介したいブログを
執筆する方を「公式トップブロガー」
として認定しております。

芸能人・有名人ブログを開設

Amebaブログでは、芸能人・有名人ブログを
ご希望される著名人の方/事務所様を
随時募集しております。