サポート » 使い方全般 » ウィジェットに、ロールオーバー効果を持ったバナーを入れたいです。

  • 解決済 yasuhirok1988may

    (@yasuhirok1988may)


    ワードプレスでのサイト作成で、次の問題点が浮かび、質問させていただきます。

    ~目標~
    ・左側メニューであるウィジェットに、ロールオーバー効果を持ったバナーを入れたいです。
    ※ロールオーバーは、別の画像に差し替える形式にしたいと思っています。

    ~現状~
    ワードプレスは、バージョン3.8を使用しています。
    テーマは、ホームページビルダーのテーマを使用しています。
    PHPについては初心者です。

    Image Widgetを使用することで、ウィジェットに画像を入れることはできたのですが、ロールオーバー機能が設置できませんでした。
    次に、ウィジェットの「テキスト」を利用してウィジェット部分に画像を表示しましたが、画像の下半分が、マウスを置いた際にリンクの反応がない状態でした。

    HTMLでサイトを作成していた時は、jquery、jsファイル(スマートロールオーバー)を使用して、
    末尾が「.off」「.on」の画像データを用意することでにロールオーバーを実現していたので、
    ワードプレスでも上記のような方法でロールオーバーを実現したいと思っています。

    しかし、ワードプレスにjqueryを導入する方法や、jsファイルを読み込ませる方法に関して、よくわかっていません。

    上記のような状況なのでございますが、ウィジェットにロールオーバー機能をつける方法に関しまして、助言をいただけましたら幸甚に存じます。

    初心者で、もしこちらの質問に不備がございましたら申し訳ございません。

    どうか、宜しくお願い申し上げます。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • 使用した事が無いプラグインなので、参考になるかどうか分かりませんが、
    ImageWidgetで出力されるHTMLには、class名が標準で出力されている様なので、
    ロールオーバーなどのスクリプトをファイルに書き(出力されているclass名を指定する)、
    jsならフッターで読み込ませてclass名を指定すれば動かないかな~とか、
    安易な発想をしてみたのですが。

    あぁ・・極希にフッターでjsを読み込ませると作動しないこともあるので。
    そういう場合はヘッダーに移動です。

    光っている様なロール(マウス)オーバーなら、jsではなく
    CSSの方が楽かなーとかも思います。
    ■参考
    画像に簡単にマウスオーバー(ロールオーバー)効果を付ける

    スレッド開始 yasuhirok1988may

    (@yasuhirok1988may)

    ありがとうございます。
    無事に解決いたしました。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「ウィジェットに、ロールオーバー効果を持ったバナーを入れたいです。」には新たに返信することはできません。