専門サイト制作日記09

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

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

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

すると、こんな感じになります。
 
蛍光ペン表示

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

蛍光ペン画像

ブログから本が生まれました!


「相続を気軽に学べる解説書を」ということで、八王子の行政書士・社労士の井出さん(至誠法務労務サポート代表)と一緒にコツコツと書き溜めたブログが、1冊の本になりました。
 100の題材を「相続」「遺言」「成年後見」「終活」の4章に分け、各タイトルは五七五の川柳形式にしてあります。口語調の解説文が「わかりやすい!」と評判です。

ABOUTこの記事をかいた人

はちおうじ総務相談所の長岡です。

GONZOを名乗りながらも、当たり障りのない記事を書いています。
中小企業の経営に役立つ情報を発信していきたいと思っているのですが……