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

Naoto
じぶんライフ・クリエイターのなおとです。
今回は「(リファイン)オンマウスでリンクが動くHTMLタグと設定」についてお話します。

Naotoの非常識なプロフィールはこちら

ワードプレスのテンプレート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」が右に動く距離です。

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

=======================

「すみません・・・。会社辞めます。」

僕は上司にそう伝え、自分の人生を生きると決意。

10年の会社員生活にピリオドを打った僕は、
お金も人脈も特別なスキルも、
何もない状態で起業しました。

当時、パソコンすら持っていなかったので、
常識的に考えればかなり頭のおかしい選択です。

しかし、気が付いたら会社員時代の
5倍以上の収入を得ていました。

今は時間や場所を気にすることなく、
自分の意思で様々な選択や決断を自由にしています。

今の時代、個人が会社に依存せずに
自分らしいライフスタイルを実現させることは、
難しいことではありません。

事実、僕が関わる人達も、
サラリーマン、主婦、学生、問わず、
自分の力で収入を生み出しています。

以下の記事では、僕の生い立ちから
現在に至るまでの物語を綴っています。
↓  ↓  ↓
会社の危機で人生変わった話

=======================

4 件のコメント

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

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

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

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

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

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

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

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

    anabolic-steroid.info/archives/123

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

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

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

  • コメントを残す

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

    CAPTCHA