2017年5月 – ページ 2 – クリエイター：コーディング備忘録ブログ

並んだ要素の最後のスタイルを適用しない

2017/5112017/511 admin コメントをする

li {
margin-right: 20px;
}
li:last-child {
margin-right: 0;
}
↓上記の記述が下記の一文で終わります
li:not(:last-child) {
margin-right: 20px;
}

cssを使って文字を折り返す

2017/592017/59 admin コメントをする

CSSを使って文章を折り返す方法
疑似要素の『:before』を使って改行
■css
.test:before{
content:”テスト\A”;
white-space: pre;
}
■html

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ
ストテキストテキストテキストテキストテキスト

■結果
テスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ
ストテキストテキストテキストテキストテキスト

スタイルシートのエラーチェック

2017/582017/58 admin コメントをする

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

親タームと子タームの条件分岐

2017/522018/83 admin コメントをする

親タームか子タームかで条件分岐して出力結果を変えたい場合のコードです。コピペ用にどうぞ。

<?php
 $taxonomy = $wp_query->get_queried_object();
 echo $taxonomy->parent;
 ?>
 <?php if($taxonomy->parent == 0): ?>
 親
 <?php else: ?>
 子
 <?php endif; ?>

プラグイン:Breadcrumb NavXT

2017/522017/52 admin コメントをする

面倒なパンクズの構築を解決してくれるプラグインをご紹介します。
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();で

タグでの出力、bcn_display();だとタグで出力されます。

カスタムタクソノミーでタームを階層化していると、結構パンクズに悩まされますが、
このプラグインを使うことで解決できました。

display:block;

2017/522017/52 admin コメントをする

ボックス要素になり横幅に関係なく縦並びになってくれます。

div {display:block;}
width・height・margin・paddingに指定できますがvertical-alignは指定できません。

擬似クラスについて

2017/512017/51 admin コメントをする

疑似クラスを設定することで複数のクラスを指定せず適用できるので便利です
■html

■CSS
li:first-child {
color:red;
font-size:11px;
}
aの文字だけ赤色かつ11pxに