東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

ajax メモ

今回のケースは、ワードプレスのトップページで、wp-content/themes/自分で作ったテーマフォルダ/example.htmlのこの外部htmlをajaxで読み込んだ。


注意することは、Ajaxで取得したHTMLにfindを使って絞り込めないと思ったらbody直下のものはfindでは取得できないということだ。

http://cly7796.net/wp/javascript/refine-using-the-find-to-html-acquired-in-ajax/





script.js

$(function() {

  // ライトボックス開く挙動
  $('.map_left_ul li a').on('click', function(e){
  e.preventDefault();
  $('#spot_detail_overlay').velocity('fadeIn');
  $('#spot_detail_flex').velocity('fadeIn');
  $('#ico_close').velocity('fadeIn');
  var clickUrl = $(this).attr('href');
  $.ajax({
    type: "GET",
     // url: my_script_vars.url,
     url: clickUrl,
     dataType: "html",
    cache: false, //キャッシュを保存するかの指定
    success: function(html){
      //データ取得後に実行する処理
      console.log("ファイルの取得に成功しました");
      $(html).find('#spot_detail_box_outer').each(function(){ //読み込みたい部分の指定 ※今回は#spot_detail_box_outerの中身から読み込まれる
        $('#spot_detail_flex').html($(this).html()); //読み込んだ外部HTMLを表示する領域を指定
        return false;
        
      });
      // $('.test').html(html);
    },
    error:function() {
        //取得失敗時に実行する処理
        console.log("何らかの理由で失敗しました");
    }
  }); // ajax終わり

  return false;
  }); // $('.map_left_ul li a')のクリックイベント終わり


  // ライトボックス閉じる挙動
  $("#spot_detail_overlay,  #ico_close").on("click", function(event2){
    // $('html').css('overflow','visible');
    // mfp.cancel();
    // $('html, body').css('overflow', 'visible');
    $("#spot_detail_overlay").velocity('fadeOut');
    $('#spot_detail_flex').velocity('fadeOut');
    $('#ico_close').velocity('fadeOut');
    $("#spot_detail_box").remove();
    return false;
    
  });

});

【基本ajaxコードは下記サイト参考】
https://www.weblab.co.jp/staff/html/4649.html


【読み込み時のときのローダーの挿入】
https://www.webopixel.net/javascript/308.html

カメラ 撮影メモ

良い感じにオートしたい時は

左手上のダイヤルを「CA」にする。それで右手でQボタンを押して、それぞれもモードを選べる

逆光で撮る場合は露出補正を調整する

このカメラでは、モードダイヤルが <M> 以外に設定されている場合、カメラ側で露出の値を判断し、自動的に適正な露出が設定されます。カメラ側が決めた値に対して、意図した画像に近付くように露出を調整したい場合は、露出補正を行います。
露出補正とは、カメラが決めた露出の値に対して、プラス方向にしたり(明るくする)マイナス方向にしたり(暗くする)することです。モードダイヤルが<P/Tv/Av>のときに値を調整できます。

Mは完全にマニュアルなんやね....

【参考サイト】
https://cweb.canon.jp/pls/webcc/WC_SHOW_CONTENTS.EdtDsp?i_cd_pr_catg=105&i_tx_contents_dir=/e-support/faq/answer/eosd/&i_tx_contents_file=70938-1.html&i_fl_edit=1&i_tx_search_pr_name=&i_cd_qasearch=Q000070938


夜の街灯などで光に光芒を出したい時

絞りを高くすればいい。ただ、これをするのはほんとに大都会とかきらびやかな街とかのほうがよい。

左手上のダイヤル「Av」を選択し、シャッターボタンを半押ししながら、その手前のダイヤルを回せば絞りを調整できる。

https://travel.spot-app.jp/yokohama_yakei_nakamurayuuyta/

SSL化 https

ロリポップ WORDPRESSの場合】

ロリポップのユーザー専用ページのサイドバーから「 セキュリティ」をクリック

「独自SSL証明書導入」をクリック
SSL化したいURLにチェック を入れる
「独自SSL(無料)を設定する」をクリックする

②管理画面でサイトアドレスを「https://~」に書き換える

「設定」から「一般」を選択し、「WordPressアドレス(URL)」と「サイトアドレス(URL)」の頭を「https://~」に書き換え、「変更を保存」をクリックします。

プラグイン「Search Regex」で画像アドレスなどを「https://~」に置き換える

④htaccessでhttp;//にきた人をhttps://にリダイレクト

●編集前

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress


●編集後

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress


RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

↑この2行を追加


【参考記事】

https://www.akaeho.net/ssl-lolipop-lets-encrypt/#mokuji3

●htaccessの編集参考
https://digital-life.club/hp/redirection-to-https-for-lolipop

wordpressでのogpの設定(2018年)

