透かし画像とテキストの共存

画像よりテキストの優位

ウェブサイトには文字としてのテキストの他、画像データが検索対象になります。その他、音声や動画データなどがありますが、テキストが優先されて検索されると思われます。

アナログ的なイメージはともかく、文字ならば画像データではなく情報量の小さいテキストとして表現した方が得策です。

文字の中に透かし画像を重ねて扱うことができれば、情報量の節約になります。透かし画像について、Microsoft Wordがサポートしていて、極秘資料の表紙に、社外秘と判を押すような利用方法が一般化しています。

書類作成ツールは次の図のように表紙や目次に赤色で、関係者のみ回覧、複写禁止、極秘、confidential、secretなどと注意を喚起するような表現をサポートしています。

透かし文字を取り扱う

当ブログでも、透かし画像の使い方で取り上げました。

透かし文字を取り扱うには、MicrosoftのWORDが最低限、必要ではと案じていたところ、AllAboutデジタルさんが《画像上の自由な位置に文字を重ねる方法》にて、文字と画像を重ねて表現する方法を解説されていました。

画像の中にテキストが共存して見事に生かされています。そのテクニックを発展させて、この記事がまとめられています。

長い文章では、段落をまとめてタイトルにします。読む側はそのタイトルを意識して次の段落に進みます。この場合、必ずしもタイトルにしないで、説明内容を示したいことがあります。そのような場合に、透かし文字を使うことができます。

文字と画像を重ねて表現する例

透かし文字にするには、透かし文字をサポートするWORDなどのツールを用意して、最終的には画像データに変換することが必要です。

専門ツールを準備してその都度、変換することは、編集や更新には不利です。

そこで、画像に重ねてテキストのまま、表現する方法を探していたところ、先の記事を発見しました。

その記事の肝は以下のようです。

<p style="position: relative;">
   <img src="dog.jpg" width="320" height="140" alt="犬看板" /><br />
   <span style="position: absolute; top: 15px; left: 150px; width: 150px;">
      看板の内側に表示する文章です。
   </span>
</p>

今回の方法

今回は、画像の空白部分だけでなく、画像イメージと文字を共存させるために、画像の透過率を1.0よりも小さな値を採用しています。透過率の適切な値は、画像とテキストの濃淡やどちらを引き立たせるかによって決まります。

発展性

この記事では、テキストを動的に変更する部分は割愛されていますが、＜div＞や＜span＞タグにid属性を定義し、document.getElementById(“hoge”).innerHTMLにより、メッセージを更新してダイナミックな記事にすることができます。

サンプルソースコード

<html>
<p>
<div id="hd1" style="width:440px;height:300px;background:'lemonchiffon';border:blue solid 1px;">
<span style="font-size:24px; color:lime;">洛北の魅力</span></p>
<p>
<span style="font-size:16px; color:black; font-family:serif;">
京都駅から北側に位置している洛北エリアには、地下鉄烏丸線と叡山電車が走っていて、比叡山延暦寺、上賀茂神社は世界遺産に登録されています。<BR><BR>
洛北は京都駅から少し離れていることもあり、修学旅行コースとしての利用は少なく歴史好き、文学好きのマニア向けのエリアと言えましょう。<BR><BR>
日本の原風景がいたるところに残っています。京都の奥座敷、大人の隠れ里として魅力いっぱいの景勝地です。</span>
</div>
</p>

<div id="hd2" style="width:440px;height:260px;background:'lemonchiffon';border:blue solid 1px;">
<p style="position: relative;">
  <span style="font-size:16px; position:absolute; top:0px; left:0px; width:440px; font-family:serif;">
京都駅から北側に位置している洛北エリアには、地下鉄烏丸線と叡山電車が走っていて、比叡山延暦寺、上賀茂神社は世界遺産に登録されています。<BR><BR>
洛北は京都駅から少し離れていることもあり、修学旅行コースとしての利用は少なく歴史好き、文学好きのマニア向けのエリアと言えましょう。<BR><BR>
日本の原風景がいたるところに残っています。京都の奥座敷、大人の隠れ里として魅力いっぱいの景勝地です。<BR>
　　　　　　　　　　　　　　　　　　　　　Medium-C.html</span>
  </span>
  <img src="https://aidesign.lolipop.jp/wp-content/uploads/2016/08/sakura1.png" width="102" height="60" style="opacity: 0.5;" alt="sakura" align="right"/>
  <img src="https://aidesign.lolipop.jp/wp-content/uploads/2016/08/rakuhoku-3.png" width="440" height="99" style="opacity: 0.3;" alt="rakuhokunomiryoku"/>
  <img src="https://aidesign.lolipop.jp/wp-content/uploads/2016/08/momiji2.png" width="102" height="60" style="opacity: 0.5;" alt="momiji"/>
</p>
</div>
<script type="text/javascript" charset="Shift_JIS">
</script>
</html>

実行例

洛北の魅力

京都駅から北側に位置している洛北エリアには、地下鉄烏丸線と叡山電車が走っていて、比叡山延暦寺、上賀茂神社は世界遺産に登録されています。

洛北は京都駅から少し離れていることもあり、修学旅行コースとしての利用は少なく歴史好き、文学好きのマニア向けのエリアと言えましょう。

日本の原風景がいたるところに残っています。京都の奥座敷、大人の隠れ里として魅力いっぱいの景勝地です。