「ものづくり筆耕ブログ」カテゴリーアーカイブ

ものづくりに関する想い

日本の伝統美2019

日本の伝統美を巡る

帝国ホテルバイキングと東京湾クルーズ(はとバス定期観光)

日本には多くの外国人が訪れるようになりました。以前に巡った大阪城は韓国、中国の旅行者が多かったと記憶していますが、東京の観光地は母国を特定することが難しいほど多くの国からの旅行者であふれていました。

今回、初めて訪問したところが多く、近くにいて日本の良さを放置していたのが恥ずかしいです。

デジカメを初めて持った時はめっぽう写真に収めましたが今では必要なぶんだけ撮ります。

自撮り棒で名所と一緒に自分を写した写真を撮る外国人がいましたが、今回はそれほど見かけませんでした。

写真をスライドショーに加工してYoutubeに投稿しました。厳選した16景です。久々にYoutubeを利用しアップロードの仕方を忘れるほどでした。ご覧ください。

 

HTML実行環境の情報取得

動作環境を知るには

HTMLでブログ等を記述しているとき、JavaScriptのコードを入れて動的な表現をして魅力的な表現を試みます。そのとき、公開サーバーに上げる前にローカル環境で動作を確認するのが一般的です。

その場合、両者間で動作が異なることがあります。残念ながらこれは発展途上の分野では避けられないことです。がんじがらめに標準化、統一を目指すのはかえって進歩を阻害します。

そのとき、実行環境がどこにあるか知りたいことがあります。今回、location.hrefを用いた例を紹介します。

location.hrefについて

location.hrefとは、location.href=”URL”;のように設定して、指定したURLへジャンプするときに用いますが、console.log(location.href);のように参照すれば動作しているURLを取得することができます。

ローカル環境の場合は参照したHTMLの格納先、サーバー環境ではURLアドレスが得られるので、単にローカル/サーバーの違いを見分けるには以下のような簡便コードで実現できます。

動作環境を見分ける簡便法

以下にRunStantでHTML実行環境を構築して変数wに最適な値を設定する例を示します。

HTMLコードを入力し右上のPlayボタンをクリックすると左下にコンソール結果が表示されます。

左下部分を拡大します。「http://lite.runstant.com/?v=0.0.3」が表示されています。一方、ローカル環境で動作すると「file:///C:/xxx/yyy/examples/Info.html」のように表示されます。先頭の8文字を解析して動作環境がローカルかそれ以外かを判別しています。

このページの実行結果

開始

サンプルコード

<!DOCTYPE html>
<html>
<div>
<a href="javascript:void(0)" onclick="starting()"><span style="font-size:48px; color:orange;">開始</span></a>
<script type="text/javascript" charset="utf-8">
function starting(){
  document.write(location.href+"<BR>");           // file:///C:/xxx/yyy/examples/Info.html
  var x = location.href.substr(0, 8);             // http://lite.runstant.com/?v=0.0.3
  var w = 780;                                    // server
  if(x=="file:///")   w=440;                      // local
  document.write("X="+x+" W="+w);
}
</script>
</html>

 

サバイバル生活になじむ

自然に根付いた生活

台風15号による千葉県の災害復旧が思うように進んでいないと報道されています。最近、温暖化の影響か台風でなくともちょっとした暴風雨で大きな災害が起きます。

現代住民は文化的な生活に慣れ過ぎて普段と異なる生活には耐えがたくなっています。

電気、水道、ガスなどのインフラが一つでも欠落すると生きていけないと嘆きます。衣食住が自給自足で回っているわけではないので致し方ありません。

サバイバルの知識が備わっていないのです。トイレが水洗になり清潔になって蚊やハエなどが発生しなくなり伝染病が蔓延することもなくなりましたが、急激な文化的生活の定着は脆さを内包しています。

2011.3.11の東日本大震災の経験が大して活かされていないようです。電気がなくてもしばらくは生活できるようにとは現実、難しいです。

コンロや七輪の扱い方をできる人は少ないです。キャンプ生活などのリクレーションは遠くなり、カセットガスボンベを使った料理をできる人は多くありません。

国土強靱化担当大臣が存在するのにサバイバル人材が育たないのは残念です。一億総右習えのもと、自給自足を目指す人を変わった人間などと評する風潮では難しいでしょう。

