縁取り画像に更なる画像

文字だけの記事は読みにくいです。そこに写真やイラストなどが入ると読みやすくなります。くどくど説明する文面より、一枚の写真が大いなる訴えを提起したことは数えきれないでしょう。

ただ、通り一遍の表現に飽き飽きして訴え力が低下することがあります。そこで画像を縁取りにする方法をハート型写真を作るで語りました。今回は、もう少し高度化して縁どる方法を示します。

重ね書き方法

画像や文字との重ね書きは二つのdiv領域をmargin-leftとmargin-topで重ねるやり方と、もう一つはposition:relativeとposition:absoluteによって重ね合わせる方法があります。前者がシンプルですが納得動作にならないことがあり、後者のやり方を採用しています。

縁取り型

縁取り型に文字や画像を入れてアクセントを出した表現をするには、まず鯛焼きを作るときなどに使う型を用意します。その手順を以下に示します。

HTMLコード

<div style="position:relative; width:210px; height:210px; border:0px green solid;">
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2018/03/sumire4.png" style="position:absolute; left:45px; top:45px; width:128px; height:135px; border:0px red solid;" alt="bear">
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2018/03/bearShaped.png" width="210px" height="210px" style="position:absolute; left:0px; top:0px;" alt="shaped">
</div>

動作例

JavaScriptによる高級化

今回の例題は、4行からなるHTMLコードで成り立っています。ここで月始めに季節ごとの花を描画するためには、JavaScriptコードを追加します。

JavaScriptには日付を取得する関数があり、日付に同期した12種の画像を呼び出すようにプログラミングします。

象（かたど）り画像がひとつでは見栄えがしなければ、曜日ごとに変化させることが可能です。

近くの気象台から天気データを取り込んで、天候に応じた描画に改変することもできます。HTMLとJavaScriptによる機能を組み合わせて魅力的なブログ、ホームページを構築しましょう。天気情報を取得する関数も参考にしてください。

さいごに

画像、写真、イラストの扱い方をマスターして記事を装飾することにより魅力あるブログに変身します。

寒さから解放されたのを機に新しい分野に挑戦され、大いなる飛躍を期待します。

平準化政策

我が国の製品は品質が高止まりに安定傾向にあると言われています。あるとき、100円均一ショップでサインペンを買ったところ、新品なのに、さんざん書き古したごとく書けないことがありました。made in CXXの輸入品でした。店員はよくあるのか、丁重にお詫びの後、他のものと交換してくれました。

日本では、人件費が高いせいか大量生産品が出回っています。半完成品やキット商品はほとんどありません。貧しかったころから国のリーダーが長年、人並みの生活を目指し国民を鼓舞してきた政策の表れとも言えるでしょう。

手編みのセーター

文化が爛熟期に近くなるほど、ありふれた大量品に飽き飽きするのが普通のように感じますが、我が国ではなかなか、そのような兆しがありません。

それでもクリスマスのプレゼントに手編みのセーターを贈る乙女がいると信じたいです。それと同じ趣旨で、世界に二つとない多目的時計を作って、憧れのマドンナにプレゼントしませんか。そのサンプルを示します。

笑福ちゃん時計の概要

この時計は日頃、思い切ったメッセージを伝えられずにいる人への記念日のプレゼントを想定して作ったものです。例えば、誕生日とか入試合格祝いに贈るものです。市販品は恐らく出回ってなく、正当な見積もりにより算定すると数十万円にもなろうというレアものと言えます。

誕生日や合格祝いの期日が近づくとイベントを盛り上げるために、カウントダウンが始まります。そして定刻になったら、ショパン作曲の「小犬のワルツ」が流れるなか、思いっきりメッセージを伝えます。

その後、3種の記念写真がフェードインしながら描画されます。サプライズの儀式が終わって、この後、一時間ごとに世界遺産や名所旧跡の写真が表示され、デジタル・アナログのハイブリッド多目的時計に戻ります。

