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

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

【jquery】要素の移動のメソッド

before() 指定した要素の前に挿入する。
$(‘挿入先’).before(‘挿入する要素’);

after() 指定した要素の後に挿入する。
$(‘挿入先’).after(‘挿入する要素’);

prepend() 指定した要素内部の先頭に挿入する。
$(‘挿入先’).prepend(‘挿入する要素’);

append() 指定した要素内部の最後に挿入する。
$(‘挿入先’).append(‘挿入する要素’);


【参考URL】
http://cly7796.net/wp/javascript/to-insert-or-move-by-operating-the-dom/

【jquery each】eachで初めの数字を1に

$("#testList li").each(function (i) {
  i = i+1;
  $(this).text('LI' + i);
});

このコードは以下のように吐き出される

LI1
LI2
LI3
LI4
LI5

【参考URL】
http://h2ham.seesaa.net/article/114037411.html

advanced custom fieldsのエディタで勝手に生成されるpタグを消す

出力したいところに以下のコードをかく。
p_kushituの部分を適宜変更。

<?php
remove_filter ('acf_the_content', 'wpautop');
the_field("p_kushitu", $post_id);
?>


https://www.webantena.net/wordpress/remove-p-tags-from-advanced-custom-fields-wysiwyg-fields/

カスタム投稿のタクソノミー(カテゴリー)をリンクなしで出力

news-catのところはタクソノミーのIDを入力。

<span class="news_cat"><?php
    						$terms = get_the_terms( $post -> ID, 'news-cat' );
    						foreach ( $terms as $term ) { $termname = $term -> name; }
    						echo esc_html( $termname ) ;
    						?>
</span>

http://techmemo.biz/wordpress/get_the_term_list/

https://hirashimatakumi.com/blog/164.html

【css】スマホ 横向きでのメディアクエリ

@media screen and (max-width: 736px) and (orientation: landscape){

}

sass メモ

ネスト

#main {
	section {
		margin-bottom: 50px;
		h1 {
			font-size: 140%;
		}
		p, ul {
			margin-bottom: 1.5em;
		}
		p.notes {
			color: red;
		}
	}
}

子孫セレクタ以外のセレクタのネスト

#main {
	section {
		+ section {
			margin-top: 50px;
		}
		> h1 {
			font-size: 140%;
		}
	}
}

@mediaのネスト

cssの場合はネストが使えないためメディアクエリを各位置が離れてしまって見通しが悪いのだがsassならネストで便利

#main{
         width: 640px;
        @media screen and (max-width: 640px){
                 float: none;
                 width: auto;
        }
}

セレクタの参照 &

ネストして、中に&がある場合一つ上のセレクタが&になる。

#side {
	width: 240px;
	body.top & {
		width: 300px;
	}
	ul.bnr {
		margin-bottom: 10px;
	}
}

また、親セレクタの参照は、疑似クラスやセレクタの前にもかける。

a {
	text-decoration: none;
	&:hover {
		text-decoration: underline;
	}
}

ul.pageNav {
	li {
		margin: 0;
		width: 50%;
		&.prev {
			float: left;
		}
		&.next {
			float: right;
		}
	}
}

変数

変数は$の直後に変数名を指定し、:のあとに値を指定。

$red: #cf2d3a;

.notes{
  color:$red; 
}

演算

sassはcalcなしで演算できる

.ex01{
  width: 500px + 8;
}

.ex02{
  width: 500px * 8;
}

.ex03{
  width: (500px / 8);
}

スタイルの継承 @extend

.box {
  margin: 0 0 30px;
  padding: 15px;
  border: 1px solid #ccc;
}

.item{
  @extend .box;
}

extendの便利な使い方

.extend.scss

.btnBase {
  text-align: center;
  margin: 0 0 10px;
  a {
    display: block;
    padding: 10px 20px;
    background: #999;
    color: #fff;
  }
}

.imgL {
  float: left;
  margin-right: 15px;
}


.style.scss

