MEMO GOLD ホームページ制作

//
//
//
////設定を配列で入れて、welcartで利用する際、global宣言しやすくする
////また、この方が、wordpressの設定とかぶることがない
//function my_admin_site_vars() {
//
////// 関数内なので　記事IDを読み込む
//global $site_seo,$site,$site_con,$site_con2;
//    
//    
//
////グローバルとして宣言
//  global $my_admin_site;
//
//    
//    //配列で入れ込む
//  $my_admin_site = array(
//
//
//      
////    //インフォカテゴリ （絞り込み 除外用）
////    'info_cat' => 734,
////    'info_cat_out' => -734,
////
////    //ブログカテゴリ
////    'd_blog_cat' => 243, //注意 blog_cat が cat_blog_archiveで定義してる
////    'blog_cat_out' => -243,
//      
//     
//      
//
////自作定義
////    'top' => '', // a_blog_boxに仕込む　トップだけ新着ブログを表示 定義
////    'kansei_kiji_no' => '', //完成見学会用 a_info1
////    'page_all' => '', //すべて読むページで仕様 prev nextを 出さない
////
////    'yarpp_blog' => '',
//
//

//管理画面のタイトルの文字を置き換え　外部リンクを挿入
//クォーテーションの入れ子にポイント
add_action( 'admin_head', 'change_text' );
function change_text() {
    $echo1 = "<span>メニュー</span>　<a href='/wp-content/themes/D/d/fontcss/fontello/demo.html' target='_blank'>アイコン確認</a>";
      echo '
      <script type="text/javascript">
      jQuery(document).ready(function($){
    $("#cfs_input_2842 h2").html("'.$echo1.'");
        });

      </script>
      ';
}

 

Welcartで会員ページやカートページを判定して条件分岐するソースコードと、それを使った自作関数

会員ページ or カートページの判定

<!-- 会員ページの判定 -->
<?php if($usces->item->post_name == 'usces-member') : ?>
    <p>会員ページだった場合</p>
<?php endif; ?>

<!-- カートページの判定 -->
<?php if($usces->item->post_name == 'usces-cart') : ?>
    <p>カートページだった場合</p>
<?php endif; ?>

<!-- 会員ページ、カートページの条件分岐 -->
<?php if($usces->item->post_name == 'usces-member') : ?>
    <p>会員ページだった場合</p>
<?php elseif($usces->item->post_name == 'usces-cart') : ?>
    <p>カートページだった場合</p>
<?php else : ?>
    <p>会員ページ、カートページ以外のページ</p>
<?php endif; ?>

 

会員ページの細かい判定

<?php if($usces->page == 'login') : //会員ページの場合 ?>
    <p>ログインページです</p>
<?php elseif($usces->page == 'newmemberform') : ?>
    <p>新規入会ページです</p>
<?php elseif($usces->page == 'newcompletion') : ?>
    <p>新規ご入会完了ページです</p>
<?php elseif($usces->page == 'lostmemberpassword') : ?>
    <p>パスワード発行ページです</p>
<?php elseif($usces->page == 'lostcompletion') : ?>
    <p>パスワード発行メール送信完了ページです</p>
<?php elseif($usces->page == 'changepassword') : ?>
    <p>パスワード変更ページです</p>
<?php elseif($usces->page == 'changepasscompletion') : ?>
    <p>パスワード変更完了ページです</p>
<?php elseif($usces->page == 'member') : ?>
    <p>会員情報ページです</p>
<?php elseif($usces->page == 'editmemberform') : ?>
    <p>会員情報更新完了後ページです（会員ページと同じページに遷移します）</p>
<?php elseif($usces->page == 'ordercompletion') : ?>
    <p>注文完了ページです</p>
<?php else : ?>
    <p>会員ページ以外のページです</p>
<?php endif; ?>

カートページの細かい判定

<?php if($usces->page == 'cart') : //カートページの場合 ?>
    <p>カートページです</p>
<?php elseif($usces->page == 'customer') : ?>
    <p>お客様情報ページです</p>
<?php elseif($usces->page == 'delivery') : ?>
    <p>配送方法ページです</p>
<?php elseif($usces->page == 'confirm') : ?>
    <p>確認ページです</p>
<?php elseif($usces->page == 'ordercompletion') : ?>
    <p>注文完了ページです</p>
<?php else : ?>
    <p>カートページ以外のページです</p>
<?php endif; ?>

 

会員ページ、カートページの判定をする関数