左上の円がcoral（サンゴ）色からcornsilk（トウモロコシ）色に変わっていれば、時計中央の背景画像を変更することができます。クリックするたびに更新され、12回で一巡します。

手作りの薦め

文化は模倣から始まり、進化・発展しながらオリジナルなものに進むと言われています。

ビトンやグッチの高級カバンに執着して身に着ける人も多いですが、ハリウッドスターは日本のカバン職人に数百万円もの大枚を用意して、特注品を注文するという話を聞きました。

多目的時計をプレゼントしてもどの程度、評価されるかは保証の限りではありません。その責任は一切、負えません。見向きもされなかったら、生まれてくるのが早かったとか民度が思ったほど高くないからなどと嘆いて自負心を満足させましょう。

再読み込みボタンをクリックし、先頭から再実行してください。ブラウザGoogle ChromeとOperaで動作します。3分間、閲覧し続ければ、必ずサプライズが起きます。

動作例

縦書きに横スクロール

電子媒体で文章を表示するには、横書きで縦スクロール方式がほとんどです。詩、俳句、短歌などは横書きで表現したいものです。これからの表現方式には、HTMLがもっともっと使われることでしょう。

紙による表現を凌駕し、音や色が加わってより豊かな表現になることでしょう。今回、h2vRを使った縦書きとMarquee with CSS プラグインを利用した横スクロールを共演して、それなりに見栄えを整えた文章を表現してみました。

縦書きの横スクロール仕組み

縦書きはDIV要素にh2vr_XXのクラス名、横スクロールはmarqueeのクラス名を定義します。今回は、marqueeのDIV領域の入れ子として、h2vr_XXのDIV要素を宣言しています。それぞれ個別に利用する方法については、すでに当ブログで述べており、遡って紐解いていただくとありがたいです。

縦書きにした文章や画像が、いとも簡単にスクロールしたことには、たいへん驚きました。苦労したことは以前に解決済みと思われたmarqueeのイベント関数で文法エラーが発生して、まだ未解決です。

朗読との同期は、setTimeout関数にて切り抜けています。あか抜けたプログラミングは課題として残しています。

サンプル動作例

例により、松尾芭蕉、奥の細道「序文」を弟子の曽良を伴って出かけた旅姿、現代語訳とともに以下に表示します。再実行はブラウザのボタンをクリックします。

月つき日ひは百代はくたいの過客かかくにして、行ゆきかふ年としも又旅人也またたびびとなり。舟ふねの上うえに生涯しょうがいをうかべ、馬うまの口くちとらえて老おいをむかふる物ものは、日ひび旅たびにして旅たびを栖すみかとす。古人こじんも多おおく旅たびに死しせるあり。
予よもいづれの年としよりか、片雲へんうんの風かぜにさそはれて、漂泊ひょうはくの思おもひやまず、海浜かいひんにさすらへ、去年こぞの秋あき江上こうしょうの破屋はおくに蜘くもの古巣ふるすをはらひて、
やや年としも暮くれ、春立はるたてる霞かすみの空そらに白河しらかわの関せきこえんと、そぞろ神がみの物ものにつきて心こころをくるはせ、道祖神どうそじんの招まねきにあひて、取とるもの手てにつかず。
もも引ひきの破やぶれをつづり、笠かさの緒お付つけかえて、三里さんりに灸きゅうすゆるより、松島まつしまの月先心つきまずこころにかかりて、住すめる方かたは人ひとに譲ゆずり、杉風さんぷうが別墅べっしょに移うつるに、
　草くさの戸とも住替すみかわる代よぞひなの家いえ
面八句おもてはちくを庵いおりの柱はしらにかけ置おく。

芭蕉　　　　曽良
©TacM,2017 Ver0.03

