透明度

opacity:▶▶0.1～に下がる程に背景に透けていきます。。背景とのコントラストが下がっていきます。。

メリット▶▶背景によって視覚的に楽しめる。。白のままの場合、背景によって明度が下がるので目に優しくなる。。

デメリット▶▶コントラストが下がりすぎるとぼやけて逆にみにくくなります👶

hover（通過）▶▶PCで、クリックはしていなくても、ポインターが乗っている状態での事、なのでスマホだと長押しとか各々によりになるので、hoverでのPCとスマホの設定は意味が変わってくると思うので、現在の【白✖ほうじ茶背景】での、PCとスマホで違う設定の目安として。。

白でない場合や、ほうじ茶（白に対して暗）背景でない場合の最適目安の追記もまた宜しくです┏(I：)ﾍﾟｺ

TOPページのカードに適応

（透明／不透明の設定のみ）

非hover時は透明度を下げ暗く（上）hoverすると明るめにほぼしっかり見える様にしてます（下）

code:style.css

.page-list {

/* 透明度の設定 */

opacity:0.7;

}

.page-list:hover {

/* hover時 */

opacity:0.9;

}

/icons/hr.icon

スマホ

ほぼ常に非hoverな筈なのでカード探しに見やすさ優先かなと、値は高めがおすすめかもで微調整どぞです

code:style.css

.page-list {

/* 透明度の設定 */

opacity:0.8;

}

.page-list:hover {

/* hover時 */

opacity:0.9;

}

各カードの記事の部分に適応

（透明／不透明の設定のみ）

hoverの状態で透明度を下げると記入時に暗くなって目に優しく（下）観閲時にはhover外して明瞭に出来たりで便利です🎵

code:style.css

.page {

/* 透明度の設定 */

opacity:0.8;

}

.page:hover {

/* hover時 */

opacity:0.7;

}

/icons/hr.icon

スマホ

PCと同じで記入時は暗くなってほしいと思いますがバックライトの加減によるのでスマホだと明るめの方がいいかもですね、泥か林檎かやブラウザやアプリによってhoverの動作が違うかもなので微調節もどうぞですね

code:style.css

.page {

/* 透明度の設定 */

opacity:0.9;

}

.page:hover {

/* hover時 */

opacity:0.8;

}

一番下に出てくる関連ページカードに適応

（透明／不透明の設定のみ）

こちら最後に出てくるだけなのでお好みに成ると思いますがTOPと同じく非hoverで暗く（上）hoverで見やすくしてます（下）

code:style.css

.related-page-list {

/* 透明度の設定 */

opacity:0.7;

}

.related-page-list:hover {

/* hover時 */

opacity:0.9;

}

/icons/hr.icon

スマホ

TOPと同じくhoverの適応がPCと違うので見やすさ優先がオススメかもですね

code:style.css

.related-page-list {

/* 透明度の設定 */

opacity:0.8;

}

.related-page-list:hover {

/* hover時 */

opacity:0.9;

}