ホーム » Blogger »

カエレバ・ヨメレバのデザインを変更しました。＋アクセシビリティ

2022月10月30日更新

2020年07月11日公開

当サイトはアフィリエイト広告を使用しています

Blogger

カエレバ・ヨメレバCSSジェネレーター | つばさのーとで作ったものを長い間つかっていましたが、テンプレートを新しくしたのでこれを契機にデザインを変更しました。

ボタンの色をアクセシビリティのコントラスト比を考慮したものに変更

orderプロパティでボタンの並べ替え（今回採用せず）

画像の大きさは画像中100%を想定

もしもアフィリエイト、バリューコマース利用時に1pxのimgが挿入されるので、display:noneで（デザインに関係あると思われるところだけ）非表示に

追記：2022年10月 1pxのimgは非表示にしなくても大丈夫かもしれないので、確認をお願いします。

ボタンの並べ替えはアクセシビリティ的に難ありっぽいので、今回は採用しない方向ですが一応書いておきます。画像、CSSは記事公開時のものになります。アクセシビリティアクセシビリティは多岐にわたるので、今回はボタンの色のコントラスト比のみを考慮しました。色の基準はNormal Text (Small Text ) WCAG AAを目安にしました。参考サイト

コントラスト比［色］｜実践ノウハウ｜エーイレブンワイ［WebA11y.jp］

達成基準 1.4.3 を理解する | WCAG 2.0解説書

使ったツール

WebAIM: Contrast Checker

WCAG

Color.review - Colors that look and work great for everyone（細かく調整するなら）

CSS記事公開時のものより少し変わっています（2020年7月31日）

クリックすると開きます。

