アクセシビリティ対策

閲覧数: 26(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)タグ, ,
テスト系その2
blank

このサイトは個人用ブログだけど、ローカルにテスト系を持っている。個人ブログ運営者なら、記事のバックア  続きを読む

ElasticPress日本語設定
blank

前回の「検索結果の期待値」では「日本人としては長い休み」で検索出来ないと言うところまで話をしました。  続きを読む

小ネタをこねた
blank

左上のメニューアイコン(三本線w)をクリックすると左側にサイドバーが表示されます。このサイドバーの中  続きを読む

IT小ネタ2
blank

WordPressのIT小ネタ、その2です。まずは、トップページに表示しているサムネイル画像から。こ  続きを読む

カテゴリー制限
blank

カテゴリー制限はこのサイトでは過去に何度も出題された「頻出過去問題」です。初期の頃は「Allow C  続きを読む

トリミング・ファイナル
blank

ただでさえちょっとしか更新しないのに、そのちょっともしなくなるとあっという間に時間が過ぎて、面倒にな  続きを読む

スポンサーリンク

コメントを残す

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