WordPressテーマTCDのカスタマイズを研究するサイト

TCDテーマSwitch:タイピングエフェクトの速度を変更する、エフェクトをなくす方法

Q.トップページのスライダー上、下層ページのヘッダー画像上のキャッチフレーズのタイピングエフェクトの速度を変更したい。エフェクト自体をなくしたい。

A.下記の方法でご対応ください。

1. スピードを調節したい

▼編集するファイルと変更箇所
トップページ: front-page.min.js (assets/js/front-page.min.js)

var t=e(".p-header-content__title span"),a={speed:150,

下層ページ: functions.min.js (assets/js/functions.min.js)

e("#js-page-header__desc span").t({speed:150,

・speed:150の数値を変更ください。
・変更内容が反映されない場合はスーパーリロードをお試し下さい。

2. エフェクトをなくしたい

~min.jsファイルはminify化されているため、
比較的簡単なカスタマイズ内容(ex.タイピング部分の記述を削除する)でも、
変更範囲が別の記述箇所に及ぶことがございます。
 
そのため、テーマアップデートでこれらのファイルが修正された場合、
記事と同じカスタマイズ内容では反映されなくなる可能性もございます。
 
今回のご案内では、minify化前のファイル(assets/js/front-page.jsまたは~functions.js)の
該当記述を削除し、再度minify化した記述をご案内しております。

▼編集するファイルと変更箇所(全ての記述をコピーペーストしてください。)
トップページ: front-page.min.js (assets/js/front-page.min.js)

"use strict";!function(e){e(".p-header-content__title span");if(e("#js-header-slider").length){var i=e("#js-header-slider"),n=i.find(".p-header-slider__item"),t=(i.find(".p-header-slider__item-img"),i.data("speed"));e(window).on("js-initialized",function(){n.first().addClass("is-active"),i.slick({autoplay:!0,speed:1e3,autoplaySpeed:t,pauseOnHover:!1}),i.on("beforeChange",function(e,i,t,a){n.eq(a).addClass("is-active")}),i.on("afterChange",function(e,i,t){var a=0===t?n.length-1:t-1;n.eq(a).removeClass("is-active")})})}else e(window).on("js-initialized",function(){});var a=document.getElementById("js-index-content01__link"),d=document.getElementById("js-cb");a.addEventListener("click",function(){e("body, html").animate({scrollTop:d.offsetTop})})}(jQuery);

下層ページ: functions.min.js (assets/js/functions.min.js)

"use strict";!function(e){var t=document.getElementById("js-header");t.classList.contains("l-header--fixed")&&window.addEventListener("scroll",function(){window.scrollY>100?t.classList.add("is-active"):t.classList.remove("is-active")});var a=document.getElementById("js-global-nav");document.getElementById("js-menu-btn").addEventListener("click",function(){e(a).slideToggle()}),a.addEventListener("click",function(t){t.target.classList.contains("p-global-nav__toggle")&&(t.preventDefault(),t.target.classList.toggle("is-active"),e(t.target.parentNode.nextElementSibling).slideToggle())});var i=document.getElementById("js-pagetop");window.addEventListener("scroll",function(){window.scrollY>100?i.classList.add("is-active"):i.classList.remove("is-active")}),i.addEventListener("click",function(){e("body, html").animate({scrollTop:0},1e3)}),e(".p-widget .searchform #searchsubmit").val(e("<div>").html("&#xe915;").text());for(var n=document.getElementsByClassName("p-dropdown__title"),s=0,l=n.length;s<l;s++)n[s].addEventListener("click",function(t){t.target.classList.toggle("is-active"),e("+ .p-dropdown__list:not(:animated)",this).slideToggle()});for(var c=document.getElementsByClassName("p-tab-panel"),o=function(e,t){c[e].querySelector(".p-tab-panel__tab-item").classList.add("is-active"),c[e].querySelector(".p-tab-panel__panel").classList.add("is-active"),c[e].addEventListener("click",function(t){t.target.getAttribute("href")&&t.target.getAttribute("href").match(/#panel\d/)&&(t.preventDefault(),t.target.parentNode.classList.contains("is-active")||(c[e].querySelector(".is-active").classList.remove("is-active"),t.target.parentNode.classList.add("is-active"),c[e].querySelectorAll(".p-tab-panel__panel").forEach(function(e){e.style.display="none"}),document.querySelector(t.target.getAttribute("href")).style.display="block"))})},d=0,r=c.length;d<r;d++)o(d);for(var g=document.querySelectorAll(".p-faq__list"),u=0,v=g.length;u<v;u++)g[u].addEventListener("click",function(t){"DT"===t.target.nodeName&&e(t.target.nextElementSibling).slideToggle()});e(document).on("js-initialized",function(){var e=document.getElementById("js-page-header");e&&e.classList.add("is-active")})}(jQuery);

この記事は役に立ちましたか?
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

0

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。

お問合せ・ご要望

TCDLaboへのお問合せやご要望は
ご連絡フォーム をご利用ください。