WordPressにロールオーバーバナー

WordPressにロールオーバーのバナーはプラグインなしで設置出来るか?

サイドメニューに設置して試してみた。

①まずは、ロールオーバー画像をFireworks(CS4)で準備。(シンプルロールオーバーの作成)

  1. 画像(バナー)を準備
  2. 全て選択してグループ化
  3. 編集/挿入 から、「長方形スライス」を選択して、トリガーオブジェクトの一番上にスライスを作成
  4. ステートパネルの「ステートの作成 / 複製」ボタン をクリックして、ステートを新規作成
  5. 出来たステート 2で、スライスをずらして、スワップ画像として使用する画像に編集
  6. ステートパネルでステート 1 に戻る
  7. スライスを選択し、ビヘイビアーハンドル上にポインターを置き右クリック
  8. メニューから「シンプルロールオーバービヘイビアーを追加」を選択
  9. 「プレビュー」タブをクリックし、シンプルロールオーバーを確認(動かなかったらもう一度上記作業を見なおそう!)
  10. 書き出し↓
  • ファイル名:xxxx.jpg
  • 書き出し:画像のみ
  • HTML:なし
  • スライス:スライスの書き出し
  • スライスのない領域も含めるにチェック(それ以外はチェックを外す)

②Wordpressのメディアの新規追加で、上記で作成した2つのイメージを追加

③Wordpressのウィジェットのサイドウィジェットメニューにテキストウィジェットを設置

④テキストウィジェットの中に下記を記述し保存
<a href=”http://リンク先” target=”_blank”><img src=”http://1番目の画像.jpg” border=”0″ alt=”” onmouseover=”this.src=’http://2番目の画像.jpg ‘” onmouseout=”this .src=’http://1番目の画像'”></a>

⑤サイトを確認!プラグイン不要で無事動きました。

WordPressのバージョン:3.6.1
使用テーマ:め組