Webサイト
Webサイトをダークモードに対応させてみる
最近流行りのダークモード。みんな大好きダークモード。目に優しいダークモード。 そんなダークモードを使って自分のサイトを覗いてみると、全然目に優しく無い。これはイ...
アイコンフォントのウェブアクセシビリティを向上する
Webサイトで多く利用されている Font Awesome アイコン。簡単に装飾も出来て便利ですね。 しかし、それがWeb閲覧の妨げになってはいないでしょうか？...
iPhone iPad の Media Queries ブレイクポイント
CSS @media で iPhone iPad を基準としたブレイクポイントを指定する時の参考表示領域。 iPad 9.7インチ縦向きの横幅は 768px。 ...
aria-describedby 属性の動作検証
WAI-ARIA で定義されている aria-describedby 属性。 スクリーンリーダーやブラウザーでどの様な挙動を取るのかの検証と、このページを使って...
aria-labelledby 属性の動作検証
WAI-ARIA で定義されている aria-labelledby 属性。 スクリーンリーダーやブラウザーでどの様な挙動を取るのかの検証と、このページを使って動...
Luxeritas タイトル見出しを左右の余白まで拡げる
文章を読む際に、人間の目は左右の往復の幅が大きいと疲れ易いとの事。 一行の長さは80バイト、日本語にして40文字以内に収めるのが良いとか。 40文字というと、1...
WordPress Gutenberg に早くも分かれを告げる
WordPress 5.0 からデフォルトのエディターとして採用された Gutenberg。 導入前から良からぬ噂は聞いていたけど、試してみないと分からないだろ...
WordPress ウィジェットのアクセシビリティモードの利用
WordPress の「外観」→「ウィジェット」の設定画面の右上の「表示オプション」から「アクセシビリティモードを有効にする」を選択するとウィジェット画面のモー...
aria-label 属性の動作検証
WAI-ARIA で定義されている aria-label 属性。 スクリーンリーダーユーザーに対してとても有用な技術だと思います。 しかし、実装するに当たってス...
Luxeritas の関連記事数とタイトルを変更する
WordPress Theme Luxeritas の関連記事機能のカスタマイズ方法です。 php ファイルを編集するので、子テーマで作業するか、すぐに戻せる様...
Luxeritas のアイコンフォントをアクセシブルにする
WordPress Luxeritas Theme ではデフォルトのデザインにもアイコンフォントが使用されています。 多くのサイトでも採用されていますが、そのま...
the_posts_pagination のWebアクセシビリティ
ページネーションはサイトの一覧ページや記事下で記事を分割したり、リストのページ遷移をしたりする為に使われています。 例えばこんなやつです。 «&ls...
Luxeritas で常に展開するグローバルナビを作ってみる
レスポンシブデザインが主流の昨今、あちこちのサイトで上部にハンバーガーメニューが置かれているのを見かけます。 横三本線のアレですね。ハンバーガーに見える見えない...
Luxeritas の Footer に横並びのメニューを作ってみる
WordPress Luxeritas Theme でフッターにプライバシーポリシーページやお問い合わせページのナビゲーションメニューを配置しようと思うも、テー...
WordPress Luxeritas 文字サイズの設定で難儀する
WordPress Luxeritas Theme 詳細なカスタマイズが出来てとても重宝しています。 今回は文字サイズを Google も推奨している 16px...
Webアクセシビリティを考えたレイアウトとは
Webアクセシビリティとは簡単に言うと、どんな利用者の環境であっても使い易いサイト、情報へのアクセスのし易さという事でしょうか。 定義を検索してみても、何だか難...
目に優しいWebサイトの配色は白？ 黒？ それとも…
ロービジョンの方や高齢な方等の中には、パソコンやスマホの画面が眩しく感じる方がいます。 主に画面の明度や背景色によるものですが、最近ではブルーライトが悪いと言わ...
アクセシビリティに配慮した WordPress テーマ「Luxeritas」
WordPress を利用してサイトを制作する際にどの WordPress テーマを選ぶかというのは頭を悩ませるところです。 WordPress Theme L...