kdcsライブラリー

ページトップに戻るボタンをjQuery使わずに行う方法
※ios15以前では「behavior: ‘smooth’」が効かないため、

html

<button id="page-top-js"><i class="fa icon-up-open"></i>◆</button>

javascript

// ページトップ スクロール jQuery不要-------------------------------------------
const topButton = document.querySelector('#page-top-js');

topButton.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});

window.addEventListener('scroll', () => {
  if(window.scrollY > 300) {
    topButton.style.bottom = '10px';
  } else {
    topButton.style.bottom = '-60px';
  }
});

css

#page-top-js{
    background-color: rgba(0,0,0,0.6);
}
#page-top-js:not(:target){
    filter: none;
    -ms-filter: none;
}
#page-top-js{
  display: block;
  position: fixed;
  z-index: 9999;
  bottom: -60px;
  right: 10px;
  width: 80px;
  padding: 20px 5px;
  background: rgba(78, 95, 185, 0.9);
  color: #fff;
  text-align: center;
  text-decoration: none;
  transition: .5s;
  border-radius: 5px;
}
#page-top-js:hover{ 
  background: rgba(72, 129, 217, 0.9);
}

ボタン要素をクリックし、cssのクラス（is_hidden）を対象の要素に付与する。
is_hiddenで要素を非表示にする。
ページを移動してもis_hiddenを維持するようにsessionStorageにデータを保存する。
セッションの期間のみ有効なのでサイドアクセスした場合は対象要素は表示される。

html

<div id="headline"><button id="hiddenButton">×</button>
<a href="<?php echo post_custom('permalink'); ?>">イベント開催 詳しくはこちら</a></div>
<!--/#headline-->

javascript
※複数のsessionStorageを扱う時は各変数名や（下記class名とconst key名）を変える
※記述は外部ファイルではなくfooter.phpのbody（閉じタグ）前に記述

const headline = document.getElementById('headline');
const button = document.getElementById('hiddenButton');
const key = 'class';
const value = 'is_hidden';
const data = sessionStorage.getItem(key);

if (data) {
headline.classList.add(value);
}

if (button) {
button.addEventListener('click', () => {
headline.classList.toggle(value);
if (headline.classList.contains(value)) {
sessionStorage.setItem(key, value);
} else {
sessionStorage.removeItem(key);
}
});
}

続きは実例を・・・
(続きを読む…)

通常のnew WP_Query内にpost_per_pageで取得するpost数を指定してもダッシュボード>設定>表示設定で指定した表示数になってしまうので以下の記述で対応。

<?php
$query = new WP_Query(
    $args = array(
        'post_type' => 'post',
        'post_per_page' => 3,
    )
);
$query->post_count = 3;
if ( $query->post_count > count( $query->posts ) ) :
	$query->post_count = count( $query->posts );
endif; ?>

<?php if($query -> have_posts()): while($query -> have_posts()): $query -> the_post(); ?>
// ループさせる内容
<?php else : ?>
// 記事が無い場合の記述
<?php endif; wp_reset_postdata(); ?>

ios15のsafari15.4からcssの「svh」が使用できるようになり、画面に表示されたアドレスバーを除いたビューポートの高さで表示できるようになっている。
「dvh」を使用するとアドレスバー有り無しでの切り替えも自動で行う。

ios14以前では「svh」が使えないためjavascriptを使って対応する

css

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

javascript

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

window.addEventListener('load', setVh);
window.addEventListener('resize', setVh);

javascript 別パターン

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();
    });

「-webkit-fill-available」を使ってcssのみで対応する方法もあるが、ネストされた要素には適用されないなどの問題もあるのであまり実用的ではない。

html{
  height: -webkit-fill-available;
}
body{
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

@supports (-webkit-touch-callout: none) {
html{
  height: -webkit-fill-available;
}
 
  body {
    min-height: 100vh;
    height: -webkit-fill-available;
  }
}

cssのtransitionでopacityを変化させるとAndroidのChiromeでちらつきが発生する対応策

will-changeを使用
「will-change プロパティは、どのような要素の変更が予測されているかブラウザーに助言します。」

will-change: opacity;
will-change: transform;

※will-changeを多用するとページのパフォーマンス低下につながります。

色の変化だけならopacityを使用せず、background-colorをrgbaで指定する方がよい

その他の対処法

-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;