2020年

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テンプレートタグ」で抜粋が取得できない場合にも有効な改善方法です。

img要素のalt属性に設定する適切な代替テキストの考え方

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

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

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

Googleのテキストが小さすぎ・要素同士が近すぎ問題の対策方法

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

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

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

営業自粛でステイホーム何する?という人は情報を発信しよう

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

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

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

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

WordPressブロックエディタのツールバーをカスタマイズする方法

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

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