多彩な価値観の尊重を!

「500 Internal Server Error」で悩んだら

・htaccessの編集ミス

久しぶりに「500 Internal Server Error」が発生しました。.htaccessファイルを編集した直後に起きたので編集ミスを疑いました。かつては生命に関わるほどの大事故を起こしたようにアタフタしたことがありました。

以前に復旧を急ぐあまり確信を持てぬままに行動に移して大やけどしたことがありました。ブログの内部を更新する場合、サーバーにログインしなければなりませんが、WEBの通信環境を変更するにあたり、いつもと違うパソコンからログインしようとしたりした時には、ロック状態になることがあります。

これは繰り返しの攻撃から保護するものであり、やむを得ぬ仕儀です。上記の図でCGIに関する記事は、許可を得ずにブログの内部を更新しているという状況です。

落ちついた行動

ブログの内部更新のみならず、ブログの閲覧もできない現象にはびっくりするものですが、今回はレンタルサーバーのFTPにより.htaccsessを確認したところ、ファイルの内容が明らかに異なっていたので正しい形式に直し、ブログが正常に復旧しました。

内部ファイルを更新する場合、元のファイルをバックアップするという基本を端折ったのが躓きの始まりでした。初心忘れるべからずを守るべきでした。反省!

暑かった夏に別れを

夏休みの総括

梅雨さむが続き、待ち焦がれた夏もあっという間に過ぎ去ろうとしています。猛暑もお盆までです。お盆を過ぎると土用波が立ち込めて海水浴は注意するようにとの言い伝えがあります。

長い休みには『ノルマ』が課されます。宿題を急ピッチで消化していることでしょうか。自由研究はまとまったでしょうか。今年は9月1日が日曜日なので2学期の始業式は2日になり一日、長い夏休みになっています。

以前に《電子絵日記》の作り方をブログに載せたことがあります。小学校で宿題として《電子絵日記》を課している学校はどの程度あるでしょうか。作り方の一例を以下に挙げます。

電子絵日記の一例

夏休み2019自由研究 参照音楽=『花火』作詞:井上赳、作曲:下総皖一
夏休み・自由研究
題名《夏祭り》
「ドッカーン!ドッカーン!」
これは、夏祭りの花火の音です。
毎年、祭りの最後に打ち上げ花火があります。
きれいな花火がいくつも上がるので、
わたしは花火が大好きです。

今年の夏祭りは、おじいちゃんと弟と行きました。
出店がたくさんあって、何を買おうか迷いました。
かき氷とたこやきをおじいちゃんが買ってくれました。
たこ焼きは弟といっしょに食べました。
大きなタコが入っていておいしかったです。

金魚すくいを弟がしました。
大きな金魚をすくいたいとねらったけれど、
逃げてしまいました。でも、お店の人が同じ
くらい大きな金魚をくれたのでよかったです。
また来年も夏祭りに行きたいです。

https://manabi-enjoy.com/syogakkouseikatu/archives/2447
絵日記の文は『学びエンジョイ』「小学生の子育てを中心として、
くらしの中で学んだことを伝えていきます!」を引用
絵日記の背景画はそれぞれのフリーサイトを参照
再生ボタンをクリックして開始です。

 ©TacM,2019 Ver0.02

 

 

