あめぞう

【YouTube】自動再生したい

2019.10.30

https://webkikaku.co.jp/blog/javascript/slide_movie/

【CSS】height: 100vh;を確実にする

2019.7.20

.my-element {
  height: 100vh; /* 変数をサポートしていないブラウザのフォールバック */
  height: calc(var(--vh, 1vh) * 100);
}

// 最初に、ビューポートの高さを取得し、0.01を掛けて1%の値を算出して、vh単位の値を取得
let vh = window.innerHeight * 0.01;
// カスタム変数--vhの値をドキュメントのルートに設定
document.documentElement.style.setProperty('--vh', `${vh}px`);

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

jQuery

2019.7.11

<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フォントの表示遅延をなくしたい

CSS

2019.5.12

@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

WordPressで自動整形を無効にする方法

WordPress

2019.2.20

functions.phpに書き込む

remove_filter( 'the_content', 'wpautop' );

iframeでコンテンツの長さに合わせて高さを自動調整

jQuery

2018.6.10

iframeのコンテンツに合わせてJavaScriptで自動的に高さを調整する方法

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

jQuery

2018.5.26

$(function(){
  $('a[href^="#"]').click(function(){
    var speed = 200;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});

レスポンシブウェブデザインでイメージマップを使いたい

jQuery

2017.10.30

使い方はとてもかんたんです。

jQuery RWD Image Maps

1. 上のページから、「jquery.rwdImageMaps.min.js」をダウンロードします。
2. コードを貼り付けておしまい。

<script src="js/jquery.rwdImageMaps.min.js"></script>
<script>
  $(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
  });
</script>

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

CSS

2017.9.26

<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】個別記事のテンプレートをカテゴリ別に分けたい

WordPress

2017.4.7

single.phpの内容を下記のように書き換えます。

<?php
if ( in_category('salon') ) {
  include(TEMPLATEPATH . '/single-salon.php');
} else if ( in_category('staff') ) {
  include(TEMPLATEPATH . '/single-staff.php');
} else {
  include(TEMPLATEPATH . '/single-default.php');
}
?>

Recent posts