そのほか随時追加していきます。
カテゴリー: コーディング
【Chrome拡張機能】ブラウザ上でサイズが測れる Page Ruler
・ブラウザ上でサイズの測れるボックスを表示させる拡張機能
・ボックスの端での大きさ変更、数値での変更、ドラッグで移動も簡単にできる
【Chrome拡張機能】ブラウザ上で色を取得できるColorZilla
■ColorZilla
・ブラウザ上でカラーピッカ―を表示させ、カラーコードを取得できる
■上記を使わない場合
・検証ツールでプロパティにcolorで適当に色指定
→色が表示されるボックスをクリックするとピッカーが表示される
デバイスチェックに便利なChromeプラグイン
■デバイスチェックに便利なプラグインまとめ
・MobileLayouter
userAgentを偽装して携帯・スマートフォン用のWebページを表示するプラグイン
【Adobe Capture】で写真からカラー、パターンなど抽出する
■ポイント
・その場でとった写真や保存している写真から、カラーコードや、パターン、ブラシなどが作成できる。
・Adobeの拡張機能で作成したものを利用できる。
・Adobe Capture自体は会員登録すれば無料で使える。
■ブラウザ上で写真からカラーを抽出する Adobe Color CC
https://color.adobe.com/ja/create/color-wheel/
■スマホアプリ
カラーコードを抽出しているところ

【-webkit-background-clip】文字にグラデーションをかける【ie非対応】
■ポイント
・-webkit-background-clip:text;文字で背景色を切り抜く
・バックグラウンドにグラデーションをかける
・IE非対応なので、ハックで通常のカラーを代替で指定する事
■HTML
<div id="demo"> デモ </div>
■CSS
#demo {
width:600px;
height:400px;
margin:0 auto;
text-align:center;
font-size:30px;
font-weight:bold;
background: rgb(208,228,247); /* 背景にグラデーションをかける */
background: -moz-linear-gradient(top, rgba(208,228,247,1) 0%, rgba(115,177,231,1) 24%, rgba(10,119,213,1) 50%, rgba(83,159,225,1) 79%, rgba(135,188,234,1) 100%);
background: -webkit-linear-gradient(top, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%);
background: linear-gradient(to bottom, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=0 );
-webkit-background-clip:text; /* テキストで背景色を切り抜く */
color:transparent; /* クリップ文字で背景を抜いたとき、背景色が見えるよう透過にする */
}
■参考:アイデア次第で効果的な使い方ができるかも!?「background-clip:text;」を使って背景画像を文字でマスクする方法CSSのみでテキストにグラデーションやリフレクトをかけるテクニック(ちょっと更新)
属性セレクタでCSSを適用させる
■ポイント
・タグに直書きされている属性でセレクタを選択できる。
・いじれれない部分にCSSを適用させる際に便利
<div width="640" height="200"> <p>デモ</p> </div>
<style>
div[width="640"]{
width:100%;
height:400px;
background:#C93;
}
div[width="640"] p{
text-align:center;
}
</style>
WP:カスタムタクソノミーごとの投稿とタームの一覧表示
home.phpなどの投稿ページに、タクソノミーのターム(カテゴリー)ごとに投稿の一覧または子カテゴリーを表示するソースです。
<div class="box">
<?php
$args = array(
'parent' => 0,
'hierarchical' => 0,
'order' => 'ASC'
);
$taxonomy_name = 'タクソノミー名';
$taxonomys = get_terms( $taxonomy_name, $args );
if ( !is_wp_error( $taxonomys ) && count( $taxonomys ) ):
foreach ( $taxonomys as $taxonomy ):
$url = get_term_link( $taxonomy->slug, $taxonomy_name );
?>
<div class="contentbox01">
<h2 id="<?php echo esc_html($taxonomy->slug); ?>" class="h2_style01"><?php echo esc_html($taxonomy->name); //タームタイトル?></h2>
<div class="contentbox01_in">
<table class="table_style01">
<?php
/**
* お知らせ等の一覧を取得
*
*/
$args = array(
'post_type' => 'カスタム投稿名',
'posts_per_page' => 10, //新着順に10件表示
'orderby' => 'post_date',
'order' => 'DESC',
'post_status' => 'publish',
'tax_query' => array(
'relation' => 'AND',
array(
'taxonomy' => 'タクソノミー名',
'field' => 'slug',
'terms' => $taxonomy->slug,
'include_children' => true,
'operator' => 'IN'
),
)
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ):
?>
<?php
$term_id = $taxonomy->term_id;
$children = get_term_children( $term_id, $taxonomy_name );
if ( $children ): //子タームを持つ場合にはタームの一覧を表示
?>
<?php
$term_id = $taxonomy->term_id;
$taxonomy_name = 'タクソノミー名';
$termchildren = get_term_children( $term_id, $taxonomy_name );
foreach ( $termchildren as $child ) {
$term = get_term_by( 'id', $child, $taxonomy_name );
echo '<tr><td><a href="' . get_term_link( $child, $taxonomy_name ) . '">' . $term->name . '</a><td></th>';
}
?>
<?php else: ?> //子タームを持たない場合には投稿の一覧を表示
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<tr>
<th>
<?php the_time('Y.m.d'); ?>
</th>
<td>
<?php
$cf_important = get_field( 'important' ); //ACFで作成したチェックボックス
if ( $cf_important == '表示する' ) {
echo '<span class="important01">重要</span>';
} else {
echo ' ';
}
?>
<?php if(get_field('important')): ?>
<span class="important01">重要</span>
<?php endif ;?>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</td>
</tr>
<?php
endwhile;
?>
<?php endif; ?>
<?php
endif;
wp_reset_postdata();
?>
</table>
</div>
<div class="btnbox01">
<a href="<?php echo esc_url( home_url( '/' ) ); ?><?php echo esc_html($taxonomy->slug); ?>/">一覧へ</a>
</div>
</div>
<?php endforeach; endif; wp_reset_postdata(); ?>
</div>
<!-- box -->
【jQuery】長い文字列を省略し「…」にする
■ポイント
・テキストの文字列を取得する。
・表示する文字数をブレイクポイントに、if構文で文字を省略し「…」を追加するか、そのまま表示するかに分ける
■jQ
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
var $setElm = $('#demo .text'); // 省略する文字のあるセレクタを取得
var cutFigure = '10'; // 表示する文字数
var afterTxt = ' …'; // 文字カット後に表示するテキスト
$setElm.each(function(){
var textLength = $(this).text().length; // 文字数を取得
var textTrim = $(this).text().substr(0,(cutFigure)) // 表示する数以上の文字をトリムする
if(cutFigure < textLength) { // 文字数が表示数より多い場合
$(this).html(textTrim + afterTxt).css({visibility:'visible'}); // カット後の文字数に…を追加
} else if(cutFigure >= textLength) { // 文字数が表示数以下の場合
$(this).css({visibility:'visible'}); // そのまま表示
}
});
});
</scritpt>
CSSのみで作るドロップダウンメニュー
■ポイント
・外側のナビの各項目の中に入れる入れ子構造にする
・疑似クラス:hoverとdisplay:none; display:block;で表示を切り替える
■HTML
<ul id="gNav">
<li><a>Gナビメニュー</a>
<ul id="subNav"> <!--サブナビを入れ子にする -->
<li><a>サブナビ1</a></li>
<li><a>サブナビ2</a></li>
<li><a>サブナビ3</a></li>
</ul>
</li>
</ul>
■CSS
#subNav{
display:none; /* hoverされるまで非表示にする */
}
#gNav li:hover #subNav{
display:block; /* Gナビメニューにマウスオーバーした際に表示させる */
}