JavaScriptでUser-Agent Client Hints(UA-CH)を利用したユーザーのデバイスを判別する方法
Web制作では必要に応じて、WindowsやMac、iPhone、iPad、Androidなど、ユーザーが利用するデバイスを判別して処理を切り分けることもあります。ここでは、userAgent(UA)とUser-Agent Client H...
続きを読む>>
Web制作では必要に応じて、WindowsやMac、iPhone、iPad、Androidなど、ユーザーが利用するデバイスを判別して処理を切り分けることもあります。ここでは、userAgent(UA)とUser-Agent Client H...
続きを読む>>
共有ボタンの設置は、ボタンのデザインがある程度決まっているプラグインを利用する方法などいろいろありますが、Webサイトのデザインにあった共有ボタンを設置したい場合は、自作できてカスタマイズが可能な方法がいいでしょう。ここではThreadsや...
続きを読む>>
Webページのコンテンツ内容に合わせて、SNSアカウントの紹介を掲載したり導線を設置することがありますが、カード風のデザインとして掲載することで、SNSの情報をわかりやすく伝えることができます。ここでは、WebページにBlueskyやT...
続きを読む>>
WordPressの投稿や固定ページなどで、定型コンテンツのブロックとして自作できる便利な再利用ブロック(パターン)。主に投稿や固定ページで利用していきますが、ここでは、再利用ブロック(パターン)をテーマ内のPHPファイルで呼び出す方法につ...
続きを読む>>
Webページのスクロール時に、可視範囲に入ったコンテンツにアニメーションで動きを加えることで、ユーザーの目を引くことができます。特に重要なコンテンツにインパクトを与えるにはとても効果的です。ここでは純粋なJavaScriptで、スクロール時...
続きを読む>>
Webページにアクセスした時に、コンテンツが綺麗に表示されるまでの時間が長いとユーザーにストレスを与えてしまいますが、ストレスを軽減するのにローディングアニメーションは非常に効果的です。ここでは、リソースが読み込まれるまでのローディングアニ...
続きを読む>>
CSSの@starting-style規則を追加することで、トランジションでの変化前のスタイルを適用させることができ、Webページのアクセス時にトランジション処理を実装することができます。ここでは、CSSの@starting-style規則...
続きを読む>>
WordPressで構築しているWebサイトでは、管理画面からの投稿や固定ページのコンテンツ制作でも、時にHTML構造を必要としたり、共通で利用していきたい埋め込みコードを使ったりと、WebやHTMLに詳しいかたはそれほど問題ありませんが、...
続きを読む>>
ブログなどの投稿記事に目次を入れることで、読者は記事の全体構造を把握しやすくなり、ユーザビリティが向上します。また、目次はSEOにも影響を与え、検索エンジンが記事の内容を理解しやすくなります。長い記事やQ&Aなどのガイド形式のコンテ...
続きを読む>>
文章中のとある文言にわかりやすい説明が必要な時は、定義リストを意味づけするdl, dt, ddといったHTMLタグを使って情報を載せていくことでしょう。GoogleやBing、Yahoo、またAIチャットボットなどの検索エンジンに、しっかり...
続きを読む>>