ワードプレスのリンクが動くHTMLタグと設定

どうも、Naotoです。

今回は「(リファイン)オンマウスでリンクが動くHTMLタグと設定」についてお話しします。


ワードプレスのテンプレートRefineで、リンクにカーソルを合わせるとリンクが動く設定とHTMLタグについてです。

 

設定はワードプレスの外観⇒テーマ編集⇒custom.phpから行います。

 

custom.phpのソースに以下のHTMLタグを挿入します。

/* オンマウスでリンクが動く */
a:hover {position:relative; top:1px; left:1px;}

 

リンクの動く幅は「top」と「left」の数値で設定できます。

a:hover {position:relative; top:1px; left:1px;}

「top」が下に動く距離、「left」が右に動く距離です。

 

動画では設定の詳細を解説していますので、参考にしていただければと思います。

4 件のコメント

    • あさのさん、はじめまして。
      Naotoです。

      STINGER5の場合は「style.css」を編集して下さい。

      「style.css」をクリックして少し下にスクロールをすると、
      リンクの色やリンクにマウスオーバーした時の色の記述があるので、
      その辺りに

      /* オンマウスでリンクが動く */
      a:hover {position:relative; top:1px; left:1px;}

      このタグを入力して「ファイルを更新」すればOKです。

      それでは、宜しくお願いします。

  • ご返信有り難うございます。

    このサイトの「プリモボランのご購入はこちら」

    anabolic-steroid.info/archives/123

    というボタンありますが、
    自分のワードプレスに、こういう動くリンクボタンを設置するにはどうすればいいですか?
    そういうプラグインがあるのですか?

    • あさのさん、こんにちは。

      これはプラグインではないと思います。
      「ボタン アニメーション」で検索をすると、
      参考になるサイトがいくつも出てくるので、
      是非、確認してみて下さい。

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です