リンクが付いたテキストや画像にマウスを乗せた時(マウスオーバー時)に、
いろんなアニメーショや何かしらの効果があると…。
なんだかカッコいいサイトになった気分になりますよね。
そこで今回は、WordPressでブログを運営しているあなたのために!!
プログラミングのど素人でもコピペで簡単にできるカスタマイズ方法を紹介します。
これで、ライバルサイトに差をつけてちょっとだけサイトをカッコよくしてやりましょう!
車メンテナンス・カスタマイズ・点検・修理、WordPressカスタマイズ、PC設定、車、時事ネタ、情勢、日々の出来事など津々浦々に綴っていきます。
2025年6月26日 (木曜日)本日の人気記事トップ10
所要時間目安: 約 2 分
今日は2025年6月26日です。
この記事は2017年3月4日のものです。現在は状況が異なる可能性がありますのでご注意ください。
2025年6月26日 (木曜日)↓における週間月間人気記事トップ3は?↓
初めての経験でした。(汗)…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。(汗)…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
TOYOTAキーレスリモコンの設定方法とキーナンバー(キー番号) 3PV
この度は(今回は?)、プラスチックの経年劣化により車のキーレスリモコンキーの送信機側(トランスミッター)のみをなくしてしまった場合です。(まだスマートキーやインテリジェンスキーと言われる前のキーレスリ…
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 2PV
過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。(メンテナンスしないのはもっと悪いですが…。) その記…
初めての経験でした。(汗)…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。(汗)…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 32PV
車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…
アイドリングストップシステム異常警告灯表示対処方法 20PV
2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に(自動的に)アイド…
初めての経験でした。(汗)…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。(汗)…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 32PV
車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…
アイドリングストップシステム異常警告灯表示対処方法 20PV
2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に(自動的に)アイド…
リンクが付いたテキストや画像にマウスを乗せた時(マウスオーバー時)に、
いろんなアニメーショや何かしらの効果があると…。
なんだかカッコいいサイトになった気分になりますよね。
そこで今回は、WordPressでブログを運営しているあなたのために!!
プログラミングのど素人でもコピペで簡単にできるカスタマイズ方法を紹介します。
これで、ライバルサイトに差をつけてちょっとだけサイトをカッコよくしてやりましょう!
アドセンス336pxPC閲覧記事下表示1つ目コード
やり方はいたって簡単です。
CSSに以下のコードを追記するだけでこんな風に簡単に画像にリンクがある場合はゆっくりとアニメーション効果をつけることができます。
/*画像にリンクがあった時にゆっくり透過させるCSS*/
a:hover img {
opacity: 0.5 ;
filter: alpha(opacity=50) ; /* Ie用 */
}
img, video, object {
max-width: 100%;
height: auto;
border: none;
vertical-align: bottom;
display: block;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-o-transition: 0.8s;
-ms-transition: 0.8s;
transition: 0.8s;
}
いかがでしたか?
こんなオシャレなアニメーションが簡単にCSSにコピペで実装ができるんです。
是非これで他のサイトとちょっと差を付けてみてください。
上記のコードをスタイルシートCSSに追記するだけで以下のように、
ちょっとおしゃれ(オシャンティー)にサイトをカスタマイズできますよ!!
紹介します!!
いろいろなアニメーション効果をつける方法がありますので期待していてください!!
最後にもう一回マウスオーバー時に画像を透過させた場合のデモです。
追記)
テキストにリンクがある場合にアニメーション効果をCSSでつける方法を書きました。以下になります。
人気の商品が日替わりで登場。毎日お得なタイムセール「Amazonタイムセール全体」
アフィリエイトリンクを作成してくれるカエレバブックマークレットやヨメレバブックマークレットを使用している方々は多いと思います。 私は、 カエレバ。というサイト?を知りはじめは意味がわかり...
もうすでにYouTubeというGoogleの無料動画サービスは周知の事実です。私は、 最近始めてみたのですが…。そんなにアップロードするものはないのですが トホホ・・。画像での説明などで足りないなぁ。...
テーマにもよりますが、サイドバーにデフォルト(はじめから)で追加されている状態のウィジェットがあると思います。 もちろん、サイドバーにウィジェット追加用に多くのテーマは作られていると思います。 ですが...
Multiplex 広告
あなたが訪問してから
⏰ 0 秒経過 🎉ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。
今週の人気記事トップ10
アドセンス336pxPC閲覧記事下表示1つ目コード
よろしかったらシェアよろしくお願いします。
-WordPress, カスタマイズ, 伝えたいこと, 備忘録
Opt-out complete; your visits to this website will not be recorded by the Web Analytics tool. Note that if you clear your cookies, delete the opt-out cookie, or if you change computers or Web browsers, you will need to perform the opt-out procedure again.
You may choose to prevent this website from aggregating and analyzing the actions you take here. Doing so will protect your privacy, but will also prevent the owner from learning from your actions and creating a better experience for you and other users.
The tracking opt-out feature requires cookies to be enabled.
This site is protected by reCAPTCHA and the GooglePrivacy PolicyandTerms of Serviceapply.
このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。
新着コメント