電子絵日記サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<style type="text/css">
.markey{
  width: 600px;
  height: 450px;
  overflow: hidden;
}
.balloon3-left-btm {
	position: relative;
	display: inline-block;
	margin: 3px 0px 10px 0px;
	padding: 0 5px;
	width: 360px;
	height: 50px;
	line-height: 60px;
	vertical-align: middle;
	text-align: center;
	color: #FFF;
	font-size: 20px;
	font-weight: bold;
	background: orchid;
	border-radius: 15%;
	box-sizing: border-box;
}
.balloon3-left-btm:before{
	content: "";
	position: absolute;
	bottom: -24px;
	left: 20px;
	margin-top: -15px;
	border: 15px solid transparent;
	border-left: 15px solid orchid;
	z-index: 0;
	transform: rotate(90deg);
}
</style>
</head>
<body>
<div style="font-size:24px; font-weight:bold; font-family:'MS 明朝'; margin-left:10px; margin-top:0px;">夏休み2019自由研究<span id='num' style='font-size:14px; color:maroon;'> 参照音楽=『花火』作詞:井上赳、作曲:下総皖一</span></div>
<DIV id="w0" style="width:600px; height:450px; border:0px blue solid; display:block;">
<img id="w1" src="http://aidesign.lolipop.jp/wp-content/uploads/2019/08/Summer-2019A.png" style="width:600px; height:450px; opacity:1.0;">
<Div id="w2" class="markey" data-direction="right" style="clear:both; margin-top:-450px; border:0px green solid; background:seashell; opacity:0">
<div id="w3" class="h2vr_30" style="float:left; font-size:18px; margin-top:10px; line-height:1.8em; width:960px; height:500px; color:navy; border:0px red solid;">
<span style="font-size:48px; color:deeppink;">夏休み・自由研究</span><BR>
題名《夏祭り》<BR>
「ドッカーン!ドッカーン!」<BR>
これは、夏祭りの花火の音です。<BR>
毎年、祭りの最後に打ち上げ花火があります。<BR>
きれいな花火がいくつも上がるので、<BR>
わたしは花火が大好きです。<BR>
<BR>
今年の夏祭りは、おじいちゃんと弟と行きました。<BR>
出店がたくさんあって、何を買おうか迷いました。<BR>
かき氷とたこやきをおじいちゃんが買ってくれました。<BR>
たこ焼きは弟といっしょに食べました。<BR>
大きなタコが入っていておいしかったです。<BR>
<BR>
金魚すくいを弟がしました。<BR>
大きな金魚をすくいたいとねらったけれど、<BR>
逃げてしまいました。でも、お店の人が同じ<BR>
くらい大きな金魚をくれたのでよかったです。<BR>
また来年も夏祭りに行きたいです。<BR>
<span style="font-size:14px; color:brown;"<BR>
<BR>
https://manabi-enjoy.com/syogakkouseikatu/archives/2447<BR>
絵日記の文は『学びエンジョイ』「小学生の子育てを中心として、<BR>
くらしの中で学んだことを伝えていきます!」を引用<BR>
絵日記の背景画はそれぞれのフリーサイトを参照</span>
</div>
</Div>
</DIV>
<Div style="width:600px; height:120px; color:navy; border:0px solid red;">
<div class="balloon3-left-btm">再生ボタンをクリックして開始です。</div><BR>
<div style="float:left; width:300px; height:55px; color:yellow; border:0px solid red;">
<audio id="s35" src="http://aidesign.lolipop.jp/wp-content/uploads/2019/08/hanabi.mp3" controls controlslist="nodownload"></audio>
</div>
<div style='float:left; height:55px; font-size:14px; line-height:1.6em; color:navy; border:0px solid gold'>&nbsp;&copy;TacM,2019 Ver0.02</div>
</Div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://aidesign.lolipop.jp/wp-content/uploads/2016/09/jquery.marquee.min_.js"></script>
<script type="text/javascript" charset="utf-8">
var songNum=0;
var evnt = document.getElementById("s35");					//BGMのイベントオブジェクト
var w1Obj = document.getElementById("w1");					//画像オブジェクト
var w2Obj = document.getElementById("w2");					//holizontal-scroll-windowsオブジェクト
  window.onload = function(){								//読み込み完了のイベント関数//console.log('ページ読み込み完了');
	evnt.addEventListener('play', function(){				//プレイイベント//console.log("PLAY/PAUSE", j);console.log("START");
		song();
		jQuery(function () {								//marquee関数
			console.log("jQuery start");
			jQuery('#w2')
			.bind('finished', function(){					//マーキー完了処理
				jQuery('#w2').marquee('destroy');			//.marquee('toggle');
				w1Obj.src = "http://aidesign.lolipop.jp/wp-content/uploads/2019/08/Summer-2019A.png";
				w1Obj.style.opacity=1;
				w2Obj.style.opacity=0;
				console.log("markey is completed.");
			}).marquee({duration: 37000})					//50000,38000,35000
		});
	}, true);												//trueで本来のイベント処理を続行させる
	evnt.addEventListener('ended', function(){});			//再生完了を知らせる//再利用を可能にする
  };
