月: 2020年5月

メールサーバー移転の際、DNSのTTLによって反映時間が決まるということ

https://tanaka.sakura.ad.jp/2011/03/sakura-domain-nameserver-dns-ttl.html

日々のサーバ運用を行う中で、サーバ移転を行いIPアドレスが変更される機会は少なくありません。
しかし、DNSがなかなか反映されず「浸透しない」とつぶやかれている人をよく見かけます。
これは事前にTTLを小さくしていないために発生する問題ですが、今回はさくらインターネットを例に、DNSのTTLを変更する方法を解説します。
なお、ここで解説しているのは個別のレコード（Aレコード）を変更する時だけであり、ドメイン自体の移転などNSの変更の際に有効な手段ではありませんのでご注意下さい。

さて、DNSの場合は分散してサーバが設置されています。
そのため、DNSの情報が反映されることを「浸透」と表現されることが多いのですが、電子メールのようにサーバを中継してリレーしていくわけではありませんので、決して浸透していくわけではありません。
実際にはネームサーバとクライアントの間のどこかでキャッシュされていて、しばらくの間設定が反映されないために起こる現象です。
DNSは分散されているため、ドメイン管理者側ではどのネームサーバでキャッシュされているかがわかりませんし、当然のことながら世界中のネームサーバのキャッシュをクリアするわけにもいきません。
そのためクライアントによってアクセスが出来なかってもただ待つしかなく、なかなか反映されないとやきもきする事態に陥るわけです。

これを回避する方法はひとつであり、TTLを短くして事前にキャッシュの有効期限を短縮しておくことです。
ただし、TTLは短くても1時間、長ければ24時間以上に設定されていることもあり、事前に余裕を持って行っておかなければなりません。
一番理想的な手順は、作業開始時間から「TTLで示された時間分」だけ先にTTLを変更しておき、サーバ移転と同時にDNSのIPアドレスレコードを書き換え、TTLをもとに戻すという形です。
例えば、デフォルトのTTLが86400と指定されているなら、サーバ移転の24時間前までに作業を行う必要があります。

 

DNSの時間を測れるサイト

https://mxtoolbox.com/

こちらでドメインを入れて、結果のサーバをクリックで現れる

今回さくらのネームサーバーからxserver のネームサーバーだったが、

メールのみ、23時間たってもまだ古いサーバーに届くメールがある

メールアドレスで記憶しているのか、

メールソフトが記録しているのか不明だが、

（検証結果、再起動、新規メッセージでも同じドメインinfo@d-marking.comからのメールのみ古いサーバーに届く　IMAPだからか？　他のIMAPでも送らたので、覚えているのは間違いない）

返信メールで送ると古いサーバー

違うメールアドレスで新規でメール送ると新しいサーバーに届く。

 

 

今後の対策、

ネームサーバーを指定するとTTLが変更できない。
Xサーバーは60だからまだましか？？

さくらは24時間なので、まずい。

1.メールのみさくらにしている場合はttlを予め短くできそう。

2.ネームサーバでさくらにしてる場合、DNSにてさくらにまず向ける必要がありそう。

・スタードメインは予め、DNSを設定してから、ネームサーバーを変更できるので、スターはそちらで、。

・たしかお名前も同じくだった気が、。

・xドメインは最初にネームサーバーを変更しなければならないのでラグが起こりそう。予めDNSを入れれるように準備しな、。

 

3.DNSをxserverでも変更できるが、どうだったっけ？？

https://www.xserver.ne.jp/manual/man_domain_dns_setting.php

多分、まだ、浸かったことないかも、。

ネームサーバーをxserverに向けてるやつは、ここで変更できるかも。

 

https://www.weblab.co.jp/staff/other/4342.html

 

メールだが、IPアドレスを受信・送信サーバーでもいけるようだった。

すずきさんの場合

アイフォンでさくらのサーバー　xserver ２つのサーバーを受信サーバーにすれば

２こ同じアドレスにできた。

 

メールサーバー移転の際は、

そのように２つのアドレスを受信して、

落ち着いたら、ドメイン名に戻すと言うこと

 

 

Animate.css　＋ wow.js

「Animate.css + wow.js」でWebサイトにアニメーションをつけてみよう

現在は　Animate.cssが4.0になてるので注意

https://qiita.com/yaki-shake/items/71791a6453eaf0ca99f5
このサイトではanimateClass: ‘animate__animated’　でanimate__animatedにwowを適応させているのか？

とりま、
ただしアニメーションのクラス名も
fadeIn -> animate__fadeIn
と変わっているのでお気をつけくださいまし。
のこところ

animate.css
https://animate.style/　ここでスタイルチェック

wow.js
https://www.delac.io/wow/

設置

ヘッダー

 

  <link
    rel="stylesheet"
    href="<?php echo get_template_directory_uri(); ?>/0_d/js/animate.min.css"/>

<script src="<?php echo get_template_directory_uri(); ?>/0_d/js/wow.min.js"></script>

<script>
  new WOW(
      
  //{mobile: false}
      
  ).init();
    
    
   
</script>

挿入箇所

<h2 class="d_con_title2 wow animate__animated animate__bounce"><i class=""></i>BLOG</h2>

 <div class="tsuzuki_box2">   
    <a href="/ブログトップ/" class="btn_d wow animate__animated animate__fadeInUp" >BLOG TOP <i class=" icon-right-open"></i></a>
    </div>

 

管理画面　タイトル　disp に　文字カウントを足す

