Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

初心者のための

スクロールすると蛍光マーカーが引かれる!

2018/12/08
 

 

 

 

 

スクロールで蛍光マーカーが引かれるようにしたいなぁってちょっと前から探していて、見つからないなぁって思っていたのだけど。

 

見つけちゃいました!

 

プラグインじゃなくって、ちょっとファイルをいじらないといけないけど・・・

 

header.php

 

「heder.php」って私の使っている「giraffe」の子テーマにはないので、親テーマからダウンロードして、子テーマのフォルダーにアップしました!

 

関連記事
 
 
そうそう、作業前にバックアップはとっておいてくださいね!
 
 
 
 
「外観」の「テーマの編集」から 子テーマの「heder.php」に下記のコードを追加します。

 

 

追加CSSにコードを追加

 

 

 

「外観」の「CSS編集」をクリックします。

 

表示された追加CSSに下記のコードを追加しましょう。

 

 

 

 

 

 

 

 

 

 

 

コードを貼り付けたら「公開」のクリックを忘れずに!

 

AddQuiktagに登録

 

あとは、記事で下記のコードを呼び出すとスクロールされた時に蛍光マーカーを引いてくれます。

 

 

マーカーを引く 

 

毎回テキストに貼り付けてってやっぱり大変なので、AddQuiktagに登録しちゃいましょう!

 

登録方法は下記の記事をどうぞ!

 

関連記事
 
 
開始タグは「<span class=”marker-animation”>マーカーを引く」、終了タグは「</span>」です。
 
 
そうそう、文の途中で一部分だけマーカーを入れたい時は、文の途中でコードを入れてくださいね!
 
 
 

まとめ

 

ずっと探していたので、めちゃめちゃ嬉しいです。

目を楽しませてくれそうですね!

 

ではまた!まみでした。 

 

 

 

 

 

 

 

Comment

  1. 上カルビ より:

    こんにちは。蛍光マーカーのページ、大変参考になりました。ありがとうございました。実際に稼働させたいのですが1点お伺いしたいのですが、この黄色いマーカーの太さを細くしたいと考えておりまして、cssを色々と調整してみましたが細くできませんでした。
    恐れ入りますが、どの箇所を修正すれば良いかご教授頂けませんでしょうか。
    どうぞよろしくお願い致します。

    • まみ より:

      コメントありがとうございます。
      マーカーの太さは追加CSSのrgb(255,250,153)の153の数字を小さくすれば細くなります。
      045ぐらいがいいかも?

  2. 上カルビ より:

    まみ様
    お教え頂きありがとうございました。
    本件実施させていただきましたところ、最初の動きの際は細い状況でしたが徐々に太くなってしまいまして、最終的に元の太さになってしまいました。。。

    試したのは(rgb 255,250,045)にすべてcssに書き換えた次第です。

    .marker-animation {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,045) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,250,045) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,250,045) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgb(255,250,045) 50%);
    background-image: linear-gradient(left, transparent 50%, rgb(255,250,045) 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .8em;
    transition: all 3s ease;
    font-weight: bold;
    }

    ※3秒にしてます。
    他に至らぬ点がありますでしょうか。お手すきの際にでもお教えいただければ幸いです。

    • まみ より:

      コメントありがとうございます。

      上手くいかないのですね。

      別のサイトで細くしているのですがうまく動いてくれています。
      ちなみに下記のコードです。

      .marker-animation.active{
      background-position: -100% .8em;
      }

      .marker-animation {
      background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,255,045) 50%);
      background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,255,045) 50%);
      background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,255,045) 50%);
      background-image: -o-linear-gradient(left, transparent 50%, rgb(255,255,045) 50%);
      background-image: linear-gradient(left, transparent 50%, rgb(255,255,045) 50%);
      background-repeat: repeat-x;
      background-size: 200% .8em;
      background-position: 0 .5em;
      transition: all 5s ease;
      font-weight: bold;
      }

      違っているのは
      background-position: 0 .5em;
      transition: all 5s ease;

      なので、background-position: 0 .5em;にしてみるとうまくいくのかも?と思います。

  3. 上カルビ より:

    早速にご返信いただきまして、誠にありがとうございました。
    おっしゃる通りの箇所を訂正したところ、無事動きました!

    background-position: -100% .8em;

    に.8へと変更しましたところ、無事アンダーラインのサイズが変更となり綺麗に表示する事ができました。
    深くお礼申し上げます。

    大変参考になりました。今後ともよろしくお願いします。

- Comments -

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

Copyright© ワードプレスお困りごと講座 , 2018 All Rights Reserved.