/* ヨメレバ カエレバデザイン スマートフォン-display:block PC-display:flex-row */
.booklink-box, .kaerebalink-box {
	display: block;
	margin: 1em auto;
	padding: 1em;
	border: 1px solid #575757;
	box-sizing: border-box;
	border-radius: 5px;
	text-align: center;
}
.booklink-image, .kaerebalink-image {
	width: 60%;
	margin: 0 auto;
}
.booklink-image img:nth-child(2), .kaerebalink-image img:nth-child(2) {
	display: none;
}
.booklink-powered-date, .kaerebalink-powered-date {
	font-size: .7em;
	margin-bottom: 1em;
}
.booklink-detail, .kaerebalink-detail {
	margin-bottom: 1em;
	font-size: .9em;
}
.booklink-link2, .kaerebalink-link1 {
	width: 95%;
	margin: 0 auto;
}
.booklink-link2 img, .kaerebalink-link1 img {
	display:none;
}
.booklink-link2 div, .kaerebalink-link1 div {
	font-size: 1.1em;
	border-radius: 2px;
	margin-bottom: 1.5em;
}
.booklink-link2 a, .kaerebalink-link1 a {
	color: #fff !important;
	display: block;
	padding: .5em;
	text-decoration: none !important;
	transition: all .5s;
}
@media (min-width: 768px){
.booklink-box, .kaerebalink-box {
	display: flex;
}
.booklink-image, .kaerebalink-image {
	flex-basis: 25%;
}
.booklink-info, .kaerebalink-info {
	flex-basis: 75%;
}
.booklink-detail, .kaerebalink-detail {
	margin-bottom: initial;
}
.booklink-link2, .kaerebalink-link1 {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.booklink-link2 div, .kaerebalink-link1 div {
	flex-basis: 48%;
	margin-bottom: .8em;
	font-size: .9em;
}
}
.shoplinkrakuten  {
	background: #BF0000;
	border: 1px solid #BF0000;
	box-shadow: 2px 2px 2px #555;
}
.shoplinkrakuten a:hover {
	color: #BF0000 !important;
	background: #fff;
}
.shoplinkamazon  {
	background: #A86500;
	border: 1px solid #A86500;
	box-shadow: 2px 2px 2px #555;
}
.shoplinkamazon a:hover {
	color: #A86500 !important;
	background: #fff;
}
.shoplinkyahoo  {
	background: #EB002F;
	border: 1px solid #EB002F;
	box-shadow: 2px 2px 2px #555;
}
.shoplinkyahoo a:hover {
	color: #EB002F !important;
	background: #fff;
}
.shoplinkseven  {
	background: #3275C8;
	border: 1px solid #3275C8;
	box-shadow:2px 2px 2px #555;
}
.shoplinkseven a:hover {
	color: #3275C8 !important;
	background: #fff;
}
.shoplinkkindle  {
	background: #008571;
	border: 1px solid #008571;
	box-shadow:2px 2px 2px #555;
}
.shoplinkkindle a:hover {
	color: #008571 !important;
	background: #fff;
}
.shoplinkrakukobo  {
	background: #8A0000;
	border: 1px solid #8A0000;
	box-shadow:2px 2px 2px #555;
}
.shoplinkrakukobo a:hover {
	color: #8A0000 !important;
	background: #fff;
}

デザインについて調べている際にaタグにbackgroundやborderを振っているコードをよく見ました。なので一応aタグバージョンも書いておきます。

aタグのバージョン。クリックすると開きます。

/* ヨメレバ カエレバデザイン スマートフォン-display:block PC-display:flex-row */
.booklink-box, .kaerebalink-box {
	display: block;
	margin: 1em auto;
	padding: 1em;
	border: 1px solid #575757;
	box-sizing: border-box;
	border-radius: 5px;
	text-align: center;
}
.booklink-image, .kaerebalink-image {
	width: 60%;
	margin: 0 auto;
}
.booklink-image img:nth-child(2), .kaerebalink-image img:nth-child(2) {
	display: none;
}
.booklink-powered-date, .kaerebalink-powered-date {
	font-size: .7em;
	margin-bottom: 1em;
}
.booklink-detail, .kaerebalink-detail {
	margin-bottom: 1em;
	font-size: .9em;
}
.booklink-link2, .kaerebalink-link1 {
	width: 95%;
	margin: 0 auto;
}
.booklink-link2 img, .kaerebalink-link1 img {
	display:none;
}
.booklink-link2 div, .kaerebalink-link1 div {
	margin-bottom: 1.5em;
}
.booklink-link2 a, .kaerebalink-link1 a {
	font-size: 1.1em;
	color: #fff !important;
	display: block;
	padding: .5em;
	border-radius: 2px;
	transition: all .5s;
	text-decoration: none !important;
}
@media (min-width: 768px){
.booklink-box, .kaerebalink-box {
	display: flex;
}
.booklink-image, .kaerebalink-image {
	flex-basis: 25%;
}
.booklink-info, .kaerebalink-info {
	flex-basis: 75%;
}
.booklink-detail, .kaerebalink-detail {
	margin-bottom: initial;
}
.booklink-link2, .kaerebalink-link1 {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.booklink-link2 div, .kaerebalink-link1 div {
	flex-basis: 48%;
	margin-bottom: .8em;
}
.booklink-link2 a, .kaerebalink-link1 a {
	font-size: .9em;
}
}
.shoplinkrakuten a {
	background: #BF0000;
	border: 1px solid #BF0000;
	box-shadow: 2px 2px 2px #555;
}
.shoplinkrakuten a:hover {
	color: #BF0000 !important;
	background: #fff;
}
.shoplinkamazon a {
	background: #A86500;
	border: 1px solid #A86500;
	box-shadow: 2px 2px 2px #555;
}
.shoplinkamazon a:hover {
	color: #A86500 !important;
	background: #fff;
}
.shoplinkyahoo a {
	background: #EB002F;
	border: 1px solid #EB002F;
	box-shadow: 2px 2px 2px #555;
}
.shoplinkyahoo a:hover {
	color: #EB002F !important;
	background: #fff;
}
.shoplinkseven a {
	background: #3275C8;
	border: 1px solid #3275C8;
	box-shadow:2px 2px 2px #555;
}
.shoplinkseven a:hover {
	color: #3275C8 !important;
	background: #fff;
}
.shoplinkkindle a {
	background: #008571;
	border: 1px solid #008571;
	box-shadow:2px 2px 2px #555;
}
.shoplinkkindle a:hover {
	color: #008571 !important;
	background: #fff;
}
.shoplinkrakukobo a {
	background: #8A0000;
	border: 1px solid #8A0000;
	box-shadow:2px 2px 2px #555;
}
.shoplinkrakukobo a:hover {
	color: #8A0000 !important;
	background: #fff;
}

画像は記事公開時のものです

PCのとき

スマートフォンのとき

見慣れないせいか違和感があります。調整が必要かなぁ既知の不具合リンクボタンの文字数が多かったり文字が大きめだと、iPad Pro(1024×1366）くらいの幅のときに改行がおきる。（修正しました）

orderプロパティでボタンの並べ替えカエレバは「楽天」、「Amazon」、「Yahoo!ショッピング」、「７net」......の順番でHTMLが生成されます。この順番をdisplay:flex;とorderプロパティを使って変更してみました。フレックスアイテムの並べ替え - CSS: カスケーディングスタイルシート | MDN「楽天」と「Amazon」を入れ替えこれを

こうする

基本的には.booklink-box, .kaerebalink-boxにdisplay:flex;そして.shoplinkrakutenなどにorder:値;のようなプロパティと値を追加すれば順番が変えられます。（ボタンの大きさ、配置などはその他のCSSに依存します。）例えば「Amazon」「Yahoo!ショッピング」「7net」「楽天」の順番だったら.booklink-box, .kaerebalink-box { display: flex; } .shoplinkrakuten { order: 4; } .shoplinkamazon { order: 1; } .shoplinkyahoo { order: 2; } .shoplinkseven { order: 3; }orderプロパティの初期値は0なので、「Amazon」を一番はじめにしたいだけなら.shoplinkamazon { order: -1; }のようにマイナスの値にするだけでOK。カエレバとヨメレバを違う順番にカエレバは.kaerebalink-link1 ヨメレバは.booklink-link2 なので、.kaerebalink-link1 .shoplinkamazon { order: 1; } .booklink-link2 .shoplinkamazon { order: 2; }のように分ける

画像はカエレバ.kaerebalink-link1が

Amazon

Yahooショッピング

楽天

ヨメレバ.booklink-link2が

Kindle

Amazon

楽天kobo

7net

楽天ブックス

CSSの例です。（カエレバの画像にはありませんが.shoplinksevenは4番目にしてあります）.booklink-box, .kaerebalink-boxをdisplay:flex;にする/* display: flex; */ .booklink-box, .kaerebalink-box { display: flex; }リンクボタンの順番指定/* リンクボタンの順番指定 */ /* カエレバ */ .kaerebalink-link1 .shoplinkrakuten {order:3;} .kaerebalink-link1 .shoplinkamazon {order:1;} .kaerebalink-link1 .shoplinkyahoo {order:2;} .kaerebalink-link1 .shoplinkseven {order:4;} /* ヨメレバ */ .booklink-link2 .shoplinkrakuten {order:5;} .booklink-link2 .shoplinkamazon {order:2;} .booklink-link2 .shoplinkseven {order:4;} .booklink-link2 .shoplinkkindle {order:1;} .booklink-link2 .shoplinkrakukobo {order:3;}ただ、前述のようにアクセシビリティ的には難ありっぽいので、今回は採用しない方向です。TABキーで移動した場合こうなります。

CSS

クリックすると開きます。

/* ヨメレバ カエレバデザイン スマートフォン-flex-direction:column PC-flex-direction:row リンクボタンの順番変更*/
.booklink-box, .kaerebalink-box {
	display: block;
	margin: 1em auto;
	padding: 1em;
	border: 1px solid #575757;
	box-sizing: border-box;
	border-radius: 5px;
	text-align: center;
}
.booklink-image, .kaerebalink-image {
	width: 60%;
	margin: 0 auto;
}
.booklink-image img:nth-child(2), .kaerebalink-image img:nth-child(2) {
	display: none;
}
.booklink-powered-date, .kaerebalink-powered-date {
	font-size: .7em;
	margin-bottom: 1em;
}
.booklink-detail, .kaerebalink-detail {
	margin-bottom: 1em;
	font-size: .9em;
}
.booklink-link2, .kaerebalink-link1 {
	display: flex;
	flex-direction: column;
	width: 95%;
	margin: 0 auto;
}
.booklink-link2 img, .kaerebalink-link1 img {
	display:none;
}
.booklink-link2 div, .kaerebalink-link1 div {
	font-size: 1.1em;
	border-radius: 2px;
	margin-bottom: 1.5em;
}
.booklink-link2 a, .kaerebalink-link1 a {
	color: #fff !important;
	display: block;
	padding: .5em;
	text-decoration: none !important;
	transition: all .5s;
}
@media (min-width: 768px){
.booklink-box, .kaerebalink-box {
	display: flex;
}
.booklink-image, .kaerebalink-image {
	flex-basis: 25%;
}
.booklink-info, .kaerebalink-info {
	flex-basis: 75%;
}
.booklink-detail, .kaerebalink-detail {
	margin-bottom: initial;
}
.booklink-link2, .kaerebalink-link1 {
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}
.booklink-link2 div, .kaerebalink-link1 div {
	flex-basis: 48%;
	margin-bottom: .8em;
	font-size: .9em;
}
}
.shoplinkrakuten  {
	background: #BF0000;
	border: 1px solid #BF0000;
	box-shadow: 2px 2px 2px #555;
}
.shoplinkrakuten a:hover {
	color: #BF0000 !important;
	background: #fff;
}
.shoplinkamazon  {
	background: #A86500;
	border: 1px solid #A86500;
	box-shadow: 2px 2px 2px #555;
}
.shoplinkamazon a:hover {
	color: #A86500 !important;
	background: #fff;
}
.shoplinkyahoo  {
	background: #EB002F;
	border: 1px solid #EB002F;
	box-shadow: 2px 2px 2px #555;
}
.shoplinkyahoo a:hover {
	color: #EB002F !important;
	background: #fff;
}
.shoplinkseven  {
	background: #3275C8;
	border: 1px solid #3275C8;
	box-shadow:2px 2px 2px #555;
}
.shoplinkseven a:hover {
	color: #3275C8 !important;
	background: #fff;
}
.shoplinkkindle  {
	background: #008571;
	border: 1px solid #008571;
	box-shadow:2px 2px 2px #555;
}
.shoplinkkindle a:hover {
	color: #008571 !important;
	background: #fff;
}
.shoplinkrakukobo  {
	background: #8A0000;
	border: 1px solid #8A0000;
	box-shadow:2px 2px 2px #555;
}
.shoplinkrakukobo a:hover {
	color: #8A0000 !important;
	background: #fff;
}
/* リンクボタンの順番指定 */

/* カエレバ */
.kaerebalink-link1 .shoplinkrakuten {order:3;}
.kaerebalink-link1 .shoplinkamazon {order:1;}
.kaerebalink-link1 .shoplinkyahoo {order:2;}
.kaerebalink-link1 .shoplinkseven {order:3;}

/* ヨメレバ */
.booklink-link2 .shoplinkrakuten {order:5;}
.booklink-link2 .shoplinkamazon {order:2;}
.booklink-link2 .shoplinkseven {order:4;}
.booklink-link2 .shoplinkkindle {order:1;}
.booklink-link2 .shoplinkrakukobo {order:3;}

aタグのバージョン。クリックすると開きます。

/* ヨメレバ カエレバデザイン スマートフォン-flex-direction:column PC-flex-direction:row リンクボタンの順番変更*/
.booklink-box, .kaerebalink-box {
	display: block;
	margin: 1em auto;
	padding: 1em;
	border: 1px solid #575757;
	box-sizing: border-box;
	border-radius: 5px;
	text-align: center;
}
.booklink-image, .kaerebalink-image {
	width: 60%;
	margin: 0 auto;
}
.booklink-image img:nth-child(2), .kaerebalink-image img:nth-child(2) {
	display: none;
}
.booklink-powered-date, .kaerebalink-powered-date {
	font-size: .7em;
	margin-bottom: 1em;
}
.booklink-detail, .kaerebalink-detail {
	margin-bottom: 1em;
	font-size: .9em;
}
.booklink-link2, .kaerebalink-link1 {
	display: flex;
	flex-direction: column;
	width: 95%;
	margin: 0 auto;
}
.booklink-link2 img, .kaerebalink-link1 img {
	display:none;
}
.booklink-link2 div, .kaerebalink-link1 div {
	margin-bottom: 1.5em;
}
.booklink-link2 a, .kaerebalink-link1 a {
	font-size: 1.1em;
	color: #fff !important;
	display: block;
	padding: .5em;
	border-radius: 2px;
	transition: all .5s;
	text-decoration: none !important;
}
@media (min-width: 768px){
.booklink-box, .kaerebalink-box {
	display: flex;
}
.booklink-image, .kaerebalink-image {
flex-basis: 25%;
}
.booklink-info, .kaerebalink-info {
	flex-basis: 75%;
}
.booklink-detail, .kaerebalink-detail {
	margin-bottom: initial;
}
.booklink-link2, .kaerebalink-link1 {
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}
.booklink-link2 div, .kaerebalink-link1 div {
	flex-basis: 48%;
	margin-bottom: .8em;
}
.booklink-link2 a, .kaerebalink-link1 a {
	font-size: .9em;
}
}
.shoplinkrakuten a {
	background: #BF0000;
	border: 1px solid #BF0000;
	box-shadow: 2px 2px 2px #555;
}
.shoplinkrakuten a:hover {
	color: #BF0000 !important;
	background: #fff;
}
.shoplinkamazon a {
	background: #A86500;
	border: 1px solid #A86500;
	box-shadow: 2px 2px 2px #555;
}
.shoplinkamazon a:hover {
	color: #A86500 !important;
	background: #fff;
}
.shoplinkyahoo a {
	background: #EB002F;
	border: 1px solid #EB002F;
	box-shadow: 2px 2px 2px #555;
}
.shoplinkyahoo a:hover {
	color: #EB002F !important;
	background: #fff;
}
.shoplinkseven a {
	background: #3275C8;
	border: 1px solid #3275C8;
	box-shadow:2px 2px 2px #555;
}
.shoplinkseven a:hover {
	color: #3275C8 !important;
	background: #fff;
}
.shoplinkkindle a {
	background: #008571;
	border: 1px solid #008571;
	box-shadow:2px 2px 2px #555;
}
.shoplinkkindle a:hover {
	color: #008571 !important;
	background: #fff;
}
.shoplinkrakukobo a {
	background: #8A0000;
	border: 1px solid #8A0000;
	box-shadow:2px 2px 2px #555;
}
.shoplinkrakukobo a:hover {
	color: #8A0000 !important;
	background: #fff;
}
/* リンクボタンの順番指定 */

/* カエレバ */
.kaerebalink-link1 .shoplinkrakuten {order:3;}
.kaerebalink-link1 .shoplinkamazon {order:1;}
.kaerebalink-link1 .shoplinkyahoo {order:2;}
.kaerebalink-link1 .shoplinkseven {order:3;}

/* ヨメレバ */
.booklink-link2 .shoplinkrakuten {order:5;}
.booklink-link2 .shoplinkamazon {order:2;}
.booklink-link2 .shoplinkseven {order:4;}
.booklink-link2 .shoplinkkindle {order:1;}
.booklink-link2 .shoplinkrakukobo {order:3;}