WordPress 4.4の個別投稿templateはpost typeとslugで分けられる
- WordPress 4.4では、個別投稿用にsingle-{post_type}-{post_name}.phpを使えます。投稿本文へ例外を増やさず、投稿typeとslugで表示を分ける条件を解説します。
カテゴリー: ホームページ制作
CSSのmix-blend-modeは背景との合成範囲を決めてから使う
- CSSのmix-blend-modeは要素と背後の内容を混ぜ、background-blend-modeは背景レイヤーだけを混ぜます。合成範囲を分けて確認する方法を解説します。
a要素のdownload属性は保存用ファイルへのリンクと提案するファイル名を示す
- a要素のdownload属性はリンク先を保存用として示し、値で保存時のファイル名を提案できます。Content-Disposition、別origin、公開範囲との違いを解説します。
CSSのfilterは背景だけを変えたいときに文字と要素を分けて指定する
- CSSのfilterは指定した要素と子要素をまとめて描画します。背景画像だけを暗くし、文字やボタンの見え方を保つための要素の分け方を解説します。
details要素はsummaryを見出しにして補足内容を開閉する
- details要素は、最初のsummary要素を見出しにして残りの補足内容を開閉します。open属性の意味、基本の書き方、使わないほうがよい内容を解説します。
CSSのpointer-events: noneは重ねた飾りをクリック対象から外すときに使う
- CSSのpointer-events: noneは、見えている装飾をポインタの対象から外す指定です。リンクやボタンの上に重ねた要素で操作を妨げないための確認方法を解説します。
CSSの@supportsはpropertyと値の対応可否でstyleを切り替える
- @supportsは、CSSのpropertyと値に対応する場合だけgroup内のstyleを適用します。基本表示を先に書き、追加styleを条件内へ置く手順を解説します。
HTML5のtrack要素はkindとsrclangで字幕の役割と言語を分ける
- HTML5のtrack要素では、字幕の役割をkind、言語をsrclang、選択名をlabelで示します。captionsとsubtitlesの違い、defaultの扱いを解説します。
CSSのoverflow-wrap: break-wordは長いURLや連続文字を必要な位置で折り返す
- overflow-wrap: break-wordは、長いURLや連続文字が表示領域からはみ出すときだけ追加の折返しを許します。word-wrapとの関係やword-breakとの違いも解説します。
data要素は表示する文字と機械可読値をvalue属性で対応させる
- HTML5のdata要素は、表示する文字と機械可読値をvalue属性で対応させます。data-*属性やtime要素との違い、CMSで値を管理する方法を解説します。
CSSのtext-overflow: ellipsisは一行のはみ出しを省略記号で示す
- text-overflow: ellipsisは、幅、折返し、overflowをそろえて一行のはみ出しへ使います。省略記号が出ない原因と全文を失わない設計を解説します。
CSSの:emptyが効かないときは空白のtext nodeと子要素を確認する
- CSSの:emptyは子要素だけでなく、改行や字下げによる空白のtext nodeがあっても一致しません。効かない理由、HTMLの直し方、使う範囲を解説します。
CSSのcurrentColorはcolorプロパティの値をborderや背景へ再利用する
- CSSのcurrentColorは、その要素のcolorプロパティの計算値を参照します。文字色とborderや背景をそろえ、状態別の重複指定を減らす方法を解説します。
CSSカウンターはcounter-resetとcounter-incrementで見出し番号を自動更新する
- CSSカウンターはcounter-resetで開始し、counter-incrementで増やし、contentのcounter()で表示します。見出し番号がすべて1になる原因も解説します。
CSSのcolumn-widthとcolumn-countは列幅と列数のどちらを優先するかで使い分ける
- CSSのcolumn-widthは列幅を基準に可変の列数を作り、column-countは列数を指定します。両方を指定した場合とcolumns短縮形も解説します。
iframeのsandbox属性は制限を先に掛け必要な権限だけ戻す
- iframeのsandbox属性は制限を先に有効にし、allow-formsやallow-scriptsなど必要な権限だけを戻します。設定例と危険な組合せを解説します。