function song(){  //http://aidesign.lolipop.jp/wp-content/uploads/2019/08/Summer-2019B.png
	w1Obj.src = "http://aidesign.lolipop.jp/wp-content/uploads/2019/08/Summer-2019" + "BCDE".substr(songNum,1) + ".png";
	w1Obj.style.opacity = 0.5;
	w2Obj.style.opacity = 1.0;								//console.log("backGround", songNum, w1Obj.src);
	if(++songNum < 4)	setTimeout("song()", 24000);
	else				songNum=0;							//再開用
}
</script>
</html>

 

 

くじ引きで楽しむ

運試し

ポイントカードで買い物したり、福引きセールでガラガラを回すときはちょっぴり胸がときめきます。市民生活における小さな息抜きは楽しいものです。

ダーツ、吹き矢、射的などで的めがけて矢を射るゲームは古今東西、多く見かけます。

ここでは、HTML、JavaScriptで小さなゲームを作って夏休みの宿題を盛り上げましょう。

▶ボタンを押下して運試しスタートです。ラッキーセブンを引き当てたらファンファーレが鳴り響きます。

7を出すコツの難易度はそこそこです。サンプルコードを末尾に挙げました。参考にしてください。

©2019 TacM,Ver0.01
🎯
🌸

サンプルコード

<!DOCTYPE html>
<html>
<body>
<Div id="top" style="width:600px; height:600px; border:1px solid blue; font-size:64px; color:mediumvioletred; background-color:lightyellow;">
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2019/08/kujibiki2.png" width="285" height="150" style="margin-left:150px;">
<span style="font-size:10px; color:blue;">&copy;2019 TacM,Ver0.01</span>
<img id="disc" src="http://aidesign.lolipop.jp/wp-content/uploads/2017/10/turnTable.png" style="width:360px; height:360px; margin-left:110px; margin-top:15px; transform:rotate(90deg);">
<div style="margin-left:470px; margin-top:-205px; font-size:32px;">&#x1F3AF;</div>						<!-- &#x21e6; -->
<a href="javascript:void(0)" onclick="startStop();return false;" style="text-decoration:none;">
<div id="playstop" style="margin-left:10px; margin-top:130px; font-size:64px;">&#x25b6;</div>
</a>
<div id="luckyNo" style="margin-left:460px; margin-top:-140px; font-size:96px; color:blueviolet;">&#x1F338;</div>
</Div>
<audio id="atari" src="http://aidesign.lolipop.jp/wp-content/uploads/2017/10/1tosho.mp3"></audio>
<script type="text/javascript" charset="utf-8">
var interval=40;														//回転スピード, 74 ~ 10
var clickCount=degree=-1;												//clickCount:開始/停止, degree:回転角
function startStop(){													//開始あるいは停止を制御する関数
	var k = ++clickCount % 2;
	document.getElementById("playstop").innerHTML = "\u23f9\u25b6".substr(k, 1);
	if(k==0){setTimeout('revolution()', interval);document.getElementById("top").style.backgroundColor="lightyellow";}		//停止中から開始
}
function revolution(){													//回転を制御する関数, intervalの間隔で起動
	var d=(++degree)%36*10+90;											//0 5 10 15 20 ~ 355,   90 ~ 440
	var e=Math.floor((d-72)/36) % 10;									//0 ~ 9
	document.getElementById("luckyNo").innerHTML = e;					//console.log("Degree=", degree, d,e);
	document.getElementById("disc").style.transform="rotate("+d+"deg)";	//回転を制御
	if((clickCount % 2)==0)	setTimeout('revolution()', interval);		//引き続き回転を制御する
	else{																//停止指令を受けた
		if(e==7){document.getElementById("atari").play();document.getElementById("top").style.backgroundColor="hotpink";}	//大当たり
	}
}
</script>
</body>
</html>

 

図の回転と停止

もう一つの円形ふちどり

先日、画像を丸く縁どるにおいて、2つの図を重ね合わせることによって丸い画像を描画しましたが、今回はCSSのborder-radiusを使って円形画像を実現しています。cssは別ファイルでなく、HTMLの中にstyle要素を定義しborder-radius属性を設定しています。

回転方法

シーソースイッチ

図を回転するには、transform-rotateを使います。連続して回転するには回転角度を変化させます。そして、一定間隔で等速回転させるには、setTimeout関数を使います。時間にて起動されるイベントにて回転角度を制御します。

