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

今回は「(リファイン)オンマウスでリンクが動く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」が右に動く距離です。

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

0からWebで稼ぐための無料講座【有料級コンテンツを限定配布中!】

Naoto
在宅起業で人生を豊かにする方法を発信
埼玉県出身の30代、2児のパパ。
会社員歴10年、ビジネス歴8年。

全くの0の状態(知識・スキル・経験、学歴、人脈なし)で在宅起業・パソコン購入→多い時は月3,000万円以上(ほぼ利益)を売り上げる事業を個人で細々と営んでいます。

【主な活動】
* ブログメディア複数運営
* 動画事業(YouTubeチャンネル複数運営)
* ビジネスコミュニティ運営
* 在宅起業サポート・コンサル

【好きなこと】
キャンプ・BBQ、温泉、旅行、健康的な体づくり、ビジネスを通じて出会った価値観の合う仲間と一緒に学びと遊びを共有する事。

【コンセプト】
個人で自由に収入を得て自分らしく生きる「じぶんライフ」をコンセプトとして掲げ、0ベースの個人が最小限のリスクで副業・起業して人生を豊かにするための情報を発信します。
  • URLをコピーしました!
  • URLをコピーしました!

コメント欄

コメント一覧 (4件)

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

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

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

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

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

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

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

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

    anabolic-steroid.info/archives/123

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

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

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

コメントする

目次
閉じる