2026年6月2日 カテゴリー: WordPress
5月20日に WordPress 7.0 がリリースされました。WordPress 7.0 では、AIと連携できる「コネクタ」が導入されたほか、ブロックエディタではブロック単位で追加CSSを設定できたり、ブロックをビューポートに応じて非表示にできたり、他にもいくつかの機能が追加されています。
更新後に一目で変わったとわかるのは管理画面のUIで、ボタンやリンクの配色が鮮やかになりました。さらに、ボタン等の余白が大きくなり、画面遷移の動作がスムーズになっています。
この鮮やかな配色が馴染まない場合はプローフィール設定で従来の配色に戻すことができます。
※現在クラシックエディタは使用しない方向ですが、カスタム投稿タイプで本文欄を非表示とした場合に各メタボックスが強制的にクラシックエディタのUIになりますので、案件によってはブロックエディタとクラシックエディタが混在することがあります。
“WordPress 7.0 の管理画面UIの調整” の 続きを読む »
2024年1月26日 カテゴリー: アクセシビリティ
この記事は2024年1月26日に書かれたものです。情報が古い可能性がありますのでご注意ください。
ラジオボタンやチェックボックスのデザインをカスタマイズする場合、デフォルトのフォームコントロールを隠して CSS で装飾するのが一般的ですが、Web 上で紹介されている手法のほとんどがアクセシビリティへの配慮が欠けていますので注意が必要です。
ここでのアクセシビリティへの配慮というのは、キーボード操作と Windows のハイコントラスト環境です。キーボード操作については配慮されている場合もありますが、特に Windows のハイコントラスト環境への配慮が欠けています。
“ラジオボタンやチェックボックスを CSS でカスタマイズする際のアクセシビリティ” の 続きを読む »
2020年10月10日 カテゴリー: HTML/CSS/JS
この記事は2020年10月10日に書かれたものです。情報が古い可能性がありますのでご注意ください。
bxSlider でカルーセル表示をするとき、1枚目（カレント）のスライドが左端に表示されます。これを中央に表示したいのですが、bxSlider のオプションにはそのような設定はありません。
常に3枚のスライドを表示して1枚目を中央に表示する方法とか、1枚を表示してその左右に前後のスライドの一部を表示する方法は様々な記事で紹介されているのですが、それらは表示枚数が固定であることが前提です。
しかし今回やりたかったのは、画面の幅に応じて一度に表示されるスライドの数が変動する場合に、1枚目（カレント）のスライドを中央に配置すること。つまり、レスポンシブ対応で画面幅が違っても各スライドのサイズは変わらず、例えば PC 画面では5枚、タブレット端末では3枚、スマホでは1枚が表示され、その1枚目（カレント）を中央に、さらに左右には前後のスライドの一部が見えている状態にしたいということです。
そして試行錯誤の末、以下の方法で実現することができました。試行錯誤の割には、CSS でマージンを設定するだけという、実に単純なものですがw
“bxSlider のカルーセルで一度に複数枚を表示する場合に1枚目を画面の中央に配置する” の 続きを読む »
2019年9月26日 カテゴリー: HTML/CSS/JS , アクセシビリティ
この記事は2019年9月26日に書かれたものです。情報が古い可能性がありますのでご注意ください。
9月20日に iPhone 向けソフトウェア iOS 13 の配信が開始されました。その後すぐ25日に iOS 13.1 と、iOS から iPad 向けに独立した iPadOS 13.1 が配信されています。
iOS 13・iPadOS 13（以下まとめて iOS 13 とします）はダークモードをはじめ、数々の新機能が搭載されていますが、その中で、Webブラウザの Safari にWebページの文字を簡単に拡大／縮小できる機能が追加されました。アドレスバー左側の A A をタップすると拡大／縮小などのオプションが表示されます。
ところがこれ、実際は文字だけの拡大／縮小ではなく、ページ全体の拡大／縮小となっていました。つまり macOS の Safari の拡大／縮小と同じ動きです。
macOS の Safari の場合は、[option]キーを併用することで文字だけを拡大／縮小することができるのですが、iOS ではその術が見つかりません。実際、iOS はピンチアウトでズームができるので（viewport の設定によりますが）、iPhone の小さな画面では文字だけが拡大できた方がいいと思うのですが…。
“iOS 13 Safari で文字の拡大／縮小が簡単になったことの影響” の 続きを読む »
2019年7月6日 カテゴリー: HTML/CSS/JS
この記事は2019年7月6日に書かれたものです。情報が古い可能性がありますのでご注意ください。
Instagram のフィードを簡単にWebサイトに埋め込みむことができる無料サービス InstaWidget が、最近何度かダウンすることがあり、それを埋め込んでいるページ全体の読み込みに影響がありました。
SnapWidget や WordPress のプラグインである Instagram Feed は、利用するためには Instagram のアカウントで認証する必要があるため、クライアント案件ではハードルがあり、別のサービスを探していたところ、複眼feed という無料サービスがありました。
この複眼feed、Instagram に限らず、Facebook や Twitter、Youtube、Tumblr など、様々な SNS やブログ等のフィードから写真や動画を抽出して埋め込むことができ、さらに Instagram の写真は Instagram のサイトに飛んでくれるなど、とても良い感じなのですが、サムネイルのサイズが設定したサイズ（px）に固定されるため、レスポンシブでないところが難点です。複眼feed ではレスポンシブとうたってありますが、PC からのアクセスとスマホ等からのアクセスとでレイアウトを切り替えることができるというもので、PC レイアウトの可変幅には対応していません。
ただ、埋め込まれた状態の HTML を確認すると、table タグで直接埋め込まれており、よくある iframe 方式ではないので、CSS を使って上書きすることができます。
“複眼feed を可変幅のレスポンシブにする” の 続きを読む »
2019年6月15日 カテゴリー: WordPress
この記事は2019年6月15日に書かれたものです。情報が古い可能性がありますのでご注意ください。
Instagram のフィードをWebサイトに埋め込みむ場合、手軽に埋め込むことができるサービスとして InstaWidget がありますが、無料サービスゆえにサムネイルのリンク先が InstaWidget のサイトで開き、尚且つ広告が表示されるのが難点です。Google Analytics による広告なので、特に企業サイトなどでは競合他社の広告が表示されることも…。
そこで他にいいサービスが無いかと探してみたところ、WordPress のサイトであれば Instagram Feed という有名なプラグインがあったのですね。灯台下暗しでした。
この Instagram Feed、無料版と Instagram Feed Pro という有料版があり、有料版ではハッシュタグが使えたり、フィードの見た目もいろいろカスタマイズできますが、無料版は機能が限られています。それでも、複数のアカウントを統合して時系列順に表示できますし、何よりサムネイルのリンク先が Instagram のサイトで開き、広告表示が無いのが助かります。
この無料版で、サムネイルにマウスオーバーした際に写真のキャプションを表示することができないかと思い、探ってみました。
“Instagram Feed の無料版で写真のキャプションを表示” の 続きを読む »
2016年12月4日 カテゴリー: HTML/CSS/JS , アクセシビリティ
この記事は2016年12月4日に書かれたものです。情報が古い可能性がありますのでご注意ください。
次のようにサイトマップのツリー構造を表現する際、これまでずっとラインの画像をリストの背景として設定し、表現してきました。
古い Internet Explorer が 6、7、8 と次々にサポートが打ち切られた今、これまで画像で表現していたデザインを CSS のみで表現できるようになり、様々な場面で画像を使わなくなりました。一方、サイトマップについては惰性で長らく画像を使っていたのですが、これも CSS のみでできるんじゃないかと思い、やってみました。
“サイトマップのツリー構造を CSS のみで表現する” の 続きを読む »
2016年7月22日 カテゴリー: WordPress
この記事は2016年7月22日に書かれたものです。情報が古い可能性がありますのでご注意ください。
WordPress の投稿画面のスタイルを実際のサイトの見た目に近づけるために、ビジュアルエディタ用の CSS を作成して管理画面に読み込ませることができますね。editor-style.css などとして CSS ファイルを用意し、functions.php の中で
add_editor_style("editor-style.css");を記述することで、ビジュアルエディタにeditor-style.css が適用されます。
しかし、これでは記事部分の CSS を変更する際に、公開画面用の CSS とビジュアルエディタ用の CSS の両方を編集する必要があります。
そこで editor-style.css を公開画面と共有すると便利です。header.php の中で style.css と共に読み込ませるか、style.css の先頭で editor-style.css をインポートすればよいわけですが、記事部分を囲む要素の class 属性の値を工夫する必要があります。
“ビジュアルエディタと公開画面で CSS を共有する” の 続きを読む »
2015年12月11日 カテゴリー: アクセシビリティ
この記事は2015年12月11日に書かれたものです。情報が古い可能性がありますのでご注意ください。
多くのコンテンツをコンパクトに表示するために、よく用いられるタブ切り替えUI ですが、スクリーンリーダーでの利用やキーボド操作を考慮した場合に、アクセシブルではないと思えるものが少なくありません。
例えば、スクリーンリーダー利用者はタブ切り替えUIであると認識することが難しいと思われます。タブ切り替えUIは一種のページ内リンクと考えられますので、一つのタブを選択したらそのタブが示す先のコンテンツにフォーカスが移動しなければなりません。しかし、多くのタブ切り替えUIは、タブを選択した後に[tab]キーを押すと、リンク先のコンテンツ内、あるいはその次のリンクにジャンプすることはなく、選択したタブの次のタブにフォーカスが移動します。つまり、ページ内リンクとして機能していないということになります。
そのため、これまで jQuery Accessible Tabs をよく利用していましたが、もっと気軽に、自由に設定できるように、jQuery Accessible Tabs の挙動を参考にして簡単な jQuery と CSS で実装してみました。
“アクセシブルなタブ切り替えUIを考える” の 続きを読む »
2015年7月25日 カテゴリー: アクセシビリティ
この記事は2015年7月25日に書かれたものです。情報が古い可能性がありますのでご注意ください。
ソースコードを掲載する時に code 要素と併せて利用する pre 要素（整形済みテキスト）。通常は折り返さずに表示されますので、CSS で overflow: auto; として横スクロールバーを表示するようにしている場合が多いかと思います。
敢えて CSS で記述していなくても、ソースコードをハイライトして読みやすく表示させる SyntaxHighlighter などの JavaScript ライブラリを使うことで、同等の表示になっている場合もあります。
ちなみにこの blog では、ソースコードをハイライト表示するために google-code-prettify を利用しています。
pre 要素内で overflow: auto; によりスクロールが発生した場合（以降、これを “擬似的なインラインフレーム” と称します）、もちろんマウスで操作すれば見えていなかった部分をスクロールして表示することができますが、キーボード操作ではアクセシビリティ上の問題があります。
多くのブラウザでは、その中に a 要素（リンク）がない限り、キーボードで擬似的なインラインフレームにフォーカスすることができませんので、キーボード操作ではスクロールができず、見えない部分を確認することができないからです。
“pre 要素（整形済みテキスト）の折り返しを切り替え可能にする” の 続きを読む »