　『奥の細道序文』　松尾芭蕉
月日は永遠に旅を続ける旅人であり、来ては去り、去っては来る年もまた同じように旅人である。船頭として船の上に生涯を浮かべ、馬子として馬のくつわを引いて老いを迎える者は、毎日旅をして旅をすみかとしている。古人の中には旅の途中で命を無くした風流人が多くいる。私もいつの年からか、ちぎれ雲が風に吹かれて漂うように誘惑されて、旅に出て歩きたい気持ちが我慢できず、海や浜辺をさすらい、去年の秋、隅田川の畔を破れ小屋において蜘蛛の巣を取り払って暮らしているうちに、次第にその年も暮れ、春になり霞(かすみ)が立ち込める空を見るにつけても、あの名高い白河の関を越えようと、人の心をそわそわさせる神が取り付いて私の心を狂わせ、道祖神が招くような気がして取るものも手につかない。旅行着の破れ目を直し、笠の紐（ひも）を付け替えて、足に灸をすえると、あの有名な松島の月の美しさが真っ先に気にかかって、住んでいる家は他人に売り、杉風の別宅に引越しする時に、句を詠んだ。「草の戸も」の句を発句とする連句の初めの８句を草庵の柱に掛けておく。

※※※※

懐かしく思う

前回、春の七種（はるのななくさ）を取り上げました。7つながりで今回は七変化について触れてみます。

テレビの黎明期に大塚ボンカレーでおなじみの琴姫七変化（ことひめしちへんげ）という白黒の番組がありました。

あらすじは、やんごとなき家柄のお姫様に生まれながらも古いしきたりに縛られることから離れ、芸者や若衆姿に、まさに七種の変身を続けながら諸国を旅して小悪・大悪を懲らしめるというもののように記憶しています。

当時は、白黒テレビで電源を入れてもすぐには画像が出るわけではなく、真空管やブラウン管が暖まる時間の30～40秒後に映像が現れました。

お気に入りの番組には１～２分前にテレビの前に大勢が並び、早めにスイッチを入れたものでした。

テレビの七変化を模してHTMLとJavaScriptの短いコードで、1つの画像に7種の変化を付けていきます。

七変化の原理

画面上に画像と文字を混在させるとき、Canvas要素を使ってfillText、strokeTextを使いますが、innerHTMLを用いて表示や描画を動的に表現できます。

ドラマにおける七変化は扮装によって変身していましたが、ここでは多彩な縁取りにて効果を出しています。

サンプルコード

      
<html>
<body onload="setTimeout('change7()', 3000);">
<div style="position: relative; width:400; height:300;">
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2017/01/hime0.png" style="position:absolute; top:0px" alt="h2">
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2017/01/Ajisai.png" style="position:absolute; top:0px" id="f2">
<span id="t2" style="font-size:24px; color:indigo; position:absolute; top:0px; left:4px;">　</span>
</div>
</body>
<script type="text/javascript" charset="Shift_JIS">
//            0       1       2       3       4              5         6       ７
const msg = ["婉然", "可憐", "優雅", "美麗", "カサブランカ", "艶やか", "清楚", "魅惑",
             "妖艶", "無邪気", "麗しげ", "端麗 ", "ノーブル", "高貴", "絢爛", "流麗"];
var counter = 0;
function change7(){
	var k = counter % 16;
	var sub = "0123456789ABCDEF".slice(k, k+1);							// 0～9ABCDEFを表示
	var src7 = "https://aidesign.lolipop.jp/wp-content/uploads/2017/04/beta-" + sub + ".png";
	console.log("CNT="+k+" : "+src7);
    document.getElementById("f2").src = src7;							//フィルター画像
    document.getElementById("t2").innerHTML = msg[k];					//一口評論
    if(++counter < 21)   setTimeout("change7()", 1500);					//3回りで終了
}
</script>
</html>

おわりに

すっかり、懐古趣味に浸りました。新しいニュースでは、稀勢の里が初優勝しました。「さんざん、期待させてガッカリさせる」ことが終わったように感じられます。

実行例

七変化の再実行は、読み込みボタンをクリックします。

　

久々のスライドショー