回転と停止を制御するには一つのクリックボタンを押下します。このボタンはシーソースイッチと同じ機能を持ち、押すごとに回転と停止が交互に機能します。

スイッチの名称は交互に変化し、メカニックのシーソースイッチの機能ををソフトウェアで実現させています。

図の回転と停止例

rotation©2019 TacM,Ver0.01

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.bordering4 {
	background-image: url("http://aidesign.lolipop.jp/wp-content/uploads/2017/10/turnTable.png");/* 表示する画像 */
	background-size:354px 354px;
	border:6px solid navy;												/* 枠線を付加 */
	background-position:-7px -7px;										/* 横長画像の左上を基準に表示 */
	border-radius:50%;													/* 角丸半径を50%にする(=円形にする) */
	width:340px;	height:340px;										/* 縦横を設定 */
}
</style>
</head>
<body>
<Div style="width:600px; height:600px; position:relative; border:1px solid blue; font-size:64px; color:mediumvioletred;">
<div style="position:absolute; left:120px; top:0px;">rotation<span style="font-size:10px; color:blue;">&copy;2019 TacM,Ver0.01</span></div>
<div id="disc" class="bordering4" style="position:absolute; left:120px; top:130px; transform-origin:177px 177px;"></div>
<a style="position:absolute; left:20px; top:470px; width:120px; height:120px;" href="javascript:void(0)" onclick="startStop();return false;">
<img id="gostop" src="http://aidesign.lolipop.jp/wp-content/uploads/2019/04/startBotton.png" width="120" height="120"></a>
</Div>
<script type="text/javascript" charset="utf-8">
const SPEED=74;															//回転速度, 74 ~ 4, Japanese 30 kei sight-seeing game
var interval=SPEED;														//回転スピード, Japanese ten large tourist spot
var clickCount=degree=-1;												//clickCount:開始/停止, degree:回転角
function startStop(){													//開始あるいは停止を制御する関数
	var k = ++clickCount % 2;
	document.getElementById("gostop").src="http://aidesign.lolipop.jp/wp-content/uploads/2019/04/" + (k?"startBotton.png":"pauseBotton.png");
	//console.log("startStop", clickCount, k, document.getElementById("gostop").src);
	if(k==0){															//停止中から回転開始
	  setTimeout('revolution()', interval);								//回転開始
	}
}
function revolution(){													//回転を制御する関数, intervalの間隔で起動
	var d=(++degree)%72*5;												//0 5 10 15 20 ~ 355
	var e=d-18;															//-18 -13 -8 -3 2 7
	//console.log("Degree=", degree, d);
	document.getElementById("disc").style.transform="rotate("+e+"deg)";	//回転を制御
	if((clickCount % 2)==0){											//回転中ならば継続
		setTimeout('revolution()', interval);							//引き続き回転を制御する
	}
	else{}																//停止指令を受けた状態、revolution()を呼ばなければ自然に停止
}
</script>
</body>
</html>

 

小数派受難時代

寄らば大樹の陰か

生きとし生けるもの、群れを作って生きていくものです。先日、急な冠婚葬祭に出会い、200㎞程の移動をしました。

世の中、市場経済で動いており少数派が生きにくい体験をしました。群れの一員になることを潔しとせず孤高を貫くことはなかなか大変なことです。

そのことで嫌がらせ、村八分、いじめなど顕在化することがあります。それは自分で実行する勇気がなく大勢に流される自分への不満、実行に移したものへの妬み、嫉み、やっかみの現れです。

少数派は面倒

一人の指導者が多人数を指導する場合、標準からはずれた人への対応は並大抵ではありません。そこで少数派は切り捨てられかねません。

その間隙を縫って「権兵衛が種まきゃ我が家も始める」、「五人組制度」、「運命共同体」、「相互監視社会」、「密告制度」、「前例主義」、「コネ、縁故採用」などが台頭してきます。

完璧な対応

世の中、完璧絶対の言葉が躍っていますがなかなか、怪しいものです。自動車免許証の更新で警察や免許センターに行くことがあります。

有効期限が迫っている免許証を差し出すとすぐに穴があけられ、次の手続きに進みます。それから啓発のためのビデオなどを見せられ、1~2時間後に新しい免許証を発行してもらえます。