下のコードコピペでOK。facebookページのところとツイッターアカウント適宜変更。

<?php if( is_single() ) { ?>
<meta property="og:type" content="article">
<?php } else { ?>
<meta property="og:type" content="website">
<?php } ?>
 
<meta property="og:url" content="<?php echo ( 'http://' . $_SERVER[ 'HTTP_HOST' ] . $_SERVER[ 'REQUEST_URI' ] ); ?>">
 
<meta property="og:title" content="<?php wp_title( '|', true, 'right' ); ?><?php bloginfo( 'name' ); ?>">
 
<?php if( ( is_single() || is_page() ) && has_post_thumbnail() ) { ?>
<meta property="og:image" content="<?php the_post_thumbnail_url( 'full' ); ?>">
<?php } else { ?>
<meta property="og:image" content="<?php echo esc_url( get_template_directory_uri() ); ?>/img/common/ogp.png">
<?php } ?>
 
<?php if( is_single() ) { ?>
<meta property="og:description" content="<?php echo mb_substr( str_replace( array( "\r\n" , "\n" , "\r" ), '', strip_tags( $post->post_content ) ), 0, 100 ); ?>">
<?php } else { ?>
<meta property="og:description" content="<?php bloginfo( 'description' ); ?>">
<?php } ?>
 
<meta property="og:locale" content="ja_JP">
 
<?php if( is_single() ) { ?>
<meta property="article:publisher" content="facebookページ">
<?php } ?>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="ツイッターアカウント" />

【参考URL】
https://mirai-creators.com/2199/

【eccube3】titleタグをデフォルトからかえる

default_frame.twigを編集。
下記コードコピペがベスト

{% if PageLayout.url == "homepage" %}
  <title>{{ BaseInfo.shop_name }}</title>
{% else %}
  <title>{% if subtitle is defined and subtitle is not empty %}{{ subtitle }} / {% elseif title is defined and title is not empty %}{{ title }} / {% endif %}{{ BaseInfo.shop_name }}</title>
{% endif %}

【参考URL】
https://www.magolis.com/contents/seo/4496.html
https://www.nxworld.net/cms/ec-change-default-title.html

【eccube3】条件分岐

固定ページの場合(トップページURL/aboutの場合)

{% if PageLayout.url == "about" %}

{% endif %}

商品一覧のカテゴリーで条件分岐

{% if Category.id == 7 %}
カテゴリーID7の場合

{% elseif Category.id == 9 %}
カテゴリーID9の場合

{% endif %}


【参考URL】
https://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=17026&forum=5

srcsetの使い方

多分下記コードがベスト。タブレットはPC画像の方が表示される。

<img src="スマホ画像.jpg" srcset="スマホ画像.jpg 767w, PC&タブレット.jpg">

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

と思ったけど以下の方がよりベスト。

<picture>
  <source media="(max-width: 768px)" srcset="img/sp.jpg">
  <img src="img/pc.jpg" alt="*" srcset="img/pc.jpg 1x, img/pc@2x.jpg 2x">
</picture>

●最初のsourceタグにはスマホ用画像を置く。(完全にPCとスマホで違う画像ならスマホ用画像を置き、PCと同じなら下のsrcの1xで読んだ画像でもいいと思う。sourceをなくすと、2xの重い画像をスマホでよんじゃうことになる。)

●2xのところに画像を入れたら自動的にその画像の2/1のサイズにしてくれる。よってretina画像準備するときは、ちょうど倍の画像を用意しないといけない。、、と思ったけど、例えばPCで1200pxで表示させたい画像があった場合、retina用画像は2400pxで用意しないといけない。それはさすがにおもいので1800pxとかにしてcssで

picture img{
  width: 100%;
  height: auto;
}

とかにすればいい...のかな...


今度この記事読んでおく
http://kia-king.com/blog/tutorial/responsive-images-with-srcset/

ヒントのサイト
https://benchmark-inc.co.jp/



なお未対応ブラウザにはpicturefill.jsを使う。
/body直前にpicturefillをよびだす。

background-imageのretina場合

retina用のmixinを作る。これならwindows macどちらも一方の画像しか読まない。

scss

@mixin media-retina() {
  @media only screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min--moz-device-pixel-ratio: 2),only screen and (-o-min-device-pixel-ratio: 2/1),only screen and (min-device-pixel-ratio: 2),only screen and (min-resolution: 192dpi),only screen and (min-resolution: 2dppx) {
    @content;
  }
}



.bg_tit{
  background-image:url(../img/about/bg_tit.jpg);
  background-size: cover;
  background-position: center;
  @include media-retina {
    background-image: url(../img/about/bg_tit@2x.jpg);
  }
  width: 100%;
  padding-top: 23.5%;
}

【参考URL】
https://webskillup.com/ety/20170301202123/