//会員ページかどうかの判定
function is_member_page($page_name = 'usces-member') {
    global $usces;
    if($usces->item->post_name == $page_name) return true;
    return false;
}

//カートページかどうかの判定
function is_cart_page($page_name = 'usces-cart') {
    global $usces;
    if($usces->item->post_name == $page_name) return true;
    return false;
}

<?php if(is_member_page()) : ?>
<p>会員ページの場合</p>
<?php elseif(is_cart_page()) : ?>
<p>カートページの場合</p>
<?php endif; ?>

会員、カートページの細かい判定用の関数

//会員ページ、カートページを細かく判定する関数
function is_welcart_page($page_name = 'cart') {
    global $usces;
    if($usces->page == $page_name) return true;
    return false;
}

デフォルトではカートページの判定をしています。他のページで判定したい場合は以下の文字を渡して下さい。

cart　（カートページの場合）
customer　（お客様ページの場合）
delivery 　（配送方法ページの場合）
confirm　（確認ページの場合）
ordercompletion　（注文完了ページの場合）
login　（ログインページの場合）
newmemberform　（新規会員登録ページの場合）
newcompletion　（新規会員登録完了ページの場合）
lostmemberpassword　（パスワード発行ページの場合）
lostcompletion　（パスワード発行メール送信完了ページの場合）
changepassword　（パスワード変更ページの場合）
changepasscompletion　（パスワード変更完了ページの場合）
member　（会員情報ページの場合）
editmemberform　（会員情報更新完了後ページの場合）
例えば配送方法ページかどうかを調べたい場合は以下のようにします。

 

<?php if(is_welcart_page('delivery')) : ?>
<p>配送方法ページの場合</p>
<?php endif; ?>

 

春日井の広告会社

春日井の看板屋

春日井のデザイン会社

春日井のロゴ作成

春日井　SNS運用代行

春日井　プロカメラマン　撮影

 

春日井 動画撮影

 

春日井 Tシャツ作成

 

春日井　名刺作成

春日井　名刺作成

 

//投稿時にACFのカスタムフィールドの画像を自動でアイキャッチに登録する
function acf_set_featured_image( $value, $post_id, $field ) {
    if($value != '') {
        add_post_meta($post_id, '_thumbnail_id', $value);
    }
    return $value;
}
add_filter('acf/update_value/name=event_img1', 'acf_set_featured_image', 6, 3);//アフター
//add_filter('acf/update_value/name=sekou_before', 'acf_set_featured_image', 10, 3);//ビフォー
//add_filter('acf/update_value/name=sekou_img2', 'acf_set_featured_image', 10, 3);//その他
//add_filter('acf/update_value/key=sekou_gallery2', 'acf_set_featured_image', 10, 3);//ギャラリー

https://tsukuriba.co.jp/721

 

name=にカスタムフィールドの名前

リニューアル側のhtaccsessに

リダイレクトを準備

テストサーバーにて、wp動作確認後、（お問い合わせフォームテスト）

本番サイトにてセッティング　SSL 動作確認URL（これはcssがあたらないので崩れる）

メールの設定

xにてdkim@でメール作成

さくらと　ｘでdkim設定

webサーバーとメールサーバーを分ける　DKIM設定

SPFも設定

v=spf1 +a:www427b.sakura.ne.jp +mx include:spf.sender.xserver.jp ~all

 

さくらでテストメールアドレスを作成し、送受信テスト

（ネームサーバー変更後のテスト用）

Xにて

dnsを変更する

 

MXレコードを mail.ドメインに

mail.ドメインのaレコードをさくらのIPに

 

ネームサーバーをxserverに変更

 

その後１時間程度待って確認

1時間じゃ反映されない

また、dnsをxserverに変更して、

その後、すぐにxserverを使っているメールアドレスからメールを送ると、

りーたんメールが届く、

ヤフーなどは普通に届く。

 

これは多分xserver内部でメールを送っているからだろう

この際、りーたんメールには、Aレコードが反応しないと

<test@top-flag.com>: host top-flag.com[183.181.86.17] said: 554 5.7.1
<test@top-flag.com>: Recipient address rejected: Access denied (in reply to
RCPT TO command)

とくるが、実際は　MXレコードをさくらに飛ばしているはずなのに、

それが全く効いていない状態だ。

xserverで設定したMXのDNSが効いていなく、

メールが届かない。汗

xserver同士の問題だが、これはこれでそれなりに問題。

xドメインでDNSを設定すればよいのかもしれないが、

