WordPress 5.0 から導入されたブロックエディタで投稿を作成した際、投稿内容から自動生成される抜粋 (the_excerpt) が表示されない不具合に遭遇したので、その原因と改善方法を紹介します。
投稿の抜粋は「the_excerptテンプレートタグ」を使用して出力しますが、その内部で使用されている「get_the_excerptテンプレートタグ」で抜粋が取得できない場合にも有効な改善方法です。
img要素のalt属性に設定する適切な代替テキストの考え方
ウェブページで画像を表示させるために「img要素」が使われますが、このimg要素に設定できる属性の1つに、画像の代わりとなる文章「代替テキスト」を設定する「alt属性」があります。
代替テキストを適切に設定することは「SEO」や「ウェブアクセシビリティ」において重要です。しかし、どのような文章を設定すればいいのか分からない方も多いのではないでしょうか？
そこで今回は適切な代替テキストを設定するための考え方を紹介します。
Googleのテキストが小さすぎ・要素同士が近すぎ問題の対策方法
Google Search Console から「モバイルユーザビリティで問題が検出されました」というメールが送られてきました。
その内容は「テキストが小さすぎて読めません」と「クリック可能な要素同士が近すぎます」というものでした。
今回は、こうした内容のメールが送られてきたときの対策方法です。
WordPress 5.4.1 で「投稿」の個別ページが表示されない不具合
WordPressのバージョンを5.4.1に更新したところ、「投稿」の個別ページが表示されず、アーカイブページが表示される不具合が発生したので、その原因と解消方法をご紹介します。
営業自粛でステイホーム何する？という人は情報を発信しよう
コロナ禍で世界中が大変なことになっていますね。日本政府による緊急事態宣言で、営業自粛する店舗も目立つようになりました。
さらに、これから本格的にゴールデンウィークへと突入しますが、東京都では「ステイホーム週間」として、外出自粛要請を強めており、店舗を経営されている方には厳しい状況かと思います。
そこで、そんな苦境下だからこそ、インターネットによる情報の発信に力を入れてみていかがでしょうか？
今回は、インターネットで情報を発信する必要性を解説します。
WordPressブロックエディタのツールバーをカスタマイズする方法
ブロックエディタのカスタマイズをしていますが、ブロックエディタのカスタマイズ方法に関する情報がネット上にはまだ少なく、検索しては開発環境でコードを書き、ビルド後に検証するというのを繰り返してします。
そんな中で、今回は、各ブロックのツールバーに、特定の文字列をマークアップするためのボタンを追加するカスタマイズ方法をご紹介します。
CSSのmarginで悩む人に試してほしい全称セレクタの活用方法
良いデザインにはマージン (余白) が適切に設定されているものです。
Webデザインの場合、マージンはCSSのmarginプロパティで設定しますが、「マージンの相殺 (margin collapse)」「入れ子になった要素への対処」「汎用性」などを考慮しなければなりません。
そこで今回は、長年の研究により編み出した、全称セレクタ (ユニバーサルセレクタ) を活用した、使い勝手の良い垂直マージンの設定方法をご紹介します。
CSS Grid Layoutのカラムの幅が拡張される問題を解決する方法
Web制作を長くやっている人なら、IE6の「要素拡張問題 (Expanding Box Problem)」を知っているのではないでしょうか？
この「要素拡張問題」は、要素に指定した横幅を無視して、要素の内容が要素の幅を押し広げてしまうというものです。
CSS Grid Layoutのカラム (列) でも、同様の問題が起こったため、その解決方法をご紹介します。
CSSの100vwに垂直スクロールバーの幅が含まれる問題を解決する
CSSで使用できる単位の vw (Viewport Width) をうまく使えてますか？
親要素の横幅を基準にする % と異なり、vw はブラウザの表示領域を基準にするため、祖先要素の横幅に依存しない相対的な幅を設定することができます。
この vw にはブラウザの表示領域に表示されるスクロールバーの幅も含まれます。
スクロールバーの幅は、ブラウザによって異なるだけでなく、コンテンツの量や閲覧環境 (PC・タブレット・スマートフォン) によって、表示されたり表示されなかったりするので、vw は使いづらい印象があります。
今回は、スクロールバーの幅や表示・非表示の影響を受けずに 100vw を活用するためのテクニックを紹介します。
WordPressをSNS化できるBuddyPressのカスタマイズ方法
WordPressで、FacebookやTwitterのようなSNSを作ることができる、BuddyPressというプラグインがあります。
WordPressの公式テーマディレクトリでは、テーマがBuddyPressに対応しているか絞り込めるようになっており、WordPressをSNS化する定番プラグインとなっています。
このBuddyPressをカスタマイズする際、カスタマイズ方法に関する情報が少なかったり、情報が古かったりして、非常に手間取ったので、その方法をご紹介します。