【JavaScript】指定した期間中だけ表示を変えたい

<script>
<!--
window.onload = function() {
var now = new Date();
var start = new Date('2001/1/1 0:00:00'); // 表示開始日時
var end = new Date('2020/12/31 23:59:59'); // 表示終了日時
 
if ( start <  now && now < end ) {
    document.getElementById("campaign").style.display="block";
}
}
-->
</script>

<div id="campaign" style="display: none;">
ここに表示させたい内容を書き込む
</div>

Webフォントの表示遅延をなくしたい

@font-faceに、font-display: swap;を書く。

@font-face {
font-family: ‘font’;
src: url(‘font.woff’) format(‘woff’);
font-display: swap;
}

Google Fontsの場合はパラメータを使用できます。

https://fonts.googleapis.com/css?family=Lato&display=swap

スムーススクロールを使いたい

https://sakic.jp/blog/web/smooth-scroll

$(function () {
  // 全てのアンカータグを対象にする
  $('a').click(function (e) {
    var anchor = $(this),
      href = anchor.attr('href'),
      pagename = window.location.href;
    // 現在のurlのハッシュ以降を削除
    pagename = pagename.replace(/#.*/, '');
    // リンク先のurlから現在の表示中のurlを削除
    href = href.replace(pagename, '');
    if (href.search(/^#/) >= 0) {
      // 整形したリンクがページ内リンクの場合はページ内スクロールの対象とする
      // 通常の遷移処理をキャンセル
      e.preventDefault();
      var speed = 500;
      // 前段階で整形したhrefを使用する
      // var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $("html, body").animate({
        scrollTop: position
      }, speed, "swing");
      // ロケーションバーの内容を書き換え
      location.hash = href;
      return false;
    }
  });
});

【CSS】IEでposition: fixed;をやったらガタガタ揺れる場合の対応策

<script>
  if(navigator.userAgent.match(/MSIE 10/i) || navigator.userAgent.match(/Trident\/7\./) || navigator.userAgent.match(/Edge\/12\./)) {
    $('body').on("mousewheel", function () {
    event.preventDefault();
    var wd = event.wheelDelta;
    var csp = window.pageYOffset;
    window.scrollTo(0, csp - wd);
    });
  }
</script>

参考: https://social.msdn.microsoft.com/Forums/ie/ja-JP/9567fc32-016e-48e9-86e2-5fe51fd67402/new-bug-in-ie11-scrolling-positionfixed-backgroundimage-elements-jitters-badly?forum=iewebdevelopment

【WordPress】ポストナビゲーション(次の記事・前の記事)をつけたい

  1. Font Awesome呼び出しタグを貼り付けます
  2. 表示箇所にコードを貼り付けます

1. Font Awesomeのリンクを内に貼り付けます

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

2. 表示箇所にコードを貼り付けます

前の記事

<?php previous_post_link('%link','<i class="fa fa-chevron-circle-left"></i> %title'); ?>

次の記事

<?php next_post_link('%link','%title <i class="fa fa-chevron-circle-right"></i>'); ?>

私はBootstrapを愛用しているので、こんな感じになります。

<div class="row">
	<div class="col-sm-6">
		<p><?php previous_post_link('%link','<i class="fa fa-chevron-circle-left"></i> %title'); ?></p>
	</div>
	<div class="col-sm-6">
		<p class="text-right"><?php next_post_link('%link','%title <i class="fa fa-chevron-circle-right"></i>'); ?></p>
	</div>
</div>

【CSS】蛍光マーカーを引きたい

50%は太さ、
rgbはカラー、#123abcのように書いてももちろんOK、
最後の0%はお約束でそのまま。

background: -webkit-linear-gradient(transparent 50%, rgb(253,236,237) 0%);
background: -o-linear-gradient(transparent 50%, rgb(253,236,237) 0%);
background: linear-gradient(transparent 50%, rgb(253,236,237) 0%);