WordPress 2020.10.27

現在のページにクラスを付与する

<nav>
    <ul>
        <li><a <?php if( is_page('concept') ) { echo 'class="current"'; } ?> href="<?php echo esc_url( home_url( "/" ) ); ?>concept/">コンセプト</a></li>
        <li><a <?php if( is_page('news') ) { echo 'class="current"'; } ?> href="<?php echo esc_url( home_url( "/" ) ); ?>news/">新着情報</a></li>
        <li><a <?php if( is_page('menu') ) { echo 'class="current"'; } ?> href="<?php echo esc_url( home_url( "/" ) ); ?>menu/">メニュー_</a></li>
        <li><a <?php if( is_page('staff') ) { echo 'class="current"'; } ?> href="<?php echo esc_url( home_url( "/" ) ); ?>staff/">スタッフ</a></li>
        <li><a <?php if( is_page('salon') ) { echo 'class="current"'; } ?> href="<?php echo esc_url( home_url( "/" ) ); ?>salon/">サロン案内</a></li>
        <li><a <?php if( is_page('contact') ) { echo 'class="current"'; } ?> href="<?php echo esc_url( home_url( "/" ) ); ?>contact/">お問い合わせ</a></li>
    </ul>
</nav>

HTML jQuery WordPress 2020.4.24

画面幅によって読み込みファイルを変える〜レスポンシブウェブデザイン

<script>
  jQuery(document).ready(function($) {
    //PC環境の場合
    if (window.matchMedia('(min-width: 768px)').matches) { //切り替える画面サイズ
      $.ajax({
        url: '<?php echo esc_url( get_template_directory_uri() ); ?>/js/pc.js',
        dataType: 'script',
        cache: false
      });
      //スマホ環境の場合
    } else {
      $.ajax({
        url: '<?php echo esc_url( get_template_directory_uri() ); ?>/js/sp.js',
        dataType: 'script',
        cache: false
      });
    };
  });
</script>

CSS jQuery 2019.7.20

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

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

const setFillHeight = () => {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

let vw = window.innerWidth;

window.addEventListener('resize', () => {
  if (vw === window.innerWidth) {
  　// 画面の横幅にサイズ変動がないので処理を終える
    return;
  }

  // 画面の横幅のサイズ変動があった時のみ高さを再計算する
  vw = window.innerWidth;
  setFillHeight();
});

// 初期化
setFillHeight();

jQuery 2019.7.11

【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>

CSS 2019.5.12

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

Category

Recent posts

Category