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

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

【wordpress css】contact form7のチェックボックススタイリングcss

デフォルトのcheckboxはdisplay: noneで消す。
.wpcf7-list-item-labelの疑似要素beforeでボックスを、afterで長方形を斜めにしてcheckマークをつくる

#wpcf7-f16-p4-o1 input[type="checkbox"]{ 
  display: none;
}
  
#wpcf7-f16-p4-o1 label{
  cursor: pointer;	
}

	
.wpcf7-list-item-label {
  position: relative;
  padding-left: 33px;		  
}
		
.wpcf7-list-item-label:before{
  width: 20px;
  height: 20px;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  border: 2px solid #ccc;
}

.wpcf7-list-item-label:after{
    width: 10px;
    height: 5px;
    border: 2px solid green;
    content: '';
    position: absolute;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    left: 6px;
    top: 6px;
    border-top: none;
    border-right: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	opacity: 0;
	  
}
			
#wpcf7-f16-p4-o1 input[type="checkbox"]:checked + .wpcf7-list-item-label:after {
    opacity: 1;			
}

span.wpcf7-list-item{
  margin-left: 0!important;
  margin-right: 20px!important;  
}

惰性スクロール(イージングスクロール) 記事まとめ

https://skygold.jp/web/1278.html
http://webdrawer.net/javascript/jsscroll.html
http://www.webopixel.net/javascript/435.html
http://the-zombis.sakura.ne.jp/wp/blog/2015/02/02/post-2626/

JavaScriptメモ

プロパティとメソッド

プロパティは()はない

繰り返しのfor文とwhile文の違い

繰り返す回数が決まってるときはfor、決まってないときはwhile

オブジェクトの意味

①window.alert、console.logなどのwindowやconsoleのこと。

javascriptの基本文法は
console.log('テスト')

consoleはオブジェクト
logはメソッド
()の中のテストはパラメータ

オブジェクトは基本文法の「●●は××しなさい」でいえば●●にあたる部分。

②「複数のプロパティを持つデータのまとまり」

var jsbook = {title: 'javascript入門', price:2500, stock: 3}

上記のjsbookオブジェクトはプロパティしかないが、プロパティのデータにはファンクションを保存することができる

var obj = {
  addTax : function(num) {
    return num * 1.08;
  }
};

上記のようにプロパティのデータがファンクションのとき、そのプロパティのことを特別にメソッドという。
ここらへんは「javascriptオブジェクト指向プログラミング」という知識とテクニックが必要

③Dateオブジェクト

Dateオブジェクトを使うときは最初に以下のコードを描いて初期化する必要がある。

var now = new Date();

newはオブジェクトを初期化するためのキーワード。
なお初期化の際()内にパラメータを含めない場合、Dateオブジェクトは現在日時を記憶した状態で初期化される。
ちなみに「現在日時を記憶した状態」とは、
●「日時を出力しなさい」と命令したら、現在日時を出力する
●「10日後が何日か出力しなさい」と命令したら、現在日時から10日後の日付を出力する。
というように、現在日時を「基準日」として使っている。
つまり、初期化されたDateオブジェクトが計算の基準日となる日時を記憶しているからこそ、日時の出力や計算ができる。

④オブジェクトには初期化するものとしないものがある

●複数のオブジェクトを作れるオブジェクトは初期化する
●複数のオブジェクトを作れないオブジェクトは初期化しない
詳しくは「確かな力が身につく」JavaScript超入門」のP165を参照。


無名関数(ファンクションを変数に代入)

var total = function(price){
  var tax = 0.08;
  return price + price * tax;

}

イベント基本構文

document.getElementById('form').onsubmit = function(){

};

return falseの意味

イベントで実行されるファンクションに「return false;」が出てきたら、htmlの基本動作をキャンセルしていると解釈する。
例だと送信ボタンを押したらページが遷移(ページ再読み込み)するがそれをキャンセルしたりできる。

画像のプリロード

var images = ['images/image1.jpg', 'images/image2.jpg', 'images/image3.jpg'];
var current = 0;
var pageNum = function(){
  document.getElementById('page').textContent = (current + 1) + '/' + images/length;
}

var changeImage = function(num){
  if(current + num >= 0 && current + num < images.length){
    current += num;
    document.getElementById('main_image').src = images[current];
    pagenum();

  }
};
// プリロードのコード start
var preloadImage = function(path){
  var imgTag = document.createElement('img');
  imgTag.src = path;
}

for(var i = 0;i < images.length; i++){
  preloadImage(images[i]);
}
//プリロードのコード end

pageNum();

document.getElementById('prev').onclick = function(){
  changeImage(-1);
};