@import "extend";

ul.btnList {
	li {
		@extend .btnBase;
	}
}
.item {
	width: 300px;
	.photo {
		@extend .imgL;
		margin-bottom: 10px;
	}
	.text {
		overflow: hidden;
		.btn {
			@extend .btnBase;
			text-align: left;
		}
	}
}
.btnBase, ul.btnList li, .item .text .btn {
  text-align: center;
  margin: 0 0 10px;
}
.btnBase a, ul.btnList li a, .item .text .btn a {
  display: block;
  padding: 10px 20px;
  background: #999;
  color: #fff;
}
.btnBase a:hover, ul.btnList li a:hover, .item .text .btn a:hover {
  background: #ccc;
  color: #333;
}

.imgL, .item .photo {
  float: left;
  margin-right: 15px;
}

.item {
  width: 300px;
}
.item .photo {
  margin-bottom: 10px;
}
.item .text {
  overflow: hidden;
}
.item .text .btn {
  text-align: left;
}

あらかじめ用意した@extend専用のsassファイルに書かれている.btnBaseというセレクタのスタイルを2か所で継承している。
また、.btnでは、.btnBaseのtext-align:centerを上書きして値をleftに変えてる。
このように同じスタイルを使ってから一部を上書きしたり、extend.scssの.imgLのスタイルを継承しつつスタイルを追加している。

@extendで継承したセレクタはグループ化されて同じスタイルが適用され、上書きや追加したスタイルだけ別で生成されるため、合理的なソースになる。
cssでも同じスタイルだけカンマ区切りでグループ化すれば、cssファイルが軽くなり、合理的なソースになる。しかし、ルールセットがバラバラになってしまい、どこに何のスタイルが適用されるのかがわかりにくくなる。
その結果、同じスタイルを何度も書くという作業が非常に多くなってしまう。extendはこの問題を解決してくれる。

extend専用のプレースホルダセレクタ

extendはセレクタを継承する機能なので、コンパイル後のcssには必ず継承元のセレクタも生成されていた。しかし、extend専用としてセレクタを書きたい場合など、継承元のセレクタは不要になる場合もある。そういった場合にIDセレクタやクラスセレクタ
#や.の代わりに%を使う。

sass

// @extend 専用のプレースホルダーセレクタ
%boxBase {
	padding: 15px;
	border: 1px solid #999;
}

// プレースホルダーセレクタを継承
.item {
	@extend %boxBase;
	margin-bottom: 20px;
}
section {
	@extend %boxBase;
	margin-bottom: 60px;
}

css

.item, section {
  padding: 15px;
  border: 1px solid #999;
}

.item {
  margin-bottom: 20px;
}

section {
  margin-bottom: 60px;
}

@media内では@extendは使用できない

これを解決するには、@media内に継承したいセレクタを描く必要がある。

@media all and (orientation:landscape) {
	%btnBase {
		display: inline-block;
		padding: 5px 10px;
		background: #eee;
	}
	a {
		@extend %btnBase;
	}
}

柔軟なスタイルの定義が可能なミックスイン @mixin

// ミックスインを定義
@mixin boxSet {
	padding: 15px;
	background: #999;
	color: white;
}

// 定義したミックスインを呼び出し
.relatedArea {
	@include boxSet;
}

引数を使ったミックスイン

引数を使うことで、@extendとの違いがわかる。引数はミックスインで定義した値の一部を変更する機能。
引数を使う場合、ミックスイン名の直後に()を書き、カッコ内に引数をかく。

scss

@mixin kadomaru($value){
  -moz-border-radius: $value;
  -webkit-border-radius: $value;
  border-radius: $value;
}

.box {
  @include kadomaru(3px);
  background: #eee;
}

.item{
  border: 1px solid #999;
  @include kadomaru(5px 10px);
}

css

.box {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: #eee;
}
.item {
  border: 1px solid #999;
  -moz-border-radius: 5px 10px;
  -webkit-border-radius: 5px 10px;
  border-radius: 5px 10px;
}

