ブログで生きていくブログで生きていくことを実践している藤本陽介の個人ブログです。Webマーケティング・WordPress・SEOについてノウハウを隠すことなく解説しています。ふじもんリンクにマウスカーソルあわせたらぴょこっと動く実装のやり方ツイートシェアはてブLINEPocketみなさんこんにちは、藤本です。今回はマウスのカーソルをリンクにあわせた(ホバーさせた)時に、テキストや画像がぴょこっと動かす実装について解説します。これをやるとリンクのクリック率が上がり、サイトの直帰率が減り、滞在時間が長くなりました。WordPressでの簡単な実装方法(コピペで3分で実装)を紹介しますので、気になる方はチェックしてください。以下のコードをコピーするスタイルシートに追記するぴょこっと動く実装のメリットどれがリンクなのかわかりやすいサイトの直帰率が減るSEO対策に好影響があるぴょこっと動く実装のデメリット上品なサイトのイメージがちょっと下品になっちゃうサイトが重たくなるというのはほぼないリンクにマウスカーソルを合わせた時にぴょこっと動く実装リンク部分にマウスカーソルが合うとぴょこっと動きますこちらのGIF画像でもわかると思いますが、このようにマウスカーソルをリンクのあるテキストや画像やボタンなどにあわせると『ぴょこ』っと動きます。パソコンでマウスを操作してみると、なんだか思わずクリックしてしまいたくなりますね。このリンクにマウスカーソルあわせたらぴょこっと動く実装方法を解説します。スタイルシート(CSS)に、この実装を追記すればOKですが、今回は初心者の方でもできるように、WordPressの管理画面から実装する方法を解説します。}このソースコードをコピーしてください。リンクのエフェクトという日本語のテキスト部分もコピーして問題ありません。スタイルシートに追記するWordPressの管理画面左メニューの『外観』>『カスタマイズ』>『追加CSS』というメニューがあれば、それを開いて、先ほどコピーしたコードを貼り付けてください。補足説明WinSCPやFFFTPなどのFTPソフトを使って、サーバーにアクセスし、該当のstyle.cssに先ほどのコピーを貼り付ける方法でも問題ありません。WordPressのテーマファイルに書き込むので、子テーマ化してから実装することをおすすめします。動く実装のメリットどれがリンクなのかわかりやすいこの『ぴょこ』っと動くメリットは、実際に自分自身でサイトを確認してみればわかるので、あえて補足説明の必要がないと思いますが、いちおう説明します。なによりも、どれがリンクなのかがとても分かりやすくなります。人間は、動きがあるものに反応するので、クリック率もあがります。サイトの直帰率が減るこの実装により、サイトの直帰率が3ポイントも下がりました。これって実はすごいことです。直帰率とは、簡単な言葉を使うと、閲覧者がいろいろなページを見てくれやすくなるということです。効果は絶大といっても過言ではありません。SEO対策に好影響があるSEOとは検索順位が上位表示されやすい=アクセスが増えやすいということなのですが、SEOに好影響があるといっても、本当のことは検索エンジンであるGoogleしか知りません。このぴょこっと動くやつを実装してから、サイトの滞在時間が15%増えました。サイトの平均滞在時間が増えることは、Googleはサイトの評価を高くするはずですから、このぴょこっと動く実装がSEO対策に効果があるといっても過言ではありません。動く実装のデメリット上品なサイトのイメージがちょっと下品になっちゃうこれはあくまでもわたしの直感的に感じたことです。洗練された上位品なサイトで、このぴょこぴょこ動く実装がされていたら、ちょっと安っぽいというか下品に感じる人ともいるだろうな、と思いました。動きがあることで、クリック率が上がるのは間違いありませんが、それが安っぽくみえてしまう可能性があるということぐらいですかね、デメリットって。サイトが重たくなるというのはほぼないこのぴょこぴょこ動く実装は、サイトの表示速度を遅くしてしまうからしない方が良いですか?という質問をいただきました。影響がないかと言われれば、ソースコードを1行追加しているので、厳密に言えばほんのちょっとは影響があるかもしれませんが、この質問者が心配しているような、サイトの表示速度に影響があるというレベルではありません。今回の実装の概要CSS(スタイルシート)に、リンク設定しているところにマウスのカーソルが重なったら、その対象リンクのテキストを、3ピクセルだけ左上に動かすという指示をしただけです。これは『リンク設定しているところにマウスのカーソルが重なったら、その対象リンクのテキストの色を変えろ!』と指示をしたのと変わりありません。難しいことは抜きにして、質問者が心配しているような、サイトの表示速度に影響があるというレベルではないということですね。気になる方は、このぴょこっと動く実装をテストサイトなどでやってみてください。SEO対策マニュアル【入門・基礎・プロレベルでも使える知識】2019年1月31日SEOこの記事が気に入ったらいいねしよう!最新記事をお届けします。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。在宅ワーカーが登録すべきおすすめWEBサイト13選RECOMMENDこちらの記事も人気です。SEO2019.5.12はてなブックマークの仕組み【nofollowじゃないリンクがつく】SEO2018.10.16ブログの記事コンテンツに最も求められる3つの要素とはSEO2019.1.3SEOに強い記事コンテンツの書き方【h2とh3の設定のコツ】SEO2019.1.5SEOにおける検索意図の重要性とは【具体例もあわせて解説】SEO2019.1.11Google検索順位のクリック率【SEO対策で1位と10位では〇倍も違う】SEO2018.11.11パソコン画面を録画してGIFファイルを作る方法『ScreenToGif』SEO2016.11.16Googleサーチコンソールの設定方法【サチコって?】SEO2019.1.18SEO対策の基本【ホワイトハットSEOとブラックハットSEO】ABOUTこの記事をかいた人ふじもんWebサイトの制作や、システム開発などしながら、ブログで生きています。運用しているWebサイトは非公開ですが、数は20サイトを超えています。WordPressの講師をたまにしています。今後は動画編集を中心に活動していきたいです。POSTこのライターの最新記事WiFi2020.1.14入院中におすすめのレンタルWiFi【D3WiFiがおすすめな理由】WiFi2019.12.28どこよりもWiFiの口コミ評判と3つのデメリットを解説します【口座振替に対応...キャンペーン2019.12.24光回線の選び方【家電量販店で選んではいけない理由】WiFi2019.12.15レンタルWiFiなのに端末返却義務が無いWiFiサービスふじもんWordPressをマスターするために、プログラミングをゼロから勉強して、なんとか書籍の執筆やセミナー講演をさせてもらえるようになりました。いまは、ブログで生きています。日本で一番詳しくWiMAXを計測しました。Reserved.ホームメニューフォローシェアおすすめトップTwitterSNSでシェアツイートシェアはてブLINEPocketCLOSE。