全部手入力しなければいけない。

 

※大きく間違えた箇所

18:00頃　ネームサーバーを変更

21:40分　まだ旧ページが表示されてるが、dnsをネットで確認すると切り替わってる

モバイルで4Gでアクセスすると、無効なURLです

その後、古いページにまた。

何かおかしいと思ったら、SSLを作成していなかった。

ドメイン追加時に多分警告されたはずだが今回スルーしたか、わすれていた。

たしか、いつもなら現在のドメインのDNSに何かを入れることで、NSがサーバーにあたってなくても、SSLをあらかじめ設定できたはず。

これをわすれてたので、慌てて、というか？えって感じでSSLを設定した。

あと１時間かな？

メールは届くようになった

 

 

 

<tr>
<th class="mob_none">　</th>
<td style="font-size: 0.8rem;">Google reCAPTCHA で保護されています
    <a href="https://policies.google.com/privacy">プライバシー</a>・<a href="https://policies.google.com/terms">利用規約</a></td>
</tr>

コンタクトフォーム下段

css

.grecaptcha-badge { visibility: hidden; }

 

■公開前

サイト設定・ディスプリクション　キーワード　タイトル

メディア削除

https://trickster.tools/title-description/

ファビコン

https://rakko.tools/tools/69/

favicon DF 上手くいかなかった

sns用サムネイル　他設定

/1_img/1_site/thum_fb.jpg

 

メール送信テスト

 

管理画面調整

http://www.d-marking.com/%E7%AE%A1%E7%90%86%E7%94%BB%E9%9D%A2%E3%80%80%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC/

 

■公開後

メールアドレス変更　フォーム

ノーインデックス解除

春日井ナビ　自サイト

ブログからリンク

公開後順位チェック

アナリティクス　webマスター

マイビジネスリンク

snsリンクチェック

 

/**
* spammail
*/
function wpcf7_validate_spam_message( $result, $tag ) {
    $value = str_replace(array(PHP_EOL,' '), ”, esc_attr($_POST['event_basho_jyusho']));
    if (!empty($value)) {
    if (preg_match('/^[!-~]+$/', $value)) {
    $result['valid'] = false;
    $result['reason'] = array('event_basho_jyusho' => '日本語で入力してください');
    }
    }
    return $result;
    }
    add_filter( 'wpcf7_validate', 'wpcf7_validate_spam_message', 10, 2 );

event_basho_jyushoのフィールド　今回は住所

 

https://www.dm2.co.jp/blog/4852

add_filter('get_terms_orderby', 'order_terms_by_slug', 10, 3);
function order_terms_by_slug($orderby, $args, $taxonomies) {
    if($taxonomies[0] == 'artist'){
    $orderby = 't.name';
}
   
    return $orderby;
}

ひんとはここから

Using WordPress ‘get_terms_orderby’ PHP filter

add_filter('get_terms_orderby', 'your_custom_function', 10, 3);
function your_custom_function($orderby, $args, $taxonomies) {
    // your custom code here
    return $orderby;
}

$orderby (string): The ORDERBY clause of the terms query.
$args (array): An array of term query arguments.
$taxonomies (string[]): An array of taxonomy names.

ということで

$taxonomies[0] == としたらうまくいった

$orderby = ‘t.term_id DESC’;

$orderby = ‘t.slug ASC’;

カスタムメタキーで用語を並べ替える

$orderby = “meta_value ASC、t.name ASC”;

ここにも正解かいてあるわ

カスタムメタキーと分類法に基づいて用語を並べ替えます

add_filter('get_terms_orderby', 'order_terms_by_custom_meta_key_and_taxonomy', 10, 3);
function order_terms_by_custom_meta_key_and_taxonomy($orderby, $args, $taxonomies) {
    if (in_array('your_taxonomy', $taxonomies)) {
        $orderby = "meta_value ASC, t.name ASC";
    }
    return $orderby;
}

 

 

Bulk Term Editor

地域　愛知岐阜カーコート　Bulk Term Editor.xlsx

ダークモードのcssを入れても無反応

色々試したが不明

d-markingのやつはできたけど

それと同じcssを入れてもうまくかなかった？

なぜか通常まで白くなった

新しくsvgを書き出して、他のサイトからコピったスタイルを入れても今度は変化なし　ダークモードでならない

データのせいか　svgがちがうのかもしれない。

 

また、スマホ等のマークは

別のアイコンが出ているみたい