久方ぶりに、縦書きでスライドショーを作ってみました。Meta Sliderをプラグインしています。

最後にmarqueeで右水平スクロールを追加しました。

演目

①人国山（ひとくにやま）に住む佳人をほのかに想う,万葉集第7巻1305,柿本人麻呂
②読んで味わう徒然草（つれづれぐさ）,徒然草117段,吉田兼好
③あこがれの君、「葉津」,三月の鮠,藤沢周平

[metaslider id=16322]

付録

Svgとmarker要素

SvgはHTML5で導入された図形を描くときに適した機能です。当ブログでも急ピッチで取り上げつつあります。その中に矢印を描くmarker要素があります。

線の先端に矢印を付けたいときに使います。時々刻々変化する円弧の先端に矢印を自動的に付加する機能について語ります。

このたび、極座標の回転角をmarker要素にて円弧として描きました。矢印が期待した向きにならず、その制御に手間取ったので、次の機会に困らないように記録に残します。末尾にソースコードを追加しました。

誤動作の一例

線の先端に矢印を付ける場合、始点と終点が変化したときは矢印の向きが自動的に追従してもらいたいものです。例えば、0度から360度まで変化する図形を描くとき、最初と最後で期待した動作にならないことがしばしばです。

始値を-0.005に、終値を360.005のようにすれば思い通りの矢印が描けることが多いです。ただし、その媒介変数を他のところで参照することがあり、小さめ、大きめの始値と終値では問題が起きることがあります。

矢印の向きの実用的な設定法

始値と終値を額面通りに設定し、上図の②と⑤のように表示された場合、矢印描画に使う値だけを設定しなおすことが実用的な解決策と判断しました。末尾に示した23行、24行のコードです。

以下に動作例とソースコードを示します。ここまで到達するにかなりの時間を要しました。参考になればありがたいことです。

動作例

ソースコード

<html>
<head>
<script type="text/javascript" charset="Shift_JIS">
const ZX=254;				//中心点x
const ZY=254;				//中心点y
const SIZ0=26;				//半径
const COMT="M 280 254 A 26 26 0 ";
var th=0.0;
var vx=vy=0;
function start(){
	setTimeout('rose1()', 1);
}
function rose1(){
	calculate();
	th += 0.01;
	if(th <= 2.0000000000000013)	setTimeout('rose1()', 10);
}
function calculate(){
	var f1 = (th < 1.0) ? 0 : 1;
	var t = th * Math.PI;									//theta
	var vx = ZX + Math.cos(t) * SIZ0;
	var vy = ZY - Math.sin(t) * SIZ0;
	if(th==0) vy = 253.98;									//矢印の向きを修正
	if(th>=2.00) vy = 254.01;							    //矢印の向きを修正
	//alert("P0");											//初期状態を見るために停止
	var cmd=COMT + f1 + " 0 " + vx + " " + vy;				//COMT="M 286 254 A 32 32 0 "
	cm1.setAttribute("d", cmd);								//曲線
	console.log("TH="+th+" CMD="+cmd);
	//alert("P1");											//1回ごとの描画を確認に停止
}
</script>
<svg width="500px" height="500px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<marker id="mk1" viewBox="0 -5 10 10" refX="5" refY="0" orient="auto" markerWidth="10" markerHeight="10">
  <polygon points="10,0 0,5 0,-5"/>
</marker>
<path id="cm1" d="M 280 253.99 A 26 26 0 1 0 280 254" fill="none" stroke="chocolate" marker-end="url(#mk1)"/>
<path id="xaxis" d="M 210 254 L 298 254" stroke="blue" fill="none" stroke-width="1"/>
<path id="yaxis" d="M 254 210 L 254 298" stroke="blue" fill="none" stroke-width="1"/>
</svg>
</head>
<body onLoad="start()"></body>
</html>

動画キャプチャー

