Webエンジニアのブログ

Webサイトのデザインで、要素に対して固定された幅でCSSなどのスタイルを指定してしまうと、コンテンツ量が想定以上に多くなった際に、レイアウトが崩れてしまうという問題が発生しますが、JavaScriptを活用することで、変動するコンテンツ量...
続きを読む>>

外部サービスを埋め込む際、JavaScriptで生成される動的なリンクには、同じタブでページを開く仕様のものがあります。もしもアフィリエイトのかんたんリンクなどでは、各サービスへのアクセスは別タブで開く仕様となりますが、JavaScript...
続きを読む>>

生成AI時代におけるSEO対策は、従来のSEO対策に加え、生成AIやLLM（大規模言語モデル）にも適したコンテンツ制作と情報伝達が重要になります。ここでは、WordPressでのLLMO（大規模言語モデル最適化）の対策として、JSON-LD...
続きを読む>>

WordPressとnoteの連携は、オンラインでの情報発信を強化する有効な手段です。WordPressの拡散力とnoteの手軽さを組み合わせることで、より多くの読者層にアプローチし、コンテンツの価値を最大限に引き出せます。ここでは、Wor...
続きを読む>>

WordPressのサイトアドレス（URL）はSEOの観点からもとても重要になりますが、WordPressの構築方法によっては、ドメイン直下かサブディレクトリを含むURLとなるかが変わってきます。ここでは、サブディレクトリにインストールした...
続きを読む>>

ローカル開発環境のMAMP 7以降では、WordPressのパーマリンク設定を変更すると、MAMPの環境の影響で下層ページが404 Not Found エラーとなる問題が発生します。Apacheのmod_rewriteモジュールを有効化する...
続きを読む>>

Webページで動画コンテンツを強調し、ユーザーに視聴してもらいたい場合、画像を強調する際によく活用されるモーダルウィンドウ（ポップアップ）で表示するデザインが有効です。モーダルウィンドウの動作の流れを考えると、意外と手軽にJavaScrip...
続きを読む>>

YouTube ショートやHTMLのvideoタグなどで縦型動画を読み込む場合、そのまま埋め込みコードを読み込んでもレスポンシブWebデザインに対応していないので、CSSでアスペクト比の調整などが必要になります。ここでは、YouTube シ...
続きを読む>>

より良いUI/UXを意識するのであれば、JavaScriptによるプログラムの実装もユーザーの環境に合わせることが求められますが、matchMediaメソッドを使うことでメディアクエリや表示領域のリサイズの判定、hover動作のデバイスの判...
続きを読む>>

CSSの:hover擬似クラスを利用したhoverアクションの実装は、モバイルデバイスでは予期せぬ動作を起こすことがあります。ここではhover関連のメディア特性を利用してhoverが動作するデバイスを判別し、hoverが動作するデバイスに...
続きを読む>>