引数に初期値を定義

引数を使う際に、毎回値を定義するのは面倒。そこで、頻繁に使う値を引数の初期値として定義しておくと、初期値を変えたい時だけ値をかけばすむようになる。
引数の初期値を定義している場合は()を省略できる。省略しない場合は()だけをかく。

@mixin kadomaru($value: 3px) {
	-moz-border-radius: $value;
	-webkit-border-radius: $value;
	border-radius: $value;
}
.boxA {
	@include kadomaru;
	background: #eee;
}
.boxB {
	@include kadomaru();
	background: #f1f1f1;
}

引数を複数指定する

引数は、カンマ区切りで複数指定できる。


scss

@mixin boxBase($margin: 30px 0, $padding: 10px){
  margin: $margin;
  padding: $padding;
}

.boxA{
  @include boxBase;
  background: #eee;
}

.boxB {
  @include boxBase(0 0 50px, 20px);
  background: #f1f1f1;
}

css

.boxA {
  margin: 30px 0;
  padding: 10px;
  background: #eee;
}

.boxB {
  margin: 0 0 50px;
  padding: 20px;
  background: #f1f1f1;
}

カンマを使うプロパティには可変長引数を利用する

先ほど引数を複数指定する方法だったが、cssのプロパティによってはカンマを使うものがある。例えばtext-shadowやbox-shadowが該当するが、これらを値としてそのまま使うとエラーになる。

以下のコードはエラーになるコード

@mixin shadow($value) {
	text-shadow: $value;
}

h2 {
	@include shadow(8px 8px 0 #999, 15px -10px 0 #eee);
}

そこで、次のように引数の跡に「...」と記述する可変長引数を使う。

@mixin shadow($value...){
  text-shadow: $value;
}

h2{
  @include shadow(8px 8px 0 #999, 15px -10px 0 #eee);
}

ifを使って条件分岐

変数「$generalStyle」の値がtrueになっている場合、コンパイルすると汎用的なclass名が付いたスタイルがcssにも生成されるが、falseにすれば生成されなくなる。これであらかじめ用意した汎用的なsassファイルをサイトの要件に合わせてスタイルの切り分けをすることができる。

ifのみの条件分岐

// 汎用的なclassを使うかどうか
$generalStyle: true;

@if $generalStyle{
  .fl{
    float: left;
  }

  .fr{
    float: right;
  }
}

ifとelseifとelseを使って条件分岐

$getStyle: 0;

@mixin style{
@if $getStyle == 1{
margin: 0 0 30px;
padding: 15px;
background: #eee;
}

@else if $getStyle == 2{
margin: 0 10px 15px;
padding: 20px 15px;
border: 2px solid #333;
}

@else{
margin: 0 0 10px;
}
}

.box{
@include style;
}


forで繰り返し処理を行う

@forは繰り返しの命令文のひとつで、@forを使うことで指定した開始の数値から終了の数値まで一つずつ増やしながら繰り返して処理される。
@forの構文は次の2つある。

@for $変数名 from 開始の数値 through 終了の数値{ ←●回以下繰り返す
...(スタイル)...
}

@for $変数名 from 開始の数値 to 終了の数値{ ←●回未満繰り返す
...(スタイル)...
}

@for $value from1 through 3 {
  .throughSample_#{value}{
    margin-bottom: 1px * $value;
  }
}

/*  

*/
#{} 補完について

Sassは補完を行うための構文として#{}を用意している。
変数に入った文字列は通常は値として認識されてエラーが出てしまうので、そのままだとプロパティの値にしか使用できないが、 シャープ記号を前に置いた波括弧 #{}と組み合わせることでセレクタやプロパティ名にも使うことができるようになる
https://tenderfeel.github.io/SassReference/sass-script/interpolation.html


whileでより柔軟な繰り返し処理を行う

@whileは、@forよりも複雑な繰り返し処理ができる。

sass

$value: 300;
@while $value > 200{
  .box_#{$value}{
    width: 2px * $value;
  }
  $value: $value - 32;
}

