li {
margin-right: 20px;
}
li:last-child {
margin-right: 0;
}
↓上記の記述が下記の一文で終わります
li:not(:last-child) {
margin-right: 20px;
}
cssを使って文字を折り返す
CSSを使って文章を折り返す方法
疑似要素の『:before』を使って改行
■css
.test:before{
content:”テスト\A”;
white-space: pre;
}
■html
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ
ストテキストテキストテキストテキストテキスト
ストテキストテキストテキストテキストテキスト
■結果
テスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ
ストテキストテキストテキストテキストテキスト
スタイルシートのエラーチェック
W3C CSS 検証サービス
http://jigsaw.w3.org/css-validator/#validate_by_uri+with_options
上記のサイトでは、1URL,2アップロード,3直接入力でCSSを検証出来ます。
■エラーの種類
警告メッセージ
ベンダープレフィックスを使用している箇所はエラー扱いになる
can’t find the warning message for vendor-extension
独自拡張である疑似要素を使っていると出てくる警告
can’t find the warning message for vendor-ext-pseudo-element
親タームと子タームの条件分岐
親タームか子タームかで条件分岐して出力結果を変えたい場合のコードです。コピペ用にどうぞ。
<?php $taxonomy = $wp_query->get_queried_object(); echo $taxonomy->parent; ?> <?php if($taxonomy->parent == 0): ?> 親 <?php else: ?> 子 <?php endif; ?>
プラグイン:Breadcrumb NavXT
面倒なパンクズの構築を解決してくれるプラグインをご紹介します。
Breadcrumb NavXT
https://ja.wordpress.org/plugins/breadcrumb-navxt/
インストールが完了したら、設定をしましょう。
後は設置した場所に下記のコードを追加しましょう。
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
<?php if(function_exists('bcn_display'))
{
bcn_display_list();
}?>
</div>
※bcn_display_list();で
カスタムタクソノミーでタームを階層化していると、結構パンクズに悩まされますが、
このプラグインを使うことで解決できました。
display:block;
ボックス要素になり横幅に関係なく縦並びになってくれます。
div {display:block;}
width・height・margin・paddingに指定できますがvertical-alignは指定できません。
擬似クラスについて
疑似クラスを設定することで複数のクラスを指定せず適用できるので便利です
■html
- a
- b
- c
- d
■CSS
li:first-child {
color:red;
font-size:11px;
}
aの文字だけ赤色かつ11pxに
vertical-alignが効かない時
vertical-alignが効かないときにtable-cellを書いても効かなかったとき、親要素にdisplay: table;をかける必要があります
■html
<div class=”contents”>
<div class=”box”>
<img src=”xxxxx.jpg”>
</div>
</div>
■css
.contents {
display: table;
}
.box{
display: table-cell;
vertical-align: middle;
}
WP:投稿画面のカテゴリー階層
/**
* 投稿画面でカテゴリーチェックボックスの階層を維持
*
*/
function solecolor_wp_terms_checklist_args( $args, $post_id ){
if ( $args['checked_ontop'] !== false ){
$args['checked_ontop'] = false;
}
return $args;
}
add_filter('wp_terms_checklist_args', 'solecolor_wp_terms_checklist_args',10,2);
makeshopでのコーディング
makeshopでのコーディングでは最初からある程度形（テンプレート）があるのでいかに早く作れるよう構成を考えてコーディングするのが大切だと思いました。