2020年

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

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

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

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

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

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

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

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

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

PHPのpreg_replace関数を使用して、HTML・CSS・JS各コードの無駄な空白文字列 (半角スペース・タブスペース・改行) を取り除いて圧縮 (minify) する正規表現を紹介します。

WordPressなどのPHPを使用したCMSでも使用できます。

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

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

ウェブページで画像を表示させるために「img要素」が使われますが、このimg要素に設定できる属性の1つに、画像の代わりとなる文章「代替テキスト」を設定する「alt属性」があります。

代替テキストを適切に設定することは「SEO」や「ウェブアクセシビリティ」において重要です。しかし、どのような文章を設定すればいいのか分からない方も多いのではないでしょうか？

そこで今回は適切な代替テキストを設定するための考え方を紹介します。

Google Search Console から「モバイルユーザビリティで問題が検出されました」というメールが送られてきました。

その内容は「テキストが小さすぎて読めません」と「クリック可能な要素同士が近すぎます」というものでした。

今回は、こうした内容のメールが送られてきたときの対策方法です。

WordPressのバージョンを5.4.1に更新したところ、「投稿」の個別ページが表示されず、アーカイブページが表示される不具合が発生したので、その原因と解消方法をご紹介します。

コロナ禍で世界中が大変なことになっていますね。日本政府による緊急事態宣言で、営業自粛する店舗も目立つようになりました。

さらに、これから本格的にゴールデンウィークへと突入しますが、東京都では「ステイホーム週間」として、外出自粛要請を強めており、店舗を経営されている方には厳しい状況かと思います。

そこで、そんな苦境下だからこそ、インターネットによる情報の発信に力を入れてみていかがでしょうか？

今回は、インターネットで情報を発信する必要性を解説します。

ブロックエディタのカスタマイズをしていますが、ブロックエディタのカスタマイズ方法に関する情報がネット上にはまだ少なく、検索しては開発環境でコードを書き、ビルド後に検証するというのを繰り返してします。

そんな中で、今回は、各ブロックのツールバーに、特定の文字列をマークアップするためのボタンを追加するカスタマイズ方法をご紹介します。