あめぞう

CSS HTML 2023.5.23

スクロールバーが伸びたり縮んだり

HTML

<div class="scroll">
		<a href="#about">
			SCROLL
		</a>
	</div>
	<!-- /.scroll -->

SCSS

.scroll {
    bottom: 180px;
    font-family: 'Volkhov', serif;
    font-size: 13px;
    letter-spacing: .2em;
    position: absolute;
    right: 80px;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: sideways;

    a {

      &:before,
      &:after {
        content: "";
        display: block;
        height: 150px;
        width: 1px;
        position: absolute;
        right: 50%;
        top: 120%;
        transform-origin: top;
        background-color: rgba(0, 0, 0, 0.5);
      }

      &:before {
        background-color: rgba(0, 0, 0, 0.1);
      }

      &:after {
        transform: scaleY(0);
        animation: anim-scroll 2.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
      }
    }
  }

@keyframes anim-scroll {

0% {
    transform: scaleY(0)
  }

  35% {
    transform: scaleY(1);
    transform-origin: top
  }

  40% {
    transform-origin: bottom
  }

  50% {
    transform: scaleY(1)
  }

  85% {
    transform: scaleY(0);
    transform-origin: bottom
  }

  100% {
    transform-origin: top
  }
}

WordPress 2023.5.15

WordPressで予約投稿がずれる

タイムゾーンで東京を選択するとうまくいかないことがありました。

UTF+9に変更したらうまくいきました。

jQuery WordPress 2023.5.11

MW WP FORMでページ下部にフォームを付けた場合のページ遷移

<script>
jQuery(function($) {
	if ($('.error')[0] || $('.mw_wp_form_confirm')[0] || $('.mw_wp_form_complete')[0]) {
		$("body").addClass("mw_wp_form_dn");
	}
	const email01 = $('input:text[name="email"]').val();
	if (typeof email01 !== "undefined") {
		$("body").addClass("mw_wp_form_dn");
	}
});
</script>

CSS HTML jQuery 2023.5.8

タブ

HTML

<div class="tab-area">
 <div class="tab active">
   タブ１
 </div>
 <div class="tab">
   タブ２
 </div>
 <div class="tab">
   タブ３
 </div>
</div>
<div class="content-area">
 <div class="content show">
   タブ１コンテンツ
 </div>
 <div class="content">
   タブ２コンテンツ
 </div>
 <div class="content">
   タブ３コンテンツ
 </div>
</div>

SCSS

.tab-area {
  display: flex;
  .tab {
    align-items: center;
    border: 1px solid #000;
    color: #000;
    cursor: pointer;
    display: flex;
    justify-content: center;
  }
  .tab.active {
    background-color: #000;
    color: #fff;
  }
}
.content-area {
  .content {
    display: none;
  }
  .content.show {
    display: block;
  }
}

jQuery

$(function () {
  let tabs = $(".tab");
  $(".tab").on("click", function () {
    $(".active").removeClass("active");
    $(this).addClass("active");
    const index = tabs.index(this);
    $(".content").removeClass("show").eq(index).addClass("show");
  });
});

未分類 2022.11.23

slick.jsでarrowの位置を自由に設定する

ex) https://tr.you84815.space/slick/settings/appendArrows.html

HTML jQuery 2022.10.1

パラメータを外部に引き継ぐ方法

Transfer UTM Parameters From One Page To Another with GTM

domainsToDecorateにドメイン名を書き、

queryParamsに引き継ぎたいパラメータを書くだけ。

&lt;script>
(function() {
  var domainsToDecorate = [
          'domain1.com', //add or remove domains (without https or trailing slash)
          'domain2.net'
      ],
      queryParams = [
          'utm_medium', //add or remove query parameters you want to transfer
          'utm_source',
          'utm_campaign',
          'something_else'
      ]
  // do not edit anything below this line
  var links = document.querySelectorAll('a'); 

// check if links contain domain from the domainsToDecorate array and then decorates
  for (var linkIndex = 0; linkIndex &lt; links.length; linkIndex++) {
      for (var domainIndex = 0; domainIndex &lt; domainsToDecorate.length; domainIndex++) { 
          if (links[linkIndex].href.indexOf(domainsToDecorate[domainIndex]) > -1 &amp;&amp; links[linkIndex].href.indexOf("#") === -1) {
              links[linkIndex].href = decorateUrl(links[linkIndex].href);
          }
      }
  }
// decorates the URL with query params
  function decorateUrl(urlToDecorate) {
      urlToDecorate = (urlToDecorate.indexOf('?') === -1) ? urlToDecorate + '?' : urlToDecorate + '&amp;';
      var collectedQueryParams = [];
      for (var queryIndex = 0; queryIndex &lt; queryParams.length; queryIndex++) {
          if (getQueryParam(queryParams[queryIndex])) {
              collectedQueryParams.push(queryParams[queryIndex] + '=' + getQueryParam(queryParams[queryIndex]))
          }
      }
      return urlToDecorate + collectedQueryParams.join('&amp;');
  }

  // borrowed from https://stackoverflow.com/questions/831030/
  // a function that retrieves the value of a query parameter
  function getQueryParam(name) {
      if (name = (new RegExp('[?&amp;]' + encodeURIComponent(name) + '=([^&amp;]*)')).exec(window.location.search))
          return decodeURIComponent(name[1]);
  }

})();
&lt;/script>

PHP 2022.8.31

PHPを日本時間にあわせる

&lt;?php
date_default_timezone_set('Asia/Tokyo');
echo date('Y/m/d H:i:s');
?>

WordPress 2022.7.12

[WordPress]コンテンツエディタ削除

/* ===============================================
# エディタ削除
=============================================== */

function top_disable_block_editor($use_block_editor, $post){
	$post_type = $post->post_type;
	$post_name = $post->post_name;

	if($post_type === 'post' || $post_type === 'directsalon') return false;
	return $use_block_editor;
}
add_filter( 'use_block_editor_for_post', 'top_disable_block_editor', 10, 2 );

WordPress 2022.7.9

[WordPress]MW WP FORM 確認画面に進まない

wp_head

wp_footer

上記2点が記載されているか確認すること

サーバメール 2022.6.17

[VALUE DOMAIN]メールの送受信不可

送受信時、瞬時にエラーが発生した場合は、VALUE DOMAIN側で制限をかけている可能性があるので、

サーバのコンパネにログインして、

管理メニュー「お役立ちツール」から［SSH接続］をクリックをして数分待つと解決する可能性がある。

Warning: Undefined variable $additional_loop in /home/xs271582/amezo.net/public_html/wp-content/themes/amezo/index.php on line 47

Warning: Attempt to read property "max_num_pages" on null in /home/xs271582/amezo.net/public_html/wp-content/themes/amezo/index.php on line 47