https://rakko.tools/tools/69/

 

上記でsvgを書き出すと、今度は縦長に、

悩んだ結果、元のsvgを正方形のボックスに入れて書き出すとできた

つまり、自動で正方形に変形させるしくみなようで、

今まで辺でなかった理由は、書き出した画像がほぼ正方形だったということもある。

 

違う形式でイラレで書き出しても同じ

多分、分岐のカラーモード自体がブラックモードと認識されてる

システムのダークモード　カラーモードの分岐なようだ

つまりクロームのモードではない

シークレットで白くなったのはバグ？

.cls-1{fill:none;}
@media(prefers-color-scheme: dark) {.cls-2{fill:#fff;}}

@media (prefers-color-scheme: light){.cls-2{fill:#1a1a1a;}}

全部

<?xml version="1.0" encoding="UTF-8"?>
<svg id="_レイヤー_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 412 412">
<defs><style>
.cls-1{fill:none;}
@media(prefers-color-scheme: dark) {.cls-2{fill:#fff;}}

@media (prefers-color-scheme: light){.cls-2{fill:#1a1a1a;}}

</style>
</defs>
<g><g><path class="cls-2" d="m117.67,337.01c-20.85-36.35-41.74-72.69-62.57-109.05-8.32-14.52-8.42-29.09-.04-43.66,16.89-29.38,33.77-58.78,50.64-88.18,5.07-8.84,10.11-17.69,15.17-26.56-6.58-10.98-12.95-21.59-19.63-32.74C68.68,93.56,36.47,149.68,4.08,206.12c32.5,56.63,64.93,113.13,97.82,170.44,6.51-12.03,12.54-23.19,18.58-34.37-1.04-1.92-1.89-3.57-2.81-5.18Zm169.31-198.13h29.53c.65-15.81-4.5-28.78-16.82-38.33-12.41-9.62-26.44-11.04-40.56-4.78-20.16,8.94-28.56,25.97-29.3,47.13-.64,18.41-.59,36.83-.87,55.25-.03,1.82-.2,3.63-.34,5.98-8.53-.66-16.58-1.29-24.89-1.94v22.23c8.37-.61,16.41-1.2,25.06-1.83-.7,33.32.72,66-5.33,98.46h33.31c-2.04-32.93-4.05-65.5-6.11-98.74,9.56.93,17.61,1.71,25.69,2.5v-23.46c-8.69,1.03-17.05,2.02-26.93,3.19,0-20.4-.07-39.63.07-58.86.02-3.19.59-6.53,1.64-9.55,4.5-12.94,12.68-22.59,26.19-26.5,8.72-2.53,14.72,2.09,14.53,11.1-.09,4.31-1.66,8.61-2.73,12.86-.43,1.7-1.32,3.28-2.16,5.29ZM140.41,62.07c41.62-.03,83.24-.13,124.86-.07,16.52.02,29.16,7.15,37.48,21.54,17.66,30.54,35.27,61.11,52.91,91.66,4.5,7.79,9.06,15.55,13.31,22.84h38.54c-33.06-57.26-65.55-113.53-97.7-169.2H113.45c7.12,11.64,13.74,22.46,20.33,33.24,2.56,0,4.59,0,6.63,0Zm32.55,171.57c-5.7-4.81-10.92-10.51-17.32-14.11-28.9-16.26-60.07.41-63.3,33.43-1.01,10.38.55,20.37,4.35,30.07,9.68,24.7,29.96,38.62,56.31,38.57,12.96-.02,25.92,0,38.89,0,4.4,0,8.8,0,14.15,0-9.24-76.59-7.42-152.46-2.04-228.51h-32.71c1.89,24.25,4.48,48.12,5.42,72.06.93,23.9.2,47.87.2,72.89-1.78-2-2.73-3.36-3.95-4.39Zm2.53,71.06c-9.01,4.98-17.48,3.65-25.91-.05-19.49-8.57-33.86-32.86-30.8-52,2.36-14.79,13.78-22.83,28.46-19.7,11.89,2.53,20.84,9.67,28.12,19.09.68.89,1.27,2.16,1.24,3.24-.31,16.49-.72,32.97-1.12,49.42Zm193.96-90.96c-1.17,1.91-2.08,3.33-2.92,4.79-21.12,36.59-42.2,73.2-63.37,109.76-8.4,14.5-21.11,21.79-37.87,21.79-40.4,0-80.81-.09-121.21-.15-3.54,0-7.08,0-10.66,0-5.77,10.44-11.29,20.42-16.78,30.4-.39.7-.63,1.48-1.21,2.85h194.74c32.61-56.53,65.15-112.95,97.74-169.44h-38.46Z"/><rect class="cls-1" width="412" height="412"/></g></g></svg>

 

つまり何がベスト？

パソコンのダークモードに対して、アイコンを用意しても、

ブラウザのデザインを変更していたら無効だと伝える。

その上で、svgをダークモードにも対応させる。

サファリはsvgでは駄目なので、

https://rakko.tools/tools/69/

で正方形のsvgをpngにかえ、設置する。

ここの色は3個選択肢がある。

背景白のロゴにするか

背景なしのロゴにするか

また、ロゴがクロの場合、白という選択もある。

アップルタッチアイコンを優先するなら背景白

ロゴがクロの場合は、背景白をつけたほうがいいか

カラーロゴは背景ない方がブックマークなどはかっこいいと思うが、背景白がいいのかな？トータル

https://qiita.com/y-w/items/614843b259c04bb91495

1. 1. 設定画面を開く
ショートカットキーcommand + ,(Windows: Ctrl + ,)または、メニューバーから基本設定 > 設定 で設定画面を開きます。

1. 2. 右上のアイコンをクリック
右上のアイコンをクリック
画面右上のアイコンのうち、上記のアイコンをクリックします。

 

https://github.com/1natsu172/vscode-insert-linebreak-tag/blob/master/CHANGELOG.md

phpを追加

 

"insert-br-tag.enableOnLanguage": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "markdown",
    "html",
    "php"
  ]

 

 

まず、大きく初めてわかったことが、

admin_site.phpを取得できない件で

原因は、インデックス、ページテンプレートが子テーマ内に定義されている事が原因なようだ。

get_header()

が問題なようだ

 

これで取得すると、ヘッダーが読み込まれた際、admin_site.phpで定義した設定を持たないまま、ヘッダーが読み込まれる

<?php include(get_template_directory() . "/header.php"); ?>

とすると、取得できる、なぜ？

 

 

そのため、元々自分もその様に構成しているのかもしれない。

インデックスを親テーマに入れたら取得できた。。。

 

 

 

まずインスタをビジネスアカウントに切り替えると、接続方法が変わるので、設定しなおさなければならない。

そのためには、Facebookページが必要であり、インスタからページの作成か、既存のページと紐づけをする。

紐づけの方法　モバイルから出ないとできないっぽい

参考サイト

 

 

 

インスタでビジネスアカウントに切り替え方法は

インスタ・設定・プロアカウントに切り替えるだけ

 

設定用のfacebookアカウントを作成して、

クライアントのfacebookページの管理者にしてもらうのが一番よい

（クライアントのID PASSを押しててもらっても良いが、パス変更やプライバシー的にどうかと。）

インスタにログインし、

その連動したfacebookアカウントでログインした状態で、ビジネスアカウントを連動させると

うまく表示させられる。

 

watanabe設定用で管理者になると良い

※ただ、プライバシーの設定で検索による電話番号の不可と検索エンジンの拒否を解除し、

プロフィールでのメールアドレスを自分のみから公開に変えてやっと出てきた（汗

 

クライアントのfbページのログイン情報を教えてもらって勝手にこっちでやるか、

伝える

 

新テーマでは、管理者追加は

FBページ

設定

新デザインのページ

Facebookへのアクセスを許可された人

追加から

 

faecbookをやっている人であれば、名前で検索すると出てくるようだ。

アプリの設定が、このユーザーに全権限を付与するが必要なのか不明だったため、実験を兼ねてトライしてみると

権限を付与するが必要なかった。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

cat_is_ancestor_of

【WordPress】get_the_categoryで子カテゴリのみ取り出す方法

          <div class="cat">
          
          <?php 
  $cats = get_the_terms($post->ID,'koe_chiiki');
  //子カテゴリを取得
  $current_cat = '';
  foreach ($cats as $cat) {
    if (!$current_cat || cat_is_ancestor_of($current_cat, $cat)) {
      $current_cat = $cat;
    }
  }
  // 子カテゴリを出力
  echo $current_cat->name;
?>
          
          </div>

<?php 
  $cats = get_the_category();
  //子カテゴリを取得
  $current_cat = '';
  foreach ($cats as $cat) {
    if (!$current_cat || cat_is_ancestor_of($current_cat, $cat)) {
      $current_cat = $cat;
    }
  }
  // 子カテゴリを出力
  echo "<a href=".get_category_link($current_cat->term_id).">".$current_cat->name."</a>";
?>

 

ボディーを　wraperでくるんで　hidden

それだけだと、だめ、

スライドの　親を全部hidden でもだめで、最後　ボーダーを消した。  box-sizing が効いてないテンプレだからか

#main_contents_top_fade{
    
    width: 100%;
    
    overflow: hidden;
    
    border: none!important;

}

 

あと、サウンドクラウドのアイフレームがあると、テーブルがでかくなっちゃう。

結局親をhiddenで スマホの変な横に動くのが治った

#main_contents{overflow: hidden;}

 

まず、メールアドレスがある場合は

メールをいつものように2つくる必要がある。

その設定を吐き出すには、移行を申請してから。

メールがなければ、ただ更新をストップしてもらえば良いだけ。

メールがあるので、告知後、

新サーバー情報発行　そのメール設定を送る

メール設定出来たら

切り替える

<p class="about_p box_anime">
      <span class="box__line"></span>
    <span class="box__line"></span>
    <span class="box__line"></span>
    <span class="box__line"></span>
    
    <span class="dbold">会社名・店名で検索されるだけで十分ですか？</span><br>
    訪問ユーザーはあなたの店名や会社名・サービス内容を知らないことを前提とします。<br>

FULLウェブデザインのホームページ制作は<span class="marker_orange">キーワードを決めて、検索エンジン対策（SEO対策）をして</span>制作します。<br>
<span class="dbold">検索順位に効く運営方法もご伝達いたします。</span><br></p>

        <script>
        
        $(window).on('scroll',function(){
  $(".box_anime").each(function(){
    let position = $(this).offset().top;
    let scroll = $(window).scrollTop();
    let windowHeight = $(window).height();
    if (scroll > position - windowHeight + 180){
      $(this).addClass('active');
    }
  });
});
        
    </script>

//線アニメーション

//横は長いから　これ
.transition5 {transition: all 5s ease;
     -webkit-transition: all 5s ease; 
    -moz-transition: all 5s ease;
    -o-transition: all 5s ease;}

//縦は短いからこれ
.transition3-1{transition: all 3s ease;
     -webkit-transition: all 3s ease; 
    -moz-transition: all 3s ease;
    -o-transition: all 3s ease;}

.box_anime {
//  width: 200px;
//  height: 200px;
      //display: block;
    
  margin: 0 auto;
  position: relative;
 overflow: hidden;
}
.box__line {
  position: absolute;
    
    
 
}
//横
.box__line:nth-child(1),
.box__line:nth-child(3) {
  width: 100%;
  height: 2px;
   .transition5;
}

//縦
.box__line:nth-child(2),
.box__line:nth-child(4) {
  width: 2px;
  height: 100%;
  .transition3-1;
    transition-delay: 2.5s;
}



.box__line:nth-child(1) {
  top: 0;
  left: 0;
  //background: linear-gradient(to right, transparent, orange);
    background: orange;
    transform: translateX(-100%);
    }

.box__line:nth-child(2) {
  top: 0;
  right: 0;
  //background: linear-gradient(to bottom, transparent, orange);
  background: orange;
  transform: translateY(-100%);
}

.box__line:nth-child(3) {
  bottom: 0;
  left: 0;
  //background: linear-gradient(to left, transparent, orange);
 background: orange;
  transform: translateX(100%);
}

.box__line:nth-child(4) {
  top: 0;
  left: 0;
  //background: linear-gradient(to top, transparent, orange);
    background: orange;
  transform: translateY(100%);
}




.active {
.box__line:nth-child(1){
    
     transform: translateX(100%); 
}
    
.box__line:nth-child(2) {
      transform: translateY(100%); 
        
    }
.box__line:nth-child(3){
    
     transform: translateX(-100%); 
}
    
.box__line:nth-child(4) {
      transform: translateY(-100%); 
        
    }

    }

スクロールでアクティブクラス

横線をトランジションで左右移動

トランジションディレイで送らせて

縦線を上下移動

http://www.d-marking.jp/

v=spf1 a:www427b.sakura.ne.jp +a:sv5036.xserver.jp mx ~all

チェックツール
https://www.kitterman.com/spf/validate.html
説明

SPFレコードとは？正しい書き方を徹底解説

https://mxtoolbox.com/SuperTool.aspx?action=spf%3astingmuzik.com&run=toolpage