コンパイルcss

.box_300{
  width: 600px;
}

.box_268{
  width: 536px;
}

.box_236{
  width: 472px;
}

.box_204{
  width: 408px;
}

このように@forでは1つずつ増えながら繰り返し処理が行われてきたが@whileでは増やし方やへらし方を変えることができる。

eachでリスト(配列)の要素に対して繰り返し処理を実行

【構文】
@each 変数名 in リスト{
...スタイル
}

どういうときに使うかというと例えば
cssでこういう感じにかくことがあるはず。

.body-top {
	background-image: url(../img/bg_top.png);
}
.body-about {
	background-image: url(../img/bg_about.png);
}
.body-company {
	background-image: url(../img/bg_company.png);
}
.body-contact {
	background-image: url(../img/bg_contact.png);
}

このように一定のルールでセレクタ名や背景画像のパスが変わる場合に@eachを使うことで、効率的にかける。

$nameList: top, about, company, contact;

@each $name in $nameList{
  .body-#{$name}{
    background-image: url(../img/bg_#{$name}.png);
  }
}

sassのよく使う関数

数値の絶対値を取得するabs()

$margin: -15px;

section {
	margin-left: $margin;
	.item {
		float: left;
		width: 200px;
		margin-left: abs($margin);
	}
}

数値の小数点以下を四捨五入するround()

数値の小数点以下を切り上げるceil()と数値の小数点以下を切り捨てるfloor()

16進数のRGB値に透明度を指定して、RGBA形式に変換できるrgba()

