アクセシビリティ対策

閲覧数: 25(0)

テーマカスタマイズの一環で、トップページに一覧表示されている「写真を左右交互に表示する」ようにした際にも言ったように、見た目はバランス良くなったとしても記事へのアクセシビリティが低下するので、その対策を考えてみた。マウスの位置に反応して背景の色を変えてみたらどの記事が選ばれているか判りやすくなるのではないかと思い試してみた。実装結果はこんな感じ。

これなら背景色がライトブルーになっている記事が選ばれていると一目瞭然のはず。後はマウスを乗せた時の背景色の変わり具合の調整。単純にマウスを乗せた時に背景色が変わるのでは味気ない。あまり手の込んだスクリプトやライブラリは今回は使いたくない。いろいろ悩んだ結果がこれ。この一見単純なCSSにより、マウスが乗ると右から左に向かってライトブルーの帯が移動する感じで変化するようになります。スマホからでは確認出来ません。マウスカーソルが必要です。単純な割に動きがあって気に入っています。

  .post-archive .hentry:hover {
    background: linear-gradient(to left, lightblue 50%, white 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .5s ease-out;
}
カテゴリーIT閑話, 公開タグ, ,
検索精度を高める
blank
2020年11月1日

検索ネタを連発するのはElasticsearchやElasticPressがバージョンアップした時の  続きを読む

ElasticPress日本語設定2020年版
blank
2020年10月29日

ElasticsearchをWordpressで利用するためのプラグインであるElasticPres  続きを読む

ElasticPress 3.5
blank
2020年10月22日

Elasticsearch用のプラグインであるElasticPressがメジャーバージョンアップ(3  続きを読む

Elasticsearch 6.8.11
blank
2020年10月2日

2017年末に「2.4.6」から「5.6.5」へバージョンアップして以来の大幅バージョンアップです。  続きを読む

パンくずリスト詳細
blank
2020年5月12日

テーマの「マイナーチェンジ」に伴って「パンくずリスト」の仕様を若干変更しました。一つ前のテーマではパ  続きを読む

カテゴリーを制限する
blank
2020年5月11日

過去に何度も書いた「カテゴリー制限」の話、元はと言えば初期に書かれた「非公開」の記事が原因です。トッ  続きを読む

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください