MEMO GOLD ホームページ制作

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


   } );

//

 

なんだったっけ？

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のナビが連動してしまうので、無理やり・・・・・　 ?>

 

答え、

クロームの機能拡張

ビューポートリサイザーをオン・オフするとなおる。

これで確認する際、

一応ユーザーエージェンとを偽装してるのかも

 

そんで、色々ブラウザをひらいたししてると、それが消えていないバグ？

そんで、キャッシュされてるサイトで、オンオフすると消える

文字に光彩

全方位
    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 V3 を問い合わせフォームのページのみに表示する方法

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 (v3)

 

reCAPTCHA Lite

月1万件の評価

https://zenn.dev/chameleonmeme/articles/0e325a8ea585c8

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 設定

の方にまでまで

この場合、イラレの　書き出し 　書き出し形式で

で小数点以下なんちゃらを5にした。

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

 

Contact Form 7 をアップデートしたらドロップダウンのレイアウトがくずれた

まず結果から、

なぜか、ウインドウサイズを大きくすると、発動が遅れたりと、

data-start=”240″ data-duration=”9″

（発動まで待つ時間　アニメーションの速度）

がうまく機能しないが、まあ大体でという感じならok

https://coco-factory.jp/ugokuweb/move02/9-4-2/

こちらを参照

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/

赤文字のサイズはいられで作成したときのサイズを入れ込み

筆記体アニメutm.ai

 

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>

 

 

JavaScript不要！CSSだけで出来るドロップダウンメニューの実装方法

https://www.evoworx.co.jp/blog/dropdownmenu/

CSSで作る！吹き出しデザインのサンプル19選

【html】ulやliの中にdivやpやaをいれてもいいか解説

popup maker をつかってなんとか出来そう

特定のページだけにモーダルウィンドウを表示するWordPressプラグイン「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”が重要だった

ターゲットで投稿タイプやカテゴリー　アーカイブも選べたので

固定ページ　製品　諸々をかける

 

無料で使える！かっこいい＆かわいいカタカナフォント

無料で使える！ポップでかわいい日本語フリーフォント

【商用可】かわいい！日本語の手書きフリーフォント

 

手書き風　svg　マスク

https://coco-factory.jp/ugokuweb/move01/4-1-6/

Vivus.js

https://www.evoworx.co.jp/blog/animating-svg-with-vivus-js/

Vivus Instant」の使い方

 

実際fullのロゴをやってみた

<div class="svg_logo_white animate__animated animate__fadeIn" style="animation-delay:1.3s">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/top_svg/svg_logo_white.svg" width=""  class=" " alt="キーワード|<?php echo $alt1; ?> ">

</div>

<div class="svg_logo_anime"><?php //動くsvg インラインsvg
                include(get_stylesheet_directory() . "/img/top_svg/include_svg_full_logo.php"); ?></div>

<div class="svg_logo_color  animate__animated animate__fadeIn" style="animation-delay:1.3s">

<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/top_svg/svg_logo_color.svg" width=""  class=" " alt="キーワード|<?php echo $alt1; ?> ">

</div>

３つ用意して、ふわっと最後完成させる

///////svg rogo

/////inview  アニメーション
.inview{display: none;}
.inview.on{display: block;
}

.svg_logo_wrap{
    position: relative;
    margin-inline: auto;
    width: 100%;
    height: 56px;
    .transition;


   //padding-top: 200px;

   @media screen and (max-width: 736px){
    //padding-top: 100px;
    height: 33px;
}//@media screen 736px

 
   @top_svg_logo_size:500px;
   @top_svg_logo_size_mob:260px;

   .svg_logo_color img,
   .svg_logo_white img,
   .svg_logo_anime svg{
       width:@top_svg_logo_size;

       @media screen and (max-width: 736px){
        margin-left: -20px;

       }//@media screen 736px

       .transition;
       
   }

    .svg_logo_color{
        position: absolute;

        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        
        //margin-top: -2.5px; margin-left: -2.5px;

        img{
            //width: @top_svg_logo_size;
            @media screen and (max-width: 736px){
                width: @top_svg_logo_size_mob;
            }//@media screen 736px
        }

    }

    .svg_logo_anime{position: absolute;

        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

    line-height: 0;

        svg{
            //width: @top_svg_logo_size;

            @media screen and (max-width: 736px){
                width: @top_svg_logo_size_mob;
            }//@media screen 736px
            
        }
        
    }

    .svg_logo_white{
        position: absolute;

       
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        
        img{
            //width: @top_svg_logo_size;

            @media screen and (max-width: 736px){
                width: @top_svg_logo_size_mob;
            }//@media screen 736px
        }

    }


}

                         //なんでも使えるように　.inview が画面に入ったら onがつく  .inview.on