この講習時間中に大地震などが起きてしまったら、穴のあいた免許証が通用するのでしょうか。新旧免許証の交換は同じタイミングでないとはなはだ危険です。物事を円滑に進めるために時間差は生ずるものですが絶対あり得ないことではありませんという例をあげました。

効率優先で少数ケースを切り捨てる

通常は特急を使っているコースを気まぐれで在来線を使うことにしました。

切符は通常、A-B-C間を特急、C-E間を普通列車で買いますが、先日はA-B-F-Dと普通列車にし、D駅から知人の車でE駅近辺の会場に向かう予定でした。

ところがB-F間のローカル線の運転間隔が90分と長く待ち合わせ時間に間に合いそうもなく、E駅に直行することを連絡しました。

切符は先のD駅まで買ってあり途中下車のつもりで降りようとしたところ、乗り越しの警告で止められました。

駅員はD-E間を乗り越しと判断したため改札のドアが閉まったと説明しましたが、途中下車ではと主張したところ改札を通してくれました。

切符購入でB、Fを経由地と告げてありシステムのどこかに不備があったのでしょう。2系統以上の特定区間では短い方の距離で運賃計算するようですが、今回のように大幅に異なる場合は実際に乗ったコースで運賃を決めるのではないだろうか。

雑感

日本列島は時計の針に例をとれば、12時40分のような形をしています。鉄道や高速道路は国土を縦断することに便利に作られていて、横断するには不便です。

横断するには一度、縦断しそこで乗り換え、更に縦断した方がどれほど時間の短縮になるかを身に知らされました。

少数派はいつの世も切り捨てられる運命にあるのでしょうか。

画像を丸く縁どる

画像にインパクトを付ける

写真や図は縦、横の長さこそ異なるものの長方形で扱われます。時には丸、楕円形、雲形、ハート形で縁どられた写真を見かけることがありますが、通常のものに較べて目を引きます。

今回、重ね合わせの方法によって画像を丸く縁どってみます。

縁取りの仕組み
ameblo.jpより

下図のように、表示したい画像に透明色を持つ縁どった画像を重ね合わせます。手法は実際の写真立ての原理そのものです。

先に本命の画像を表示し、そのあとに縁取り用の画像を重ね合わせます。丸い部分は透明なガラスのような効果を生み下の画像が素通しになりますが、円の外は白色のため何も表示されません。

白色でなく淡いグレーにすれば曇りガラスのようにぼんやりした画像にすることができます。

HTMLによる表示例

<div style="float:left;"><img src="http://aidesign.lolipop.jp/wp-content/uploads/2018/04/P17_Amanohashidate.png" width="300" height="300"></div>
<div style="float:left;"><img src="http://aidesign.lolipop.jp/wp-content/uploads/2018/07/poly-98.png" width="300" height="300"></div>
<!-- ================ 【method】POSITION:ABSOLUTE ================ -->
<Div style="clear:both; position:relative; width:620px; height:660px; border:0px solid orange;">
<div style="position:absolute; top:50; background-image: url('http://aidesign.lolipop.jp/wp-content/uploads/2018/04/P17_Amanohashidate.png'); width:600px; height:600px;"></div>
<img style="position:absolute; top:50; width:600px; height:600px;" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/07/poly-99.png">
</Div>

画像に文字を入れる

夏を楽しむ

画像に文字を入れてみます。画像の説明文を画像の周辺や画像上に添えることがあります。今回は画像上に上書きしています。黒色による夏の風物詩は画像イメージであり、夏を楽しむがテキスト表示です。

画像エディタなどで画像に文字を入れて一体の表示物にする場合と、HTMLのテキスト表示機能によりテキストを入れる場合があります。双方に長所と短所があります。

タグ名は大文字と小文字を区別しません。入れ子になった開始タグと終了タグが明確になるようDivとdivを使い分けています。

夏を楽しむ

HTML表示コード

<Div style="width:640px; height:265px; border:1px solid blue;">
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2016/07/e4e718a86f9ae87f820a7909d0ee171e.png" width="640" height="260">
<div width="640" height="100" style="margin-top:-120px; margin-left:190px; font-size:80px; color:khaki;">夏を楽しむ</div>
</Div>