痛Scrapbox:作成手順とノウハウ
まず、萌え絵を自分で描くか、どこかからか探して来て用意します。（著作権関係に注意してください） 自分が気に入った絵であることが、たいへん重要です
自分に正直になりましょう
自分のページにcode:style.cssのセクションを作成 code:style.css
@import "/api/code/suto3/haku/style.css"; /* */
リロードすれば反映される（パスのcssファイルが存在すれば） code:style.css
/*@import "/api/code/suto3/haku/style.css"; /* */
以下、任意の作業場所（ページ）にcode:style.cssを作成して、@importで読み込む
この方法だと、確認しながら、少しずつ作業をすすめることができる
複数切り替えながらの確認もできる
body{} の記述。
code:style.css
body {
background-color: WhiteSmoke;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top ;
background-size: auto;
}
https://gyazo.com/6a0225ef9351bde1a3b84d811109efcb
画像は、右側に寄せて配置したほうがいいです。
左側にはテキスト等が多く配置される事が多いのです。
background-image に !importantをつけていたのですが、良くないみたいなので外しました
code:style.css
.page {
background-color: WhiteSmoke;
opacity:0.8;
/* filter: blur(1px); */
filter: none;
}
.page:hover {
background-color: white;
opacity:1;
filter: none;
}
ここは大きく変更しないほうが良いでしょう。
ここでは、
Hover時には、透過がなくなり（opacity:1;）、背景色が本来の色に戻る（background-color: white;）
非Hover時には、半透明（opacity:0.8;）にし、背景色が少し暗くなる（background-color: WhiteSmoke;）
という変更をやっています。
ぼかし処理（blur）は試してみましたが、可読性が落ちるので、止めました。
code:style.css
.related-page-list {
opacity:0.5;
filter: blur(1px);
}
.related-page-list:hover {
opacity:1;
filter: none;
}
ここでは、
Hover時には、透過がなくなり（opacity:1;）、ぼかし処理のエフェクトを消す（filter: none;）
非Hover時には、半透明（opacity:0.5;）にし、ぼかし処理をいれる（filter: blur(1px);）
という変更をやっています。
ぼかし処理によって、フォーカス／非フォーカスの強調をすることを意図しています。
背景画像がよく見えるように、透明度を0.5 にしました。
code:style.css
.page-list {
opacity:0.5;
filter: none;
/*filter: blur(1px);*/
}
.page-list:hover {
opacity:1;
filter: none;
}
ここでは、
Hover時には、透過しない（opacity:1;）
非Hover時には、半透明（opacity:0.5;）にする
という変更をやっています。
ぼかし処理は止めました。
痛Scrapbox.icon
https://img.shields.io/badge/痛-作成手順とノウハウ-444.svg?style=for-the-badge&labelColor=F0F
![https://i.gyazo.com/de07fbaab5c961dc7fd3720ba956bbd3.png");](https://i.gyazo.com/de07fbaab5c961dc7fd3720ba956bbd3.png");){kind=link}
![https://i.gyazo.com/de07fbaab5c961dc7fd3720ba956bbd3.png")](https://i.gyazo.com/de07fbaab5c961dc7fd3720ba956bbd3.png")){kind=link}