$('.inview').delay(300).queue(function(){
  //$('.inview').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 + 30){
     $(this).addClass('on');
    }
        // スマートフォン向けの記述
} else if (navigator.userAgent.indexOf('iPad') > 100 || navigator.userAgent.indexOf('Android') > 0) {
        // タブレット向けの記述
        if (scroll > elemPos - windowHeight + 200){
     $(this).addClass('on');
    }
} else {
        // PC向けの記述
        if (scroll > elemPos - windowHeight + 200){
     $(this).addClass('on');
    }
}


   } );

window.addEventListener('load', function(){
  scroll_effect();

内に追加

Vivus Instantで作成したアニメーションSVGは、

それを囲ったdiv ,svgにstyle=”animation-delay:1.3s”を書いても反映されないため、それ自体の発動を遅らせるには、

inview を使って、onさせて、onを遅らせることで実行できた。

そのまま表示させると、アニメーションの発動が早くて、見せ場がみにくかった

margin-inline: auto;

https://zenn.dev/tonkotsuboy_com/articles/margin-inline_auto

 

width: fit-content

見出しに使えるfit-contentを解説してみる

transition: 1.5s cubic-bezier(0.15, 1.13, 0.25, 1);

 cubic-bezier

説明

https://qiita.com/96usa_koi/items/6f313f1d664806a77313

目安便利

https://easings.net/#

ジェネレーター

https://cubic-bezier.com/#.13,.68,.86,.32

 

border-radius: 100vh;
border-radius: 9999px;

https://jajaaan.co.jp/web-production/frontend/border-radius/

デザイン参考 web

https://jajaaan.co.jp/service/web/ 斜めデザイン

https://casitaflor.com/recruit/　1.ブラシ　動く　2.ホバー白黒　3.英語が右から左

 

https://dynamo-inc.jp/　TOPのみかっこいい　動画、スクロール背景

 

昭和

https://showa-ds.co.jp/　1.svg 文字　色がつく　書いてるよう　 2.スクロールで現れる人　２重で現れるアニメーションで　動画のよう

 

タイトル　と同じカラーでビヨン

https://shimizu-jidousya.com/

こんなコラムで結構　順位入ってる　　小牧　春日井　守山　板金

https://shimizu-jidousya.com/column/

 

手書き風　svg　マスク

https://coco-factory.jp/ugokuweb/move01/4-1-6/

Vivus.js

https://www.evoworx.co.jp/blog/animating-svg-with-vivus-js/

 

Vivus Instant」の使い方

 

 

 

<div class="flex2box effect-fade  inview left_mask_in">

inview left_mask_in

をつける

inviewは画面に入ったら　.onがつく すると表示される 透明度でopti

left_mask_inはアニメーション用のクラスで、今回の場合はボックス用のhiddenであり親

親にアフターでボックスを背景と同じ色につけて

左から右に動かすアニメーション

http://www.d-marking.com/%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%83%AB%E3%83%BC%E3%83%97%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84/

//スクロールで見えたら.onがつく
.inview {
    //transition-delay: .4s;
        transition: all 1.5s;
        position: relative;
        opacity: 0;
    }
    .inview.on {
        opacity: 1;
    }


//左から背景ベタがイン
.left_mask_in{ 
    overflow: hidden;
    position: relative;
//設定ベタ
&.inview::after{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    //background-color: #000;
    background-color:#e7f4ff;
    transform: translateX(0%);
    transition: transform ease 1s;
}
//見えたら
&.inview.on::after{
    transform: translateX(100%);
}

}

//なんでも使えるように　.inview が画面に入ったら onがつく  .inview.on
   $('.inview').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 + 30){
     $(this).addClass('effect-scroll');
    }
        // スマートフォン向けの記述
} else if (navigator.userAgent.indexOf('iPad') > 100 || navigator.userAgent.indexOf('Android') > 0) {
        // タブレット向けの記述
        if (scroll > elemPos - windowHeight + 200){
     $(this).addClass('effect-scroll');
    }
} else {
        // PC向けの記述
        if (scroll > elemPos - windowHeight + 200){
     $(this).addClass('on');
    }
}


   } );

//

フッターの

    window.onload = function() {
  scroll_effect();

  $(window).scroll(function(){
   scroll_effect();
  });

  function scroll_effect(){

ここに追記

  }
};
    </script>

 

 

 

Crop-Thumbnails Post

https://support.freee.co.jp/hc/ja/articles/204891596-%E5%80%A4%E5%BC%95%E3%81%8D%E3%82%92%E8%A8%98%E5%B8%B3%E3%81%99%E3%82%8B

 

割引の勘定科目を使うと、売上は売上のまま記載されるので、

課税金額が増えてしまう。実際の売上も分かりづらい

そのため、売上にマイナスを選べるようにする

「課税売上」の支出が登録できないため、まずはそれが使用できるように設定します。

［設定］→［税区分の設定］より、使用したい税区分の編集ボタンをクリックします。（例：課税売上）

必要になる検索項目にチェックを入れて［保存］ボタンをクリックします。

 

これで割引は、

売上にして　マイナスを記載するのみ