Webエンジニアのブログ

Webページのコンテンツ内容に合わせて、SNSアカウントの紹介を掲載したり導線を設置することがありますが、カード風のデザインとして掲載することで、SNSの情報をわかりやすく伝えることができます。ここでは、WebページにBlueskyやT...
続きを読む>>

Blueskyでは、アカウントのハンドルネームを独自ドメインに設定することも可能で、本人認証としても機能し、アカウントの信頼性を高めることができます。ここでは、Blueskyアカウントのハンドルネームに独自ドメインを設定して本人認証する方法...
続きを読む>>

OneDriveやGoogleドライブなどのクラウドストレージからファイルを圧縮してダウンロードしたzipファイルでは、ファイルが展開（解凍）できないなどの問題も起きたりします。MacではThe Unarchiverを利用することで解決でき...
続きを読む>>

iPadではWebブラウザからアクセスして利用できるWeb版のExcelや、iPad版のアプリケーションでピボットテーブルを利用することができます。ここでは、iPadのExcelでピボットテーブルを使う方法についてご紹介します。...
続きを読む>>

WordPressの投稿や固定ページなどで、定型コンテンツのブロックとして自作できる便利な再利用ブロック（パターン）。主に投稿や固定ページで利用していきますが、ここでは、再利用ブロック（パターン）をテーマ内のPHPファイルで呼び出す方法につ...
続きを読む>>

Webページのスクロール時に、可視範囲に入ったコンテンツにアニメーションで動きを加えることで、ユーザーの目を引くことができます。特に重要なコンテンツにインパクトを与えるにはとても効果的です。ここでは純粋なJavaScriptで、スクロール時...
続きを読む>>

Amazonアソシエイトでは2024年1月1日から、これまで商品リンクの作成方法ではテキストリンクしか作成することができず、商品画像の表示が必要とする場合は、Product Advertising API（商品情報API）を使って商品情報を...
続きを読む>>

Webデザインでは要素に装飾する下線などで、線の長さを調整したいことがありますが、汎用性の高い線を実装する場合は、before擬似要素やafter擬似要素などで要素を追加して実装するのがベストです。ここでCSSでborderの長さを調整する...
続きを読む>>

Webページの表示において、様々なデバイスの幅でのコンテンツの文章の折り返し位置は、見やすさや読みやすさを保つために調整したいところですが、CSSのword-breakプロパティの値を「auto-phrase」とすることで、日本語のテキスト...
続きを読む>>

BlueskyにもX Pro（旧TweetDeck）に似たWebクライアント「deck.blue」が公開されており、アプリ使いに情報収集がしやすくなります。ポストや検索はもちろん、ハッシュタグが対応していたり、どのようなカラムを追加するのか...
続きを読む>>