///プラグインの自動アップデートを無効化 add_filter( 'auto_update_plugin', '__return_false' );
これでされないらしいが、
プラグイン画面では、更新が有効になったまま
どうだろうか？
welcart テーマファイル
welcart テーマファイルの問題点、
テーマフォルダ内に
wc_templates
を作成、その中に
cart
member
その他ファイルで稼働するが、
多分、welcartがプラグインフォルダからか、一度取得するためか、
サイト特有に持たせてあるカスタムフィールド値を持っていない。
試しに、
wc_templatesの中のwc_cart_page.phpのスタートに
$footer_sale=”12″;
と持たせても、
ヘッダーで処理される$footer_saleな分岐が稼働しない。ないですよとなる。
admin_siteで作った色々なセッティングを読み込みできないので、
wc_cart_page.phpを
<?php include(get_stylesheet_directory(). "/4_custom/welcart/page_welcart.php"); ?>
/4_custom/welcart/page_welcart.phpを
<?php include(get_template_directory() . "/func/admin_site.php"); //welcart のカテゴリ $welcart_cat= 877; $welcart_cat_out= -877; $itemreco = 878; $itemnew = 879; //商品ジャンルのカテゴリ $welcart_genre= 880; $souryou_muryou = '4400'; include(get_template_directory() . "/5_head/d_0_header.php");?> <body id="welcart_body" class="welcart_top">
と始めたらなんとか動いた。
ただ、カート内のテンプレートはすべてのページ作る必要がある
また、シングルもこれで作らないと、
skuセレクト
もつかえなさそう？
welcart バージョアップ時
まずはカートページがリセット
templates/cart/cart.php／カート
税込み表示 追加
</tr>';
//税込み 追記
$total_price = usces_total_price('return') - usces_order_discount('return');
$tax = $this -> getTax( $total_price );
$cart_table_footer .='
<tr>
<td class="num"> </th>
<td class="thumbnail "> </th>
<td colspan="3" class="aright">'.usces_tax_label(array(), 'return').'</td>
<td class="aright">'. usces_crform($tax, true, false,'return').'</td>
<td class="stock"> </th>
<td class="action"> </th>
</tr>
<tr>
<tr><th class="num"> </th>
<th class="thumbnail"> </th>
<th colspan="3" class="aright">税込合計<em class="tax">（税込）</em></th>
<th class="aright">'.
usces_crform(($total_price + $tax), true, false, 'return'). '</th>
<th class="stock"> </th>
<th class="action"> </th>
</tr>';
//ここまで
$cart_table_footer .=' </tfoot>
</table>';
さらにシングルページもデフォルトカートが出現
templates/single_item.php を
<?php
$html .= $content."\n";
?>
に
その他は変える必要なかったが、
過去色がついていたファイル
confirm.php はポイント？？使ってないんで未確認 違いがなかった
usces_cart.cssも色ついてるけど？？
けんしょうすると、welcart.less にて上書きしているようで、今はいらないようだ。
施工例 いれる 入れる 流れ 自分テーマ
チルドのファンクにて 整理 newびるど
// KEN設計 事例
require_once locate_template('4_custom/newlybuilt/newlybuilt_func.php');
カテゴリのみ built-chiiki/愛知県/
となってる
\その他スラッグ上書きできる
ほぼ、テーマ変更による 不具合ばかりだったが、
今回は入れ込んでないcssをクライアントlessに書き込んだのであとで、整理
また、flickSlider2.jsを利用しており、
1500に対応させた。
その際、carが効いていて、そのおかげで、うまく表示できていた部分があったので、
ba_sekou.lessに追記 また、carなしでも表示できた
carの表記では１５００に対応できなくなるので、max hight削除する
スマホでクロームのみ分岐させ、cssを適用する
if_mob_chorome.css
@charset "utf-8";
.footer_call .flex_wrap {padding-bottom: 12px;}
if_mob_chorome.php
<script>
var path = "<?php echo get_template_directory_uri(); ?>";
var userAgent = window.navigator.userAgent.toLowerCase();
if(userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1) {
//IE向けの記述
}else if(userAgent.indexOf('edge') != -1) {
//旧Edge向けの記述
}
else if(userAgent.indexOf('chrome') != -1) {
// //Googleクロームへの処理
// var d = document;
// var link = d.createElement('link');
// link.href = path + '/if_mob_chorome.css';
// link.rel = 'stylesheet';
// link.type = 'text/css';
// var h = d.getElementsByTagName('head')[0];
// h.appendChild(link);
}
else if(userAgent.indexOf('crios') != -1) {
//iOS Googleクロームへの処理
var d = document;
var link = d.createElement('link');
link.href = path + '/if_mob_chorome.css';
link.rel = 'stylesheet';
link.type = 'text/css';
var h = d.getElementsByTagName('head')[0];
h.appendChild(link);
}
else if(userAgent.indexOf('safari') != -1) {
//Safari向けの記述
}else if(userAgent.indexOf('firefox') != -1) {
//FireFox向けの記述
}else{
//その他のブラウザ向けの記述
}
</script>
ヘッダー
<?php ////////////////////////上書きcss ブラウザで判別 include(get_template_directory() . "/5_head/if_mob_chorome.php"); ?>
参考
path +
https://zenn.dev/itooo_web/articles/8d37f720e73c98
https://kaworu.jpn.org/kaworu/2008-05-24-2.php
ここに複数 でもうごくか？
https://arts-factory.net/useragentbrowser/
my_lazy_lode loading=”lazy”が効かないからさ
<div class="ggmap2 my_lazy_lode ">
<iframe loading="lazy" src="https://www.google.com/maps/d/embed?mid=1u1_RQyQSZ0TKAJhA_6oCqqUjPHQm3TSx&ehbc=2E312F" width="640" height="480" ></iframe>
</div><!-- /.ggmap -->
.my_lazy_lode{display: none;
&.on{display: block;}
}
display: noneしたコンテンツ内のgooglemapはロード時に読み込まれないので、ページ表示速度が上がる
フッターにこれも追加
//なんでも使えるように .my_lazy_lode が画面に入ったら onがつく .my_lazy_lode.on
$('.my_lazy_lode').each(function(){
var elemPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
// スマートフォン向けの記述
if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0) {
if (scroll > elemPos - windowHeight - 500){
$(this).addClass('on');
}
// タブレット向けの記述
} else if (navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('Android') > 0) {
if (scroll > elemPos - windowHeight - 500){
$(this).addClass('on');
}
} else {
// PC向けの記述
if (scroll > elemPos - windowHeight - 500){
$(this).addClass('on');
}
}
} );
//
アップした時、inview fadeInLeft とかが効かない
なんだったっけ？
swiper 複数 ループ 無理やり
html
<?php //swiper $imgs_number = 'imgs'; $gallery_title = '女性ドライバー専用車両'; include(get_stylesheet_directory() . "/2_head/swiper/swiper_gallery.php"); ?>
swiper html ループ 固定ページのAFCギャラリー
<?php
//前ページで設定
//$imgs_number = 'imgs2';
//$gallery_title = '女性専用設備';
//include(get_stylesheet_directory() . "/2_head/swiper/swiper_gallery.php"); ?>
<div class="swiper_wrap_wrap gallery_swiper_wrap inview fadeInBottom " >
<div class="swiper gallery_swiper gallery_swiper_<?php echo $imgs_number ?> ">
<!-- 必要に応じたwrapper -->
<div class="swiper-wrapper">
<!-- スライド -->
<?php
$imgs = get_field($imgs_number);
$i = 0; //最初用
foreach ($imgs as $img):
$attachment_id = $img['id'];
$img_url = wp_get_attachment_image_src($attachment_id, 'd_slider_img_size');
$i++; //画像が合計２個以内のときはフォーチを２回させたい
?>
<div class="swiper-slide">
<div class="img_box">
<img src="<?php print $img_url[0];?>" width="" class=" " alt="<?php echo $gallery_title ?>|<?php echo $alt1; ?> ">
</div><!-- /.img_box -->
</div>
<?php //endループフィールド
endforeach;
?>
</div>
<!-- 必要に応じてページネーション -->
<div class="swiper-pagination"></div>
<!-- 必要に応じてナビボタン -->
</div>
<div class="swiper-button-prev <?php echo $imgs_number ?>_pre"></div>
<div class="swiper-button-next <?php echo $imgs_number ?>_next"></div>
</div>
フッターすぅリプと 3_css_js_foot.php child
<?php ////////////////////////個ページ ギャラリー 同じページ内でswiperのナビが連動してしまうので、無理やり・・・・・ ?>
<script>
//ギャラリーimgs
const gallery_swiper_imgs = new Swiper(".gallery_swiper_imgs", {
//こっちがモバイル 兼 PC
slidesPerView: 1,/* コンテナ内に表示させるスライド数 */
//slidesPerView: 1.45, // コンテナ内に表示させるスライド数（CSSでサイズ指定する場合は 'auto'）
//centeredSlides: true, // アクティブなスライドを中央に配置する
//spaceBetween: 32, // スライド間の余白（px）
// loop: true,
speed:1000,//矢印クリック 自動再生で 動く速度 多いほうが遅く
//initialSlide: -1,// 0スタートで表示順調整
// autoplay: {
// delay: 3000, // スライドの自動再生速度調整 2000 = 2秒
// disableOnInteraction: false,
// resistanceRatio:0.1,
// },
breakpoints: { // こっちがPC
737: { // 画面幅px以上で適用 ブレークポイント
slidesPerView: '2', //autoにするとcssで指定したサイズで表示
//slidesPerView: 3,
//spaceBetween: 0, // スライド間の余白（px）
}
},
// ページネーション
// pagination: {
// el: ".swiper-pagination",
// clickable: true,
// },
// 前後の矢印
navigation: {
nextEl: ".imgs_next",//このクラスがあればそこがナビになる
prevEl: ".imgs_pre",//このクラスがあればそこがナビになる
},
});
</script>
<script>
//ギャラリーimgs2
const gallery_swiper_imgs2 = new Swiper(".gallery_swiper_imgs2", {
//こっちがモバイル 兼 PC
slidesPerView: 1,/* コンテナ内に表示させるスライド数 */
//slidesPerView: 1.45, // コンテナ内に表示させるスライド数（CSSでサイズ指定する場合は 'auto'）
//centeredSlides: true, // アクティブなスライドを中央に配置する
//spaceBetween: 32, // スライド間の余白（px）
// loop: true,
speed:1000,//矢印クリック 自動再生で 動く速度 多いほうが遅く
//initialSlide: -1,// 0スタートで表示順調整
// autoplay: {
// delay: 3000, // スライドの自動再生速度調整 2000 = 2秒
// disableOnInteraction: false,
// resistanceRatio:0.1,
// },
breakpoints: { // こっちがPC
737: { // 画面幅px以上で適用 ブレークポイント
slidesPerView: '2', //autoにするとcssで指定したサイズで表示
//slidesPerView: 3,
//spaceBetween: 0, // スライド間の余白（px）
}
},
// ページネーション
// pagination: {
// el: ".swiper-pagination",
// clickable: true,
// },
// 前後の矢印
navigation: {
nextEl: ".imgs2_next",//このクラスがあればそこがナビになる
prevEl: ".imgs2_pre",//このクラスがあればそこがナビになる
},
});
</script>
<script>
//ギャラリーimgs3
const gallery_swiper_imgs3 = new Swiper(".gallery_swiper_imgs3", {
//こっちがモバイル 兼 PC
slidesPerView: 1,/* コンテナ内に表示させるスライド数 */
//slidesPerView: 1.45, // コンテナ内に表示させるスライド数（CSSでサイズ指定する場合は 'auto'）
//centeredSlides: true, // アクティブなスライドを中央に配置する
//spaceBetween: 32, // スライド間の余白（px）
// loop: true,
speed:1000,//矢印クリック 自動再生で 動く速度 多いほうが遅く
//initialSlide: -1,// 0スタートで表示順調整
// autoplay: {
// delay: 3000, // スライドの自動再生速度調整 2000 = 2秒
// disableOnInteraction: false,
// resistanceRatio:0.1,
// },
breakpoints: { // こっちがPC
737: { // 画面幅px以上で適用 ブレークポイント
slidesPerView: '2', //autoにするとcssで指定したサイズで表示
//slidesPerView: 3,
//spaceBetween: 0, // スライド間の余白（px）
}
},
// ページネーション
// pagination: {
// el: ".swiper-pagination",
// clickable: true,
// },
// 前後の矢印
navigation: {
nextEl: ".imgs3_next",//このクラスがあればそこがナビになる
prevEl: ".imgs3_pre",//このクラスがあればそこがナビになる
},
});
</script>
<script>
//ギャラリーimgs4
const gallery_swiper_imgs4 = new Swiper(".gallery_swiper_imgs4", {
//こっちがモバイル 兼 PC
slidesPerView: 1,/* コンテナ内に表示させるスライド数 */
//slidesPerView: 1.45, // コンテナ内に表示させるスライド数（CSSでサイズ指定する場合は 'auto'）
//centeredSlides: true, // アクティブなスライドを中央に配置する
//spaceBetween: 32, // スライド間の余白（px）
// loop: true,
speed:1000,//矢印クリック 自動再生で 動く速度 多いほうが遅く
//initialSlide: -1,// 0スタートで表示順調整
// autoplay: {
// delay: 3000, // スライドの自動再生速度調整 2000 = 2秒
// disableOnInteraction: false,
// resistanceRatio:0.1,
// },
breakpoints: { // こっちがPC
737: { // 画面幅px以上で適用 ブレークポイント
slidesPerView: '3', //autoにするとcssで指定したサイズで表示
//slidesPerView: 3,
//spaceBetween: 0, // スライド間の余白（px）
}
},
// ページネーション
// pagination: {
// el: ".swiper-pagination",
// clickable: true,
// },
// 前後の矢印
navigation: {
nextEl: ".imgs4_next",//このクラスがあればそこがナビになる
prevEl: ".imgs4_pre",//このクラスがあればそこがナビになる
},
});
</script>
<?php ////////////////////////end/ 個ページ ギャラリー 同じページ内でswiperのナビが連動してしまうので、無理やり・・・・・ ?>
mobile.cssがキャッシュされてしまう、。PCでも出てる。
答え、
クロームの機能拡張
ビューポートリサイザーをオン・オフするとなおる。
これで確認する際、
一応ユーザーエージェンとを偽装してるのかも
そんで、色々ブラウザをひらいたししてると、それが消えていないバグ？
そんで、キャッシュされてるサイトで、オンオフすると消える
svgに光彩 文字に光彩
文字に光彩
全方位
text-shadow:
2px 2px 12px rgba(255, 255, 255, 0.4),
-2px 2px 12px rgba(255, 255, 255, 0.4),
2px -2px 12px rgba(255, 255, 255, 0.4),
-2px -2px 12px rgba(255, 255, 255, 0.4);
svgに光彩
全方位
filter :
drop-shadow(1px 1px 3px rgba(255, 255, 255, 0.4))
drop-shadow(-1px 1px 3px rgba(255, 255, 255, 0.4))
drop-shadow(1px -1px 3px rgba(255, 255, 255, 0.4))
drop-shadow(-1px -1px 3px rgba(255, 255, 255, 0.4));
google recaptcha コンタクトページのみ reCAPTCHA Lite 2024 8月から
Google reCAPTCHA V3で取得したサイトキーとシークレットキーを入力 コンタクトフォーム7
function.phpにコードを追加
// お問い合わせページを除き、「reCAPTCHA」を読み込ませない
function load_recaptcha_js() {
if ( ! is_page( array('お問い合わせ','select_by_area'))
// and !is_tax( array('event_big_fes','event_area','event_area'))
// and !is_post_type_archive( 'event_info' )
// and !is_singular('event_info')
) {
wp_deregister_script( 'google-recaptcha' );
}
}
add_action( 'wp_enqueue_scripts', 'load_recaptcha_js',100 );
css
.grecaptcha-badge { visibility: hidden; }
フォームに
<tr> <th class="mob_none"> </th> <td>[submit class:event_sub_bt "SUBMIT"]</td> </tr> <tr> <th class="mob_none"> </th> <td style="font-size: 0.8rem;">Google reCAPTCHA で保護されています <a href="https://policies.google.com/privacy" rel="noopener noreferrer" target="_blank" >プライバシー</a>・<a href="https://policies.google.com/terms" rel="noopener noreferrer" target="_blank" >利用規約</a></td> </tr>
https://developers.google.com/recaptcha/docs/faq?hl=ja
https://study.graceeight.com/recaptcha-badge
https://www.google.com/recaptcha/admin/site/683796841
https://www.google.com/recaptcha/admin/create
reCAPTCHA Lite
月1万件の評価
https://zenn.dev/chameleonmeme/articles/0e325a8ea585c8
utm 特別な改造 覚えてるだけ
TOPスライダー作成
アニメーションlessに、色々追加
（SLに使ったものはSLのlessにかいてあたり 被らないように）
斜めのlessをコンテンツに ただ、マルセの方がいい
新しいヘッダー ヘッダーメニュー （ページ内スクロールに対応してないっぽい
子に#go1と入れても 外部ページからリンクできていない
（検証結果 なぜか
if(strpos($ko_url,'#') !== 0): //#がついていないなら //$oya_url = ''; else: php endif;
としても、
elseの方まで$oya_url = ”;になってしまうから
if(strpos($ko_url,'#') !== 0): //#がついていないなら
//$oya_url = '';//からっぽにする ←これにすると おかしくなるから 直がきする
?>
<li class="dropdown__list"><a href="<?php echo $ko_url; //普通のリンク ?>"><?php echo $child_ko['mega_menu_text']; //リンクテキスト?></a></li>
<?php else:
//$oya_url = 'test';
?>
<li class="dropdown__list"><a href="<?php echo $oya_url .$ko_url; //#実現 ?>"><?php echo $child_ko['mega_menu_text']; //リンクテキスト?></a></li>
<?php endif; ?>
こうした。
飛んだ先の#go go_margnが効いていないようだった。
新しいフッターメニュー
新しいCTA
pop up
会社概要のレイアウト 動き
地図をはみ出させる
沿革の横に英字
固定ページに page make
カテゴリに page make
製品ページ一覧にて、W100繰り返しレイアウトのベースcss等
ページナビにやっぱカスタム投稿タイプいる カテゴリも タグも
コンタクトフォームに西暦とか そのcssも 書く方も
残
SL
pop up 設定
の方にまでまで
svg 書き出しずれる waseda わせだ
この場合、イラレの 書き出し 書き出し形式で
で小数点以下なんちゃらを5にした。
width100ワイド100コンテンツを作る場合のメモ css
.seihin_box_wrap_all{
padding: 56px 0;
@media screen and (max-width: 736px){
padding: 24px 0px;
}//@media screen 736px
}
.seihin_box_wrap{
&:nth-child(even){ background: #fbf7f8}
.seihin_box_wrap_in{
.flex_box;
padding: 36px 0;
//コンテンツサイズ
width: 1084px;
@media screen and (max-width: 736px){
width: 100%;
}//@media screen 736px
@media screen and (min-width: 1200px){
width: 1200px;
}//@media screen and (min-width: 1200px)
margin-inline: auto;
.img_box{ width: 20%; padding-right: 4%;
.img_box_in{ img{max-width: 100%;}}
}
.disp_box{
width: 76%;
.title{ font-size: 24px; font-weight: bold;
.sub_title{ font-size: 16px; font-family: 'Roboto Condensed', sans-serif; color: @site_color; padding-left: 1em; display: inline-block;}
border-bottom: solid #e4b4c2 4px ;
margin-bottom: 24px;
}
.disp{}
}
}
}
<div class="seihin_box_wrap_all"> <!-- --> <div class="seihin_box_wrap"> <div class="seihin_box_wrap_in"> <div class="img_box"> <div class="img_box_in"> <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/contents01.jpg" alt="マイクロカテーテル"> </div> </div> <div class="disp_box"> <h4 class="title">マイクロカテーテル <span class="sub_title">Micro catheter</span></h4> <div class="disp"> Ｘ線観察のため患部に造影剤注入、あるいは患部に薬剤注入などの処置を施す目的で使用する<br> 直径1.0mm程度のカテーテルです。サイズや硬度バランス等、様々なラインアップを揃えております。 </div> <div class="tsuzuki_box"><a class="d_button utm d_button2" href="/事業内容/">製品一覧 <i class=" icon-right-open"></i></a></div> </div> </div> </div> <!-- --> <!-- --> <div class="seihin_box_wrap"> <div class="seihin_box_wrap_in"> <div class="img_box"> <div class="img_box_in"> <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/contents02.jpg" alt="オクリュージョンバルーンカテーテル"> </div> </div> <div class="disp_box"> <h4 class="title">オクリュージョンバルーンカテーテル <span class="sub_title">Occlusion balloon catheter</span></h4> <div class="disp"> 動脈や静脈の塞栓術、動注化学療法等を実施する際に、血流を遮断し、<br> 治療を施す目的で使用するバルーン付きカテーテルです。 </div> <div class="tsuzuki_box"><a class="d_button utm d_button2" href="/事業内容/">製品一覧 <i class=" icon-right-open"></i></a></div> </div> </div> </div> <!-- --> <!-- --> <div class="seihin_box_wrap"> <div class="seihin_box_wrap_in"> <div class="img_box"> <div class="img_box_in"> <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/contents03.jpg" alt="カテーテルガイドワイヤー"> </div> </div> <div class="disp_box"> <h4 class="title">カテーテルガイドワイヤー <span class="sub_title">Catheter guide wire</span></h4> <div class="disp"> Ｘ線観察のため患部に造影剤や薬剤を注入したり、患部に拡張や生検などの処置を施す目的で使用するカテーテルを目的部位まで誘導するためのガイドワイヤーです。 </div> <div class="tsuzuki_box"><a class="d_button utm d_button2" href="/事業内容/">製品一覧 <i class=" icon-right-open"></i></a></div> </div> </div> </div> <!-- --> </div><!-- /.seihin_box_wrap_all -->
コンタクトフォーム7 ドロップダウン first_as_label
vivus.js 手書き風アニメーション まとめ
まず結果から、
なぜか、ウインドウサイズを大きくすると、発動が遅れたりと、
data-start=”240″ data-duration=”9″
（発動まで待つ時間 アニメーションの速度）
がうまく機能しないが、まあ大体でという感じならok
https://coco-factory.jp/ugokuweb/move02/9-4-2/
こちらを参照
これができるサンプル
これを変更してなんとかできた。
完成
css
//*========= 手書き風にするためのCSS ===============*/
.wrapper_tegaki{
margin-left: 5%;
margin-top: -5%;
z-index: 1;
position: relative;
// display: flex;
// align-items: center;
// justify-content: center;
//height: 100vh;
/*SVGのサイズ*/
svg{
max-width:240px;/*SVGタグの横幅*/
width:100%;/* レスポンシブ対応にするため100%を指定*/
height:auto;
}
}
//* マスクをするパスの設定*/
#mask .cls-1{
fill:none;
stroke:#FFFFFF;
stroke-width:24;/*線の太さを指定する*/
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:10;
stroke-dasharray: 1500; /* 線の間隔を指定する */
stroke-dashoffset:1500; /* 線の位置を指定する */
}
html
<div class="wrapper_tegaki">
<svg id="mask" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="203.4" height="74" viewBox="0 0 203.4 74" style="enable-background:new 0 0 203.4 74;" xml:space="preserve">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="<?php echo get_stylesheet_directory_uri(); ?>/img/s1984_moto.svg" width="203.4" height="74" mask="url(#clipmask)"></image>
<mask id="clipmask" maskUnits="objectBoundingBox">
<path data-start="240" data-duration="9" class="cls-1" d="m32.14,35.54c-3.77-7.92-6.61-8.43-12.93-4.66S2.28,41.74,2.58,46.83c.47,7.78,5.82,4.86,14.04,7.17s22.89,5.86,11.66,9.46-23.17,11.81-24.47,8.52c0,0-4.72-4.36-2.91-6.08s5.63-2.27,7.54-2.45,18.25-11.71,18.25-11.71l11.44-17.53,2.36-2.38,1.51,4.53-4.48,21.31-1.64,6.87,4.61-11.29,1.51-3.47,3.49-8.09,2.18,7.91-2.72,12.3-.31,3.01s4.97-13.43,7.15-12.73,8.06-6.3,8.06-6.3c0,0-.88,7.85-.4,8.76s3.78,10.92,3.78,10.92l-.58-17.9,6.55-9.46,6.31-9.59,4.49,10.84s-2.7,2.54-4.49,1.87-7.57,10.94-7.57,10.94l2.08,3.67,4.62,2.26,7.53-6.47,4.57-7.56,8.68.73,3.76-4.9-3.76-4.06s-4.45,1-5.7,2.36-2.36,15.32-2.36,15.32c0,0,2.33,1.97,2.54,1.74s9.99-3.87,9.99-3.87l3.64-5,15.91-23.82,8.72-7.71-5.3,19.82-4.33,13.17-.07,5.65,20.53-18.81,3.43-11.37s-4.7,4-5.46,4.36-1.07,1.84-2.52.68-2.9-5.04-1.44-6.81,6.77-6.89,6.77-6.89c0,0,6.98-.52,7.35-1.54s3.15,3.47,3.15,3.47l-9.39,34.25,14.4-26,6.82-1.56-2.01-9.77,5.61-6.18,7.98-.55.24,7.34-7.06,10.52-9.89,10.42,1.03,9.58,10.89-5.41,6-10.13-.61-6.96,9.33-11.76v10.69l17.62-2.83,5.32-14.18-9.8-3.46-3.29,36.74"/>
</mask>
</svg>
<!--/wrapper--></div>
js
new Vivus('mask', {//svgに指定したid名
type: 'scenario',// アニメーションのタイプを設定
// duration: 20,//アニメーションの時間。数字が小さくなれば速くなり、大きくなれば遅くなる
// forceRender: false ,//パスが更新された場合に再レンダリングさせない
animTimingFunction:Vivus.EASE_OUT,//動きの加速減速設定
});
htmlの
data-start=”240″ data-duration=”9″ が待 と速度だが安定しない
ｊｓの
type: ‘scenario’,// アニメーションのタイプを設定
が
data-start使えるやつ
vivus オプション
これの解説サイト
https://evoworx.dev/lab/svg-animation-vivus/
イラレでのポイント
パスを１本で書く
現物は ｓｖｇ
マスクはペーストでいれる
参考サイト通りhttps://coco-factory.jp/ugokuweb/move02/9-4-2/
赤文字のサイズはいられで作成したときのサイズを入れ込み
swiper 複数 top-slに利用時のメモ
https://webwork-plus.com/content/design/swiper-multiple.html
https://takechi-web.com/swiper-multiple/
私事の検証結果
結論
参考サイトのやり方で、スライドは別々の設定が可能だが、
ページネーションについては、
swiper-button-prev を使い回せない（.sl01 .swiper-button-prev）みたいに指定しても一緒に動く
そのためswiper-button-prevを使いまわしたい（デザインがきいているから）場合
swiper-button-prev page-prev1 とクラスをつけて、
設定でも page-prev1 の方をナビに設定する
増やす場合
swiper-button-prev page-prev2
設定でも page-prev2 とナビに設定する
最初ミスってたのは
const youtube_swiper = new Swiper(“.youtube_swiper”, {
と２個名前を替えること。最初のconst swiper のままやってた
完成コード
<script>
const youtube_swiper = new Swiper(".youtube_swiper", {
//こっちがモバイル 兼 PC
slidesPerView: 1,/* コンテナ内に表示させるスライド数 */
//slidesPerView: 1.45, // コンテナ内に表示させるスライド数（CSSでサイズ指定する場合は 'auto'）
//centeredSlides: true, // アクティブなスライドを中央に配置する
//spaceBetween: 32, // スライド間の余白（px）
// loop: true,
speed:1000,//矢印クリック 自動再生で 動く速度 多いほうが遅く
//initialSlide: -1,// 0スタートで表示順調整
// autoplay: {
// delay: 3000, // スライドの自動再生速度調整 2000 = 2秒
// disableOnInteraction: false,
// resistanceRatio:0.1,
// },
breakpoints: { // こっちがPC
737: { // 画面幅px以上で適用 ブレークポイント
slidesPerView: 'auto', //autoにするとcssで指定したサイズで表示
//slidesPerView: 3,
//spaceBetween: 0, // スライド間の余白（px）
}
},
// ページネーション
// pagination: {
// el: ".swiper-pagination",
// clickable: true,
// },
// 前後の矢印
navigation: {
nextEl: ".page-next1",//このクラスがあればそこがナビになる
prevEl: ".page-prev1",//このクラスがあればそこがナビになる
},
});
</script>
<script>
const slider_f_swiper = new Swiper(".slider_f_swiper", {
//こっちがモバイル 兼 PC
slidesPerView: 1,/* コンテナ内に表示させるスライド数 */
//slidesPerView: 1.45, // コンテナ内に表示させるスライド数（CSSでサイズ指定する場合は 'auto'）
//centeredSlides: true, // アクティブなスライドを中央に配置する
//spaceBetween: 32, // スライド間の余白（px）
// loop: true,
speed:1000,//矢印クリック 自動再生で 動く速度 多いほうが遅く
//initialSlide: -1,// 0スタートで表示順調整
autoplay: {
delay: 3000, // スライドの自動再生速度調整 2000 = 2秒
disableOnInteraction: false,
resistanceRatio:0.1,
},
breakpoints: { // こっちがPC
737: { // 画面幅px以上で適用 ブレークポイント
slidesPerView: 'auto', //autoにするとcssで指定したサイズで表示
//slidesPerView: 3,
//spaceBetween: 0, // スライド間の余白（px）
}
},
// ページネーション
// pagination: {
// el: ".swiper-pagination",
// clickable: true,
// },
// 前後の矢印
navigation: {
nextEl: ".page-next2",//このクラスがあればそこがナビになる
prevEl: ".page-prev2",//このクラスがあればそこがナビになる
},
});
</script>
ドロップダウンメニュー 参考
https://www.evoworx.co.jp/blog/dropdownmenu/
あなたは、医療従事者・医療関係者ですか？モーダルウィンドウ 年齢認証ポップアップ
popup maker をつかってなんとか出来そう
seo関係上、0秒表示はクローラーをブロックする可能性もゼロでないんで 検証注意
やり方は、
ページ指定
内容はエディターで自分で書く
cssは普通にサイトのcssに
閉じるボタンをcssで消す
.pum-close.popmake-close{display: none;}
エディタにボタンを作成
<p><button class="pum-close popmake-close" type="button" aria-label="Close">はい </button> いいえ</p>
この はい にて ウインドを閉じるボタンを再現 多分aria-label=”Close”が重要（閉じるボタンから引用）でなく、class=”pum-close popmake-close”が重要だった
ターゲットで投稿タイプやカテゴリー アーカイブも選べたので
固定ページ 製品 諸々をかける