大昔にノートに書いたゲームブックを発掘しました！＆ちょっとだけCSS
どうも！LSSです！！
中学生の頃、ノートにゲームブックを作る趣味を覚えました。
高校生あたりまでやってたかも？
そのうち、最後に作ったものと思われるノートを発掘したので、晒してみますｗ
実物写真
文字が読めないですよねｗ
実物は読めるのですが、こう鉛筆書きのノートを写真で撮ると、文字が読みづらくなってしまう事があります。
画像加工で読みやすくする、という手もありますが、CSSでもっと手軽に改善する方法を見つけました！
ちょっとだけマシになったのがこちら！↓（画像ファイルは同じものです）
CSSフィルターを使用しました
最初に貼り付けた画像は、はてなブログの「写真を投稿」機能から貼り付けたものです。
HTML編集で見てみると、次のようなコードになっています。
コード
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20210522/20210522211230.jpg" alt="f:id:little_strange:20210522211230j:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
このimgタグに、少しCSSのstyle指定を書き加えます。
コード
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20210522/20210522211230.jpg" alt="f:id:little_strange:20210522211230j:plain" title="" class="hatena-fotolife" itemprop="image" style="filter:contrast(150%);"/></p>
この、
style="filter:contrast(150%);"
何種類かあるCSSフィルターのうちのひとつ、コントラストを調節するものです。
デフォルトは「100%」で、大きくする事も小さくする事もできますが、今回は「150%」を指定しました。
この数値については、元の写真次第でどの程度が見やすいか違ってきますが、大きくし過ぎると白トビ写真になってしまいます。
書かれた文章を写真で撮影したものをブログに載せる時に読みづらければ、これを使うとちょっと見やすくなるかもですね^^
未完の大作
※この場合「大作」は無駄にボリュームが大きいという意ｗ
少し抜粋すると、
1.あなたは現在、朝おきたところです。さて、どうしますか？
・外に出る…２へ
・庭に出る…3へ
・もう一度ねむる…4へ
2.どうしますか？
・町から出る…5へ
・ぶらぶらする…6へ
・その他…7へ
3.庭には二羽にわとりがいて、その他は井戸があるだけ。
・もどる…8へ
・井戸をのぞく…9へ
・うろうろする…10へ
4.あなたは今、庭に出て落とし穴をほっています。
・底にかんしゃく玉を入れる…11へ
・うめてしまう…12へ
・できるかぎり、ふかくほる…13へ
5.どの方角へ行きますか？
・北へ…14へ
・東へ…15へ
・西へ…16へ
・南へ…17へ
・町にもどる…18へ
6.人がいる。その数2。
・たたかう…19へ
・にげる…20へ
・その他…21へ
という感じで話が始まり、1038まで書いたところで止まっていますｗ
書いた時の事はさっぱり覚えていませんが、ダンジョンがあったり船に乗ったりドラゴンが出てきたりするようで、ところどころイラストが入ってました。
あとがき
実はこの記事は、CSSフィルターで文字を読みやすくするネタを書こうとした、のが先にあって、そのために発掘したら出てきたのでした。
1項目ほぼ1行とはいえ、1000を超えるまで書いた昔の自分にびっくりです！
ノート３冊をセロテープで束ねてまで…ｗｗｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