以前、動画と音声をローカルディスクに保存するにあたり、以下のツールを使いコメントを載せました。
①Bandicamを使う方法「様々な動的コンテンツ」
➁Whammyを使う方法「Canvasに描画した動画をWebM動画に保存」
③ScreenCastifyを使う方法 「比叡山延暦寺までご案内」
で述べました。

有料版もありますが、それぞれフリーソフトが用意されています。多くを望むことは贅沢と言いつつもないものねだりになってしまいます。

商用マークが冒頭に表示されたり、音声を付けるのに別手段を必要としたり、Chromeからの起動が条件で、録画時間10分に抑えられたりと制限付きです。

今回取り上げる「動画キャプチャー Game DVR」は、Windows10に当初から組み込まれているソフトであり、動画と音声が同時に記録・保存することが可能で、録画時間の制限も2時間と緩やかです。

このたび、これを用いて音声付きCANVAS動画をローカルディスクに保存し、動画として描画しました。

ハイポサイクロイド曲線をSvg要素で描画する

Svg要素では図形や画像を表示しますが、テキストを用いて表示する仕様であり、画像を拡大しても画質が落ちることはありません。Svgによる描画例を魅惑的な曲線美で取り上げました。

今回の例では「動画キャプチャー Game DVR」と連動するために記事の起動から少し遅れて、三葉曲線と五葉曲線が描画されます。

「動画キャプチャー」はもともとXbox用のアプリの機能を使っていて、ハイスペックな環境が必要でWin＋Gキーにより起動されます。使い方は、Windows10のデスクトップキャプチャ機能「Game DVR」の使い方と設定方法などを参照するとよいでしょう。

また、【新機能】Windows10のゲームバーでPC画面を動画で記録する方法にてdekiru.netさんが詳しい解説を公開しています。

動作例

以下に動作例を掲げます。全画面（フルスクリーン）にして▶をクリックし開始します。

さいごに

いろいろなスクリーンキャプチャーに接しましたが、フリー版では今回のツールがもっとも気に入っています。ソフトのインストール方法を初心者に説明する取説の補助資料として利用することができる優れものの一つ、『モニタ画面に表示される画像と音声をそのまま、保存するツール』を紹介しました。

SEOに有利か

サイトを運営していると、訪問者数はまったく気にならないということは、恐らく皆無でしょう。ただ、「一喜一憂しない」、「本質を見失わない」という方針を貫いている運営者が多いと思われます。

文字や数字ならば画像よりはテキストにした方がより検索に拾ってもらえるということが定説のようです。また、どちらでも表現可能ならば、テキストにした方が保守上も有利であることは明白です。

文字の画像を減らす方法を実践してみましたのでメモとして記録します。

SEO対策のひとつ

SEO対策としての実例を示します。以前、和歌や小説の読後感などを図と一緒に画像にして発表しました。和歌にはルビを振ることが多く、縦書きでは見やすく使いやすいルビのサポートソフトは多くありません。勢い、画像による表現になります。

以下に画像による文字の表現例とテキストのままの表現例を挙げます。

html/JavaScriptコード

<div style="position: relative;">
<span style="font-size:20px; color:violet;">文字は画像で表示　</span>
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2016/08/0806.png" width="600" height="400" alt="miko"/>
</div><BR>
<span style="font-size:20px; color:violet;">文字をテキストで表示　</span>

<div style="float:left; width:510px; height:550px; border:blue solid 0px;">
<img style="top:2px; left:2px; opacity:1.0;" src="https://aidesign.lolipop.jp/wp-content/uploads/2016/10/pretty-medium.jpg" width="284" height="549">

<div class="h2vr_0 t2" style="float:right; top:0px; left:0px; width:220px; height:549px; border:red solid 0px; font-weight:bold; font-size:10pt; color:darkgreen;font-family:HG教科書体">

