クリエイター：コーディング備忘録ブログ – ページ 62 – クリエイター：コーディング備忘録ブログ

fwでのpngのアウトライン化

2017/4192017/419 admin コメントをする

fwでレイヤーを選択+Altでpngの選択範囲を指定してパスを作成できるのが便利です。

CSS:画像トリミング

2017/4132017/413 admin コメントをする

画像の一覧を表示するときなどに、画像サイズが統一されていないが為に、
コーディングに苦労した経験はおありではないでしょうか。

今回は、そんなときに便利なCSSプロパティをご紹介します。

その名も「object-fit」

こやつ、画像の縦横比を維持しつつ、トリミングしてくれるすげえ奴です。

たとえば、こんな画像があったとします。

縦長と横長の画像を正方形でトリミングするには、

img.sample {
  width: 250px;
  height: 250px;
  object-fit: cover;
}

こうなります。すごい！便利！

で、サポートブラウザですが、いつも通り「Can I Use」を見てみると…

例によってIE系は全滅です。残念でしかない…。

IEの対応策や、詳細については下記のページで解説されています。

参考：http://www.webcreatorbox.com/tech/object-fit/

CSS:ベンダープレフィックス

2017/4112017/411 admin コメントをする

ベンダープレフィックスとは何か

ベンダープレフィックス（接頭辞）とは、cssのプロパティの頭に付ける識別子のことで、
ブラウザごとに記述が決まっています。

-ms-　・・・・・・　Internet Explorer
-webkit-　・・・・・・　Google Chrome、Safari
-moz-　・・・・・・　Firefox
-o-　・・・・・・　Opera

なぜこういった記述が必要かと言うと、草案段階のcssプロパティを、
先行して実装、ブラウザ上に動作させる、という効果があります。

例えばこんな風に書きます。

.foo {
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

ですが、何でもかんでも付ければ良いというものではありません。
プロパティごとに必要最低限のプレフィックスだけ付けることが推奨されます。

また、草案から正式に勧告されたプロパティについては、プレフィックスを外すべきです。
ですが、そういった現状に気づかずに、正しいプレフィックスが付けられていない事が多々あります。

最新のプレフィックス事情については、下記のサイトで分かりやすくまとめられています。

参考：http://qiita.com/sdn_tome/items/42197e443134478befaf

Opera用のプレフィックスが今では意味をなさないものになっているというのは知りませんでした。

精度の高いコーディングをするためには、こういった最新の動向は常にチェックする必要がありますね。

JS:class付与とスムーススクロール

2017/472017/47 admin コメントをする

jqueryを使ってclass付与と同時にアンカー要素にスムーススクロールを実装します。
最初、class付与の処理にreturn false;を書いていたので、処理が通らずスムーススクロールが実行されませんでした。
こういったイベントのバブリング（伝播）について簡単にまとめると、

・クリックなどのイベントは、子要素から親要素へと伝播される（バブリング）
・preventDefault() は、その要素のイベントをキャンセルし、stopPropagation()は、親要素への伝播をキャンセルする。
・return false; を使うと、その要素のイベントも親要素への伝播も両方キャンセルする。

引用元：http://www.tam-tam.co.jp/tipsnote/javascript/post5050.html

$(function(){
   $('#sample li a').click(function() {
      // アンカーの値取得
	  var id = $(this).attr("href");
 			if($('#sample1').hasClass('on') == false && $('#sample2).hasClass('on') == false && $('#sample3').hasClass('on') == false){
			 $(id).addClass('on');
			} else{
				$('#about section').removeClass('on');
				$(id).addClass('on');
			}
           //return false; 後の処理が通らなくなるので不要
    });

   // #で始まるアンカーをクリックした場合に処理
   $('a[href^=#]').click(function() {
      // スクロールの速度
      var speed = 400; // ミリ秒
      // アンカーの値取得
      var href= $(this).attr("href");
      // 移動先を取得
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});

WP:パンくずリスト

2017/452017/45 admin コメントをする

カスタムタクソノミーのターム情報を色々な形で取得、出力して「パンくずリスト」を作ってみましょう。

「get_ancestors」

祖先オブジェクトのIDを配列で返します。

関数リファレンス/get ancestors

//投稿についているタームのidを取得
$terms = wp_get_object_terms( $post->ID, 'my_taxonomy');
$term_id = $terms[0]->term_id;
 
//以下はターム一覧ページの場合と同じ
$$ancestors = get_ancestors( $term_id, 'my_taxonomy' );
 
$reversed_ancestors = array_reverse($ancestors); 
 
foreach($reversed_ancestors as $ancestor){
  echo get_term($ancestor)->name;
  echo get_term($ancestor)->slug;
  echo get_term_link($ancestor);
}

「get_the_terms」

投稿に割り当てられたタクソノミーのターム（カスタム分類の項目）を取得する。

関数リファレンス/get the terms

<ul class="pankuzu">
  <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">トップページ</a></li>         
<?php
  $terms = array_reverse(get_the_terms($post->ID,'タクソノミー名'));
  foreach( $terms as $term ) {
    echo '<li><a href="/document/タクソノミー名/'.$term->slug.'">'.$term->name.'</a><li>' ;
  }
?>
</ul>

「walk_category_tree」

タームの親子関係を保持した上で表示する。

引用：http://pimpmysite.net/archives/696

<ul class="breadcrumb">
<li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">トップページ</a></li>
<?php
  $terms = get_the_terms($post->ID,'タクソノミー名');
  if ( $terms && ! is_wp_error( $terms ) ) {
    echo walk_category_tree( $terms, 0 , array(
    'use_desc_for_title' => false,
    'style' => 'list',
    ));
  }
?>
</ul>