[記事公開日]2019/02/02
[最終更新日]2019/02/09

【WordPress】ヘッダーの設定

 

ヘッダーには、以下のコードを入れています。

 

・「fontawesome」のコード

・アニメーションCSS

・「Google Analytics」のコード

 

これらコードは、</head>の上に書きます。

スポンサーリンク  

 

「fontawesome」のコード

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

 

 ⇦このようなアイコンが使用できます。

挿入するコードは、ちょくちょく変わります。表示エラーでもない限り更新する必要はありません。最新は公式HPからコピーしましょう。

fontawesome
 

なお、fontawesomeを使う際は、CSSで「font-weight:900;」、または「font-weight:bold;」と指定するのをお忘れなく。指定しないと、アイコンが四角になってうまく表示されなくなってしまいます。(意外と大事)

 

可視状態になったらアンダーライン

 

<!--アンダーラインアニメーションCSS-->
<style>
strong {
    color: #333;
    text-decoration: none;
    background: linear-gradient(rgba(255, 204, 255,0) 60%, rgba(255, 204, 255,1) 40%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 4s;
}
</style>	
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(window).scroll(function(){
  var windowHeight =$(window).height();
  var windowTop =$(window).scrollTop();
  $("strong").each(function(){
    var objectImage =$(this).offset().top;
    if(windowTop > objectImage - windowHeight*3/4){$(this).css("background-size","100% 100%")};
  });
});
</script>

 

太字にすると、このようなアンダーラインを引くことができます。

 

(スクロール中に可視状態になったら、ピンクのアンダーラインが3秒間で引かれます。)

 

Google Analyticsの集計コード

 

<!-- Global site tag (gtag.js) - Google Analytics -->

(以下割愛)

 

 

以上です。