<span style="font-size:32px; font-family:serif; color:blue;">
鮠は渓流に棲むコイ科の淡水魚</span><span style="font-size:16px">です。<BR></span>
<span style="font-size:22px; font-family:serif; font-weight: bold;"><BR>
藤沢周平の短編小説<span style="color:magenta;">三月の鮠</span>のヒロイン葉津は早春<BR>の<span style="color:salmon;">雪解け水に飛び跳ねる鮠のような乙女</span>です。海坂<BR>
藩の抗争に巻き込まれながらも、凛と生きています。<BR>
<BR>
左のような可憐で麗しい巫女です。
</div>
</div>

動作例

文字は画像で表示　

鮠は渓流に棲むコイ科の淡水魚です。

藤沢周平の短編小説三月の鮠のヒロイン葉津は早春
の雪解け水に飛び跳ねる鮠のような乙女です。海坂
藩の抗争に巻き込まれながらも、凛と生きています。

左のような可憐で麗しい巫女です。

おまけ

『三月の鮠』を映像の世界で楽しみたいとの想いで三月の鮠（ハヤ）に取り上げました。残念ながら映画化はまだのようです。

短編であり単独の映画化は無理としても、他の映画作品のように複数の短中編小説を織り交ぜての映画化を願っています。

苦悩を胸に秘めて、楚々と生きる葉津と剣の達人ながら精神的な弱さから立ち直っていく窪井信次郎の行く末を藤沢周平ファンの一人として映像で堪能したいものです。

さいごに

自在な形に縁どる

ビスケットなど丸や星の形に縁どった菓子がありますが、ハート型に象った写真を飾りたいと思うときがあります。

いくつものフィルターが用意されたアプリケーションが公開されていますが、自在な形に縁どる写真を、手作りにて3行のhtmlコードで実現しています。

写真とフィルターを用意する

今回はハート型に切り取る方法ですが、切り取る型をここではフィルターと呼びますが、この閉じられた図形を変更すれば、もっと複雑な形にも応用可能です。

用意する材料は、かたどる写真と型（フィルター）です。その他に、ちょっとしたHTMLの初歩的な知識が必要です。

①原写真、キュートな女性の写真をお借りしました。フィルター内にチャームポイントが収まるような絵柄が良いでしょう。

②フィルターとなる型の画像を作ります。閉じた図形（今回はハート型）を含む画像を作るため、paint.netなどの画像作成アプリを用意します。写真に切り抜く部分を透明色に、背景色を白に指定します。

透明色にするには、paint.netを起動し、「魔法の杖」で透明にしたい部分をクリックして、［編集→切り取り］と選択します。

切り取りは「閉じられた形」でないとうまくいきません。8のような形ならば、上下にわたり2回操作します。

背景色は一般には白になっています。白でない場合は、[選択範囲の塗りつぶし]で変更します。

htmlで重ね書きする

原写真を先に表示し、2枚目のフィルター画像を重ね書きします。フィルター効果により透明色部分のみ浮彫になります。img要素のopacity属性により、透明度を設定し、背景をうっすら表示する表現も可能です。

おまけとして、キャプションを付けてみました。重ね書きにはposition: relativeとposition: absoluteを使っています。

<p><span style="font-size: 18pt;">表示例</span></p>
<span style="font-size: 20px; color: violet;">ハート型写真</span>
<div style="position: relative; width: 638; height: 520;"><img src="https://aidesign.lolipop.jp/wp-content/uploads/2016/10/girl.png" alt="lady" width="638" height="520" /><br />
<img style="position: absolute; top: 0px; left: 0px;" src="https://aidesign.lolipop.jp/wp-content/uploads/2016/10/alpha.png" alt="alpha" width="638" height="520" /> <span style="font-size: 24px; color: lightblue; position: absolute; top: 40px; left: 45px; width: 150px;">婉然、麗しい</span> <span style="font-size: 24px; color: pink; position: absolute; top: 40px; left: 400px; width: 150px;">可憐、雅びな</span></div>

表示例

婉然、麗しい 可憐、雅びな

画像よりテキストの優位

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

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

文字の中に透かし画像を重ねて扱うことができれば、情報量の節約になります。透かし画像について、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>

実行例