WordPress：入力文字数の制限や補足文の追加など、管理画面の抜粋入力欄周りをカスタマイズする方法

参考

// SEO 文字カウント
function excerpt_count() {
?>
<script>
  (function($) {
    var count = 130;
    $('.acf-field-5c64e5255254a label').after('<span style=\"color:#888; font-size:12px;\">現在の文字数： <span id=\"excerpt-count\"></span> / '+ count +'</span>');
    $('#excerpt-count').text($('#acf-field_5c64e5255254a').val().length);
    $('#acf-field_5c64e5255254a').keyup(function() {
      $('#excerpt-count').text($('#acf-field_5c64e5255254a').val().length);
      if ( $(this).val().length > count ) {
        $('#excerpt-count, #acf-field_5c64e5255254a').css('color', '#f00');
      } else {
        $('#excerpt-count,  #acf-field_5c64e5255254a').css('color', '#000');
      }
    });
//    $('#postexcerpt .inside p').html('※ここに入力した内容は一覧画面で <strong>"'+ count +'文字"</strong> までは表示されますが、それ以降は省略表示されます。').css('color', '#888');
  }(jQuery));
</script>


<script>
  (function($) {
    var count = 35;
    $('.acf-field-5c64e6d95254c label').after('<span style=\"color:#888; font-size:12px;\">現在の文字数： <span id=\"excerpt-count2\"></span> / '+ count +'</span>');
    $('#excerpt-count2').text($('#acf-field_5c64e6d95254c').val().length);
    $('#acf-field_5c64e6d95254c').keyup(function() {
      $('#excerpt-count2').text($('#acf-field_5c64e6d95254c').val().length);
      if ( $(this).val().length > count ) {
        $('#excerpt-count2, #acf-field_5c64e6d95254c').css('color', '#f00');
      } else {
        $('#excerpt-count2,  #acf-field_5c64e6d95254c').css('color', '#000');
      }
    });
//    $('#postexcerpt .inside p').html('※ここに入力した内容は一覧画面で <strong>"'+ count +'文字"</strong> までは表示されますが、それ以降は省略表示されます。').css('color', '#888');
  }(jQuery));
</script>


<?php
}
add_action( 'admin_footer-post-new.php', 'excerpt_count' );
add_action( 'admin_footer-post.php', 'excerpt_count' );

add_action( 'admin_footer-edit-tags.php', 'excerpt_count' );
add_action( 'admin_footer-term.php', 'excerpt_count' );

 

 

モバイルメニュー　修正　２回タップ　iso

iOS Safariで、リンクメニュー項目が2タップしないとリンク動作しないトラブル対応

という項目が色々あったが

現状では ios で　fixed したメニューでそうなっていた

スクロール中は止まるという動作となるので、それも勘違い項目

解決法

念の為

base.lessに

////////iso  fixed タッチ用iso  fixed タッチ用iso  fixed タッチ用iso  fixed タッチ用
@media screen and (min-width: 737px){
    a:hover  {
	color: @link_hover_color;
	text-decoration: underline;
}

////////////////////////////////イメージホバー透明////////////////////////////////

a img:hover{
	opacity:0.7;
filter: alpha(opacity=70);        //ie lt 8
-ms-filter: "alpha(opacity=70)";  //ie 8
-moz-opacity:0.7;                 //FF lt 1.5, Netscape
-khtml-opacity: 0.7;              //Safari 1.x 
}


a:hover img{

	
	opacity:0.7;
filter: alpha(opacity=70);        // ie lt 8 
-ms-filter: "alpha(opacity=70)";  // ie 8 
-moz-opacity:0.7;                 // FF lt 1.5, Netscape 
-khtml-opacity: 0.7;              // Safari 1.x 
}


//透明化させない
a:hover img.no_dhover,#img_box2 img{
opacity:1;
filter: alpha(opacity=100);        // ie lt 8 
-ms-filter: "alpha(opacity=100)";  // ie 8 
-moz-opacity:1;                 // FF lt 1.5, Netscape 
-khtml-opacity: 1;              // Safari 1.x
	}


//透明化少し
a:hover img.no_hover2 {
opacity:0.9;
filter: alpha(opacity=90);        // ie lt 8 
-ms-filter: "alpha(opacity=90)";  // ie 8 
-moz-opacity:0.9;                 // FF lt 1.5, Netscape 
-khtml-opacity: 0.9;              // Safari 1.x 
	}


    }//@media screen 737px 以上はこれ  

////////iso  fixed タッチ用iso  fixed タッチ用iso  fixed タッチ用iso  fixed タッチ用

とし、スマホのホバーをデフォルトを解除

 

モバイルメニューはこれで治らず、

JSを更新したら治った

 

変更点

jsファイル更新

jquery.sidr.min.js

jquery.sidr.dark.css

一応jquery.sidr.light.css　jquery.sidr.bare.css

d_mob_menu_css.css　は 300pxに変更

 

変更すればいけたが、追加でJSで最初見えないようにした　ででてきたから

https://www.j-cool.co.jp/blog/?p=646

.mob_menu{ display:none}
$(document).ready(function() {
      $('#sidr').fadeIn(1000);
  $('.simple-menu').sidr({side: 'right'});
});

参考にならなかった参考下記

https://www.plusdesign.co.jp/blog/?p=1710#spMenu

sidr.jsの使い方(横からスライドするメニュー)

本家　https://www.berriart.com/sidr/