body{
  background: rgba(#6a5468,0.3);
}

明るい色を簡単に作れるlighten()と暗い色を簡単に作れるdarken()

// クロを30%明るく
body{
  background: lighten(000, 30%);
}

2つのカラーコードの中間色をつくれるmix()

リストのN番目の値を取得できるnth()

$nameList: top, about, company;
.item{
  background: url(#{nth($nameList, 2)}.png);
}

// この場合background: url(about.png);となる

自作関数を定義する@function

【文法】
@function 自作関数名($引数){
@return 戻り値;
}

@functionで関数の宣言をし、引数を設定、@returnに戻り値をかく。
ミックスインと似ているが、大きな違いは用途で。ミックスインはルールセットごと使用するのに対し、関数は主に値で使用する。数値の計算や返還などの処理は@function。

オリジナル関数の例

@function halfSize($value){
  @return $value / 2;
}

.boxA{
  width: halfSize(100px);
}

補完(インターポレーション)

インターポレーションは変数が参照できない場所でも使うことができるようにする機能。

$imgPath: '../common/images/';

#main{
  background: url(#{imgPath}main.png);
}

演算しないようにする

>||
p.sampleB{
$font-size: 12px;
$line-height: 30px;
font: #{$font-size]/#{$line-height};
}
|

演算できない場所で演算する

@for $1 from 0 to 2{
  .bt#{$i * 5}{
    margin-top: 5px * $i;
  }
}

// コンパイル後
.mt0 {
  margin-top: 0px;
}
.mt5 {
  margin-top: 5px;
}

@eachを使ってベンダープレフィックスを自動で付与する

transitionとかび-webkitとかもろもろ付けるとき便利!!!!!!!!

// 付与するベンダープレフィックス
$prefixList: -webkit-, -moz-, -ms-, -o-, null;

a{
  @each $prefix in $prefixList{
    #{$prefix}transition: all 0.3s linear;
}
// コンパイル後
a {
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
}


また、この@eachを毎回書くのも手間なので、そういったスタイルはミックスインとして定義しておくとよい。

// mixin

@mixin transition($value) {
	@each $prefix in $prefixList {
		#{$prefix}transition: $value;
	}
}

@mixin border_radius($value: 3px) {
	@each $prefix in $prefixList {
		#{$prefix}border-radius: $value;
	}
}

@mixin box_shadow($value...) {
	@each $prefix in $prefixList {
		#{$prefix}box-shadow: $value;
	}
}

@mixin text_shadow($value...) {
	@each $prefix in $prefixList {
		#{$prefix}text-shadow: $value;
	}
}

// mixinを呼び出す
a {
	@include transition(all 0.5s linear);
}

#main {
	padding: 20px;
	background: #efefef;
	@include box_shadow(1px 1px 5px rgba(black, .3));
	@include border_radius();

	h2 {
		font-size: 160%;
		@include text_shadow(0 1px 0 #fff, 0 -1px 0 #fff);
	}
}

面倒なcss3のアニメーション(keyframes)を簡単にする

まずは、次のようなアニメーション用のミックスインを作る。
@includeした後にスタイルを描くと、そのスタイルが@contentで展開される。

@mixin keyframes($animaName) {
	@-webkit-keyframes $animaName {
		@content;
	}
	@-moz-keyframes $animaName {
		@content;
	}
	@-o-keyframes $animaName {
		@content;
	}
	@-ms-keyframes $animaName {
		@content;
	}
	@keyframes $animaName {
		@content;
	}
}


次にアニメーションを適用したいセレクタにanimation関係のスタイルを各。ここではeachでベンダープレフィックスを付与。

$prefixList: -webkit-, -moz-, -o-, null;

body:after {
	content: "";
	width: 100px;
	height: 50px;
	position: absolute;
	top: 25px;
	right: 10%;
	z-index: 0;
	background: url(../img/neko.png) no-repeat;
	@each $prefix in $prefixList {
		#{$prefix}animation-duration: 3.5s;
		#{$prefix}animation-timing-function: linear;
		#{$prefix}animation-iteration-count: 1;
		#{$prefix}animation-name: headerBGAnima;
	}
}

最後にアニメーションの流れを指定する@keyframesをミックスインの@includeを使って次のように書く。

@include keyframes(headerBGAnima) {
	0% {
		opacity: 0;
		top: 350px;
		right: 78%;
	}
	50% {
		opacity: 1;
		top: 25px;
		right: 10%;
	}
	100% {
		top: 25px;
		right: 10%;
	}
}

IEの対応をしつつ「rem」を使ってフォントサイズを指定

mixinを使う場合

@mixin fz($size){
  font-size: $size + px;
  font-size: ($size / 10) * 1rem;
}

html{
  font-size: 62.5%;
}

.item{
  @include fz(18);
}

.box{
  @include fz(26);
}

上記はミックスインでremを処理したが同じことが@forと@extendを使っても可能。@extendにすることでセレクタがグループ化されるのでより効率的なcssソースになる。

@for i from 8 through 40 {
  %fz#{$i}{
    font-size: $$i + px;
    font-size: ($i / 10) * 1rem;
  }
}

html{font-size: 62.5%;}
aside{@extend %fz18};
.item{@extend %fz18};
.box{@extend %fz18};

コンパイルcss

html {
  font-size: 62.5%;
}
aside, .item {
  font-size: 18px;
  font-size: 1.8rem;
}
.box {
  font-size: 26px;
  font-size: 2.6rem;
}

throughの跡の「終了の値」は実際に使いそうな範囲で最大フォントサイズの値を入れる。プレースホルダセレクタを使っているので不要なclassは生成されない。
asideとitemは同じサイズだったためグループ化される。

WordPressのタームをリンクなしで表示する方法

<?php
$terms = get_the_terms( get_the_ID(), 'タクソノミー' );
if ( !empty($terms) ) : if ( !is_wp_error($terms) ) :
?>
<ul>
<?php foreach( $terms as $term ) : ?>
<li><?php echo $term->name; ?></li>
<?php endforeach; ?>
</ul>
<?php endif; endif; ?>


【参考URL】
https://www.webantena.net/wordpress/terms-get-the-terms-get-the-id-taxonomy/