background-attachment:fixedが効かないブラウザ用パララックス

iOS (iPhoneやiPad) のブラウザ「Safari」で、背景画像を固定してスクロールしないようにするCSSプロパティのbackground-attachment:fixedが効かない場合があります。

background-attachment:fixedを効果的に使用すると、複数の画像がスクロールによって入れ替わるパララックス (視差) などの面白い演出が可能になります。

今回は、background-attachment:fixedを使用せず、このパララックスを実現する方法を紹介します。

HEADING DESIGN

コピペから始めるウェブページの見出しデザイン

ウェブページを構成する要素の中で、最も重要と言えるのが見出しです。見出しは、その後に続く情報がどういった内容なのかを端的に示すものだからです。

見出しを目立つようデザインすることは、必要な情報を素早く見つける助けとなります。そこで、今回は見出しをデザインする上で重要だと思うことを、コピペできるコードとともに紹介します。

WordPressにコピペで実装するパンくずリストのPHPコード

ウェブサイトのパーツとして欠かせない「パンくずリスト」ですが、WordPressで実装するのは割と面倒だったりします。

そこで今回は、Microdataで構造化されたパンくずリストを、WordPressテーマのfunctions.phpにコピペするだけで使用できるPHPコードを作ってみたので紹介します。

CSSのbox-sizingにはないmargin-boxを疑似的に再現する小技

CSSのbox-sizingプロパティには、widthプロパティやheightプロパティなどで指定した幅を、要素のコンテンツ領域に適用するcontent-box (既定値) と、要素の境界 (border) まで適用するborder-boxがあります。

また、W3Cの草案に登場し、FireFoxにのみ先行実装された、要素の内側の余白まで適用するpadding-boxもあります (現在はFireFoxを含む全てのブラウザで使用できません)。

しかし、要素の外側の余白まで適用するmargin-boxというのはW3Cの草案にも登場しません。今回は、このmargin-boxを疑似的に再現する小技を紹介します。

WordPressでCSSファイルをインライン化する最良の方法

ウェブサイトの表示速度の高速化の一環として、CSSファイルをlink要素で読み込むのではなく、CSSファイルの内容をstyle要素内に書き出すインライン化で、HTTPリクエストを減らす手法が有効な場合があります。

今回は、WordPressでCSSファイルをインライン化するための、最良だと思われる方法をご紹介します。

ol要素とul要素の正しい使い分け方

ウェブページを作る際、使用頻度が比較的高い要素にリスト (一覧) があります。このリストの中に、項目の並び順の有無で使い分ける必要のあるol要素とul要素があります。

今回は、ol要素とul要素の正しい使い分け方について解説します。

必要な時だけ現れる影の存在 半角スペース

半角スペースのHTMLにおける特徴とそれを応用したCSSテクニック

HTMLとCSSを勉強しはじめた頃の「あるある」の一つに、記述した覚えのないところに空白が生じるというのがあります。

例えば、リストアイテム (li要素) をインライン (display: inline;) で表示させた際に、リストアイテム間に空白ができる場合があります。

今回は、この空白の正体である半角スペースのHTMLにおける特徴と、その特徴を生かしたCSSテクニックを紹介します。

WordPressの管理画面から条件分岐を設定するカスタマイズ

WordPressを使っていて「かゆい所に手が届かない」みたいなことが多々あります。その一つに「管理画面から条件分岐が使いたい」というのがあります。

管理画面で条件分岐が使えれば、「投稿」や「固定ページ」の本文、ウィジェット、カスタマイザーで設定した内容を、特定の条件下でのみ出力するといったことが可能になります。

今回は、実際に使用している、管理画面で条件分岐を設定するためのカスタマイズ方法をご紹介します。

WordPress 5.x で投稿の抜粋が表示されない不具合の改善方法

WordPress 5.0 から導入されたブロックエディタで投稿を作成した際、投稿内容から自動生成される抜粋 (the_excerpt) が表示されない不具合に遭遇したので、その原因と改善方法を紹介します。

投稿の抜粋は「the_excerptテンプレートタグ」を使用して出力しますが、その内部で使用されている「get_the_excerptテンプレートタグ」で抜粋が取得できない場合にも有効な改善方法です。