document.getElementById('next').onclick = function(){
  changeImage(1);

【wordpress】custom field suite の画像IDでの画像出力ループ(lightboxつき)

<ul>
  
<?php
$fields = $cfs->get('loop_gallery'); 
foreach ($fields as $field) :
?>
// ループ開始
<li>
  
<?php
$attachment_id0 = $field['img_gallery']; // $attachment_id0は$attachment_idと名前を別にした
$full = wp_get_attachment_image_src( $attachment_id0, 'scale1' );//フルサイズ画像のURLを取得
?>  
  
 <a href="<?php echo $full[0];?>" rel="lightbox">
<?php
$attachment_id = $field['img_gallery'];
$sample_photo = wp_get_attachment_image($attachment_id, "thumb1");
echo $sample_photo;
?>
  </a>
  </li>
// ループ終わり

<?php
endforeach;
?>
</ul>


【参考サイト】

http://hamatte-wataru.com/post-501/

【jQuery】タブ切り替え2(レスポンシブ対応でdisplay:noneからのfadein)

        <ul id="click_box2">
          <li class="select">1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
        </ul><!-- click_box2 -->


      <div class="f_r">
        <div class="content_wrap disnon show">
        </div><!-- content_wrap -->

        <div class="content_wrap disnon">
        </div><!-- content_wrap -->

        <div class="content_wrap disnon">
        </div><!-- content_wrap -->

        <div class="content_wrap disnon">
        </div><!-- content_wrap -->

        <div class="content_wrap disnon">
        </div><!-- content_wrap -->

        <div class="content_wrap disnon">
        </div><!-- content_wrap -->

        <div class="content_wrap disnon">
        </div><!-- content_wrap -->

        <div class="content_wrap disnon">
        </div><!-- content_wrap -->
      </div><!-- f_r -->
@keyframes show{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
	  
.disnon {
  display: none;
}
	
.disnon.show{
    display: block;
    animation: show 1s linear 0s;	  
}

$(function(){
	// タブ切り替え
	$("#click_box2 li").click(function() {
        var num = $("#click_box2 li").index(this);
        $(".content_wrap").removeClass('show').addClass('disnon');
        $(".content_wrap").eq(num).addClass('show');
        $("#click_box2 li").removeClass('select');
        $(this).addClass('select')
    });
});

cssでscale と tlanslale3dを一緒にかく

@-webkit-keyframes slideInViewport {
    from{
        -webkit-transform: scale(1) translate3d(0, 0, 0);
    }
    to{
        -webkit-transform: scale(0.8) translate3d(250px, 0, 0);
    }
}

【参考URL】
http://stackoverflow.com/questions/20051832/how-to-scale-and-translate3d-at-the-same-time

【jQuery】タブ切り替え

<!-- ボタン -->
      <ul id="tab">
        <li class="select">ボタン1</li>
        <li>ボタン2</li>
        <li>ボタン3</li>
        <li>ボタン4</li>
      </ul>

<!-- 変わるコンテンツ -->

      <div class="safety_cw">
        <div class="content_wrap no1">
          <div class="container_safety">
            <h2>コンテンツ</h2>
          </div><!-- container_safety -->
        </div><!-- no1 -->
        <div class="content_wrap no2 disnon">
          <div class="container_safety">
            <h2>コンテンツ</h2>
          </div><!-- container_safety -->
        </div><!-- no2 -->
        <div class="content_wrap no3 disnon">
          <div class="container_safety">
            <h2>コンテンツ</h2>
          </div><!-- container_safety -->
        </div><!-- no3 -->
        <div class="content_wrap no4 disnon">
          <div class="container_safety">
            <h2>コンテンツ</h2>
          </div><!-- container_safety -->
        </div><!-- no4 -->
$(function() {

    $("#tab li").click(function() {
        var num = $("#tab li").index(this);
        $(".content_wrap").addClass('disnon');
        $(".content_wrap").eq(num).removeClass('disnon');
        $("#tab li").removeClass('select');
        $(this).addClass('select')
    });
});


ミソのcssのみかく。切り替わるコンテンツボックスのcontent_wrapにabsoluteをかけてかさね、最初に表示させるcontent_wrap以外はdisnonを付与。このdisnonはvisibility:hiddenからvisibleにかえること。displayのnoneからblockだとtransitionがきかない。

.disnon {
  /* display: none; */
  visibility: hidden;
  opacity: 0!important;
}

.content_wrap {
    min-height: 663px;
    border: 1px solid #9a7c52;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    opacity: 1;
    position: absolute;
    width: 100%;
}

【参考URL】
http://www.finefinefine.jp/jquery/kiji422/