専門サイト制作日記09

不人気にも関わらず連載再開です。今回はCSSを利用して蛍光ペンを引いているかのように見せかける方法について。
 
金曜日に「許認可」の1ページ目を作ってみました。ブログにはそのとき思いついたことを書いていますが、固定ページの場合はほかのページとのバランスなどにも気をつかわなければなりません。そのため、なかなか筆が進まず、1ページ作るだけで半日を費やしてしまいました。途中で頭が働かなくなってしまい、気分転換のため片倉城趾公園まで桜を見に行かなければならないほどでした。1ページ目からこれでは、先が思いやられます。
 
どうにかこうにか形にはなったものの、文字だけしかないとやはり寂しいものがあります。これでは読んでもらえる気がしません。
 


解説の画像を入れることも考えました。しかし、そこまで手間をかけていたら何年かかるかわかりません。そもそも、絵を描くのは苦手ですし。
 
そこで、CSSを利用して強調部分に蛍光ペンを引いてみることにしました。
 
まずは画像を用意します。とりあえず3色用意してみました。
 


フィルタをかけているため、画像自体は外枠の部分までつながっています。このままファイルにすると余白ができてしまうので、内側に見えない四角を描いてその部分だけ抜き出します。
 
それを背景画像にして、位置は下揃えに、そして、横方向にくり返します。
 


すると、こんな感じになります。
 


ややうるさい気もしますが、読みやすくなったと信じたいところです。
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です