月: 2021年8月

同じサーバー内にあるドメインのメアドへの転送は　内部　を使っているので

メールのみ別サーバーの場合　そのアドレスは指定できない

.text{
    padding: 10px 0;
    margin: 0;
    font-size: 80px;
    font-weight: bold;
    background-image: linear-gradient(
        70deg,
        #dc143c 45%, /* font color */
        #FFF 50%,
        #dc143c 55% /* font color */
    );
    background-size: 500% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: shine 2s infinite;
}

@keyframes shine {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

上から下

.text{
    padding: 10px 0;
    margin: 0;
    font-size: 80px;
    font-weight: bold;

    background-image: linear-gradient(
        0deg,
        #dc143c 45%, /* font color */
        #FFF 50%,
        #dc143c 55% /* font color */
    );
    background-size: 100% 400%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: shine 2s infinite;
}

@keyframes shine {
    0% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 100% 0%;
    }
}

 

キラッと光るテキストのCSSデザインサンプル集

<script type="text/javascript">
    

      
      
      
      
 var meta = document.createElement('meta');
 var link = document.createElement("link");
 meta.setAttribute('name', 'viewport');
 link.rel = "stylesheet";
    
    
      
 var ua = navigator.userAgent;
  if (ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
  //mob    
      
      
 if (screen.width <= 568 && window.orientation == 0) {
  meta.setAttribute('content', 'width=device-width,initial-scale=1.0');
 } else {
  meta.setAttribute('content', 'width=1084px,maximum-scale=1.0');
 }
      
      
} else {
    // PC
          
           if (screen.width <= 480 && window.orientation == 0) {
  meta.setAttribute('content', 'width=device-width,initial-scale=1.0');
 } else {
  meta.setAttribute('content', 'width=1084px,maximum-scale=1.0');
 }
          
          
  }        
          
 document.getElementsByTagName('head')[0].appendChild(meta);
 document.getElementsByTagName("head")[0].appendChild(link);
</script>

結局、横にした時はPCと同じ　という指示にすると、モバフレ合格できないので
JSでやるなら下記

<script type="text/javascript">
    

      
      
      
      
 var meta = document.createElement('meta');
 var link = document.createElement("link");
 meta.setAttribute('name', 'viewport');
 link.rel = "stylesheet";
    
    
      
 var ua = navigator.userAgent;
  if (ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
  //mob    
      
      

  meta.setAttribute('content', 'width=device-width,initial-scale=1.0');

      
      
} else {
    // PC
          
           if (screen.width <= 480 && window.orientation == 0) {
  meta.setAttribute('content', 'width=device-width,initial-scale=1.0');
 } else {
  meta.setAttribute('content', 'width=1084px,maximum-scale=1.0');
 }
          
          
  }        
          
 document.getElementsByTagName('head')[0].appendChild(meta);
 document.getElementsByTagName("head")[0].appendChild(link);
</script>

 

TOPはできる

できないのは、クエリを読み込みが多いページ

予想

フッターのメニューが２個あるから

検証　不正解　それを消してもだめ

 

結局

ビューポートがきいていない。

スマホを横にした時は、pcサイトを表示したいので

モバイルの後に更に画面幅で分岐を入れていたが

それが効いていないようだ。

ひとまず　横は無視して　削除して　分岐なくしてディバイスwidthにしたら出来た。

 

あと、全部のサイトで使えるかわからないが

高速化アプリもう一個

同じ人が作ってるみたい

Autoptimize + Async JavaScript

 

WordPressのレンダリングを妨げるリソースを除外する方法（CSSとJavaScript）