動く蛍光マーカーで惹きつけるブログカスタマイズ

先生の言いたいことはここなんだよ!!

ブログを書いているとそう思ってなんとか注目してほしい文がありますよね？

ここを見てほしい！　はぃ注目！　テスト出るよー　明日くん寝ない！　ノートとったかな？

蛍光マーカーを動かすブログカスタマイズ

はじめに。

参考にさせていただいたブログをブックマークしておらずこの記事を書くにあたって調べましたがどうもよくわかりませんでした。

いくつか出ていたのですがみんな記述が同じで元がわからないんです(;´･ω･)

どこかを参考にさせていただいているので一番それっぽいところのリンクを一応貼っておきます。

https://gurio.work/marker-animation01/

動くマーカーの準備は２つのコピペ

コピペの際はばっくあっぷを忘れずに！

一つ目ははてなブログの設定⇒詳細設定⇒headに要素を追加のところにjqueryを埋め込みます（下記を貼り付けるだけ）

貼り付けた後、一番下の変更するボタンを忘れずに(´･ω･｀)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).scroll(function (){
$(".marker").each(function(){
var position = $(this).offset().top; //ページの一番上から要素までの距離を取得
var scroll = $(window).scrollTop(); //スクロールの位置を取得
var windowHeight = $(window).height(); //ウインドウの高さを取得
if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎたとき
$(this).addClass('active'); //クラス「active」を与える
}
});
});
</script>

二つ目はデザイン⇒カスタマイズ⇒デザインCSSのところにマーカーの記述をします。

（下記を貼り付けるだけ）

/*マーカー*/
.marker.active{
background-position: -100% .5em;
}
.marker {
background-image: -webkit-linear-gradient(left, transparent 50%, rgb(124,252,0) 50%);
background-image: -moz-linear-gradient(left, transparent 50%, rgb(124,252,0) 50%);
background-image: -ms-linear-gradient(left, transparent 50%, rgbrgb(124,252,0) 50%);
background-image: -o-linear-gradient(left, transparent 50%, rgb(124,252,0) 50%);
background-image: linear-gradient(left, transparent 50%, rgb(124,252,0) 50%);
background-repeat: repeat-x;
background-size: 200% .8em;
background-position: 0 .5em;
transition: all 4s ease;
font-weight: bold;
}

これで準備は完了です。

最後にマーカーを付けたい1文をHTML編集で

<p>文章 </p>を

<p><span class="文章"></p>

に変えたら完成です。

jqueryってなんですか？（初心者の説明とりあえず理解）

コピペしたものを少し改良したいときに知っておくといいなっていうお話しです。

コピペで使えればそれでＯＫの人はすっとばしてください。

JavaScriptとはwebページにアニメーションなどの視覚効果を加えたり、メニューを表示するという要素を追加できるスクリプト言語です。

このJavaScriptを簡易的にしているのがjqueryです。

明日さん棒読み発動中です

ここからは明日さんの頭に描いたお話しです(´･ω･｀)

100メートル走りなさい！

先生に言われて生徒がグラウンドを走りました。これは普通です。

次にトランポリンがグラウンドに用意されました。

100メートル走りなさい！

先生に言われて生徒がグラウンドを走りました。

途中トランポリンがあるので生徒は走っている途中に1回ぽよーんってなってます

走る＝文が普通に書かれている

トランポリンを置きなさい＝jqueryで指定された視覚効果

わかったようなわからないようなｗ

CSSってなに？（初心者の説明とりあえず理解）

CSSはHTMLのタグで囲んだ範囲の文字の色、大きさ、背景の色、配置などを指定する言語です。

明日さん棒読み発動中

先ほどの例でちょっと追加すると

１００メートル走やるからライン引いておけ！

マジスカ？生徒さんはライン引きで白線を書いていきます。

このようにベーシックな部分を指定するときはCSSを記述することになります。

リンクの色を変えておく

CSSの実例でリンクされている部分の色の指定をしてみましょう。

画面上のあらゆる部分に名前が付いています。

今回はlinkというところの色の指定ですが少し凝ってみて

• 元の色
• リンクボタンが一度も押されてない状態のときの色
• リンクボタンが押されたあとの色
• マウスをのせた時の色

それぞれ色の指定を変えてみましょう。

/*リンクされた文字*/
a{
color:#6495ed;
font-weight:bold;
}
/*未訪問のリンク*/
a:link {
color:#6495ed;
font-weight:bold;
}
/*訪問後のリンク*/
a:visited {
color:#6495ed;
font-weight:bold;
}
/*マウスをのせたとき*/
a:hover{
color:#FFAD90;
font-weight:bold;
}

色の指定は＃×××のところを好みでかえることが出来ます。

まとめ