旅行の出来事：So-netブログ

	ブログをはじめるログイン

- ｜ 2017年08月｜2017年09月ブログトップ
前の10件 | -

ＣＳＳ：連続写真を重ねてX'masイルミネーションやスライドショーをブログで表示したい。②　[パソコン]

htmlとcssファイルはU-page+、画像はブログにＵＰした画像でスライドショー表示しました。

htmlファイルの例
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ＣＳＳでイルミネーション・html画像指定</title>
    <link rel="stylesheet" href="irumi5.css" type="text/css">
</head>
<body>
<br> <br> ＣＳＳ　スライドショーのテスト<br> <br>
⑤イルミネーション・html画像指定
<DIV class="photo-illumination5">
<IMG src="http://suikasuship.blog.so-net.ne.jp/_images/blog/_82a/suikasuship/m_IMG_8335.JPG">
<IMG src="http://suikasuship.blog.so-net.ne.jp/_images/blog/_82a/suikasuship/m_IMG_8390-e8fc7.JPG">
<IMG src="http://suikasuship.blog.so-net.ne.jp/_images/blog/_82a/suikasuship/m_IMG_8260-752ae.JPG">
<IMG src="http://suikasuship.blog.so-net.ne.jp/_images/blog/_82a/suikasuship/m_IMG_1075-7ff11.JPG">
<IMG src="http://suikasuship.blog.so-net.ne.jp/_images/blog/_82a/suikasuship/m_IMG_8390-e8fc7.JPG">
</DIV>
</body>

ブログ画像ファイルのＵＲＬ調査方法

①画像をブログに登録する。（下書き保存）

②公開してるページから画像を開きサムネイルを表示させる。

③サムネイルを右クリックでプロパティを表示させる。

④ＵＲＬをコピーしてU-page+のhtmlに設定する。

ＣＳＳファイルの内容（irumi5.css）

.photo-illumination5 { /* CSS クラス名 photo-illumination5                */
    height: 800px;          /* 表示したい大きさ                                      */
    margin: 0 0 -120 0; /* 上右下左のマージンをまとめて指定する         */
    max-width: 100%;   /* 領域の幅の最大値                                         */
    position: relative;     /* ボックスの配置方法 relative=相対位置への配置 */
    width: 800px;          /* 表示したい大きさ、height と合わせる              */
}

.photo-illumination5 img {     /* CSS クラス名 photo-illumination5 の子孫セレクタ = img */
    animation: illum5show 10s infinite; /* アニメーションプロパティ一括指定空白で区切る   */
        /* animation-name、 animation-duration、 animation-timing-function、*/
        /* animation-delay、animation-iteration-count、 animation-direction    */
        /* animation-name アニメーション名 = illum5show                               */
        /* animation-duratio アニメーション一回分の時間の長さを指定秒             */
        /* animation-iteration-count 繰り返し回数を指定 infinite=無限                */
    -webkit-animation: illum5show 10s infinite; /* -webkit- ベンダープレフィックス Chrome、Safari指令 */
    height: auto;           /* 領域の高さを指定自動設定                               */
    max-width: 100%;    /* 領域の幅の最大値                                            */
    opacity: 0;               /* 要素の透明度を指定 0.0（完全に透明）               */
    position: absolute;    /* ボックスの配置方法絶対位置=画像を全て重ねる */
}

/* @keyframes = アニメーションのキーフレーム (通過点)で制御する */
@keyframes illum5show {      /* animation-name illum5show のキーフレームを指定            */
    0% {opacity:0}         /* opacity(要素透明度指定) 0.0（完全に透明）～1.0（完全に不透明） */
    0.2% {opacity:1}      /* ５個の画像なので１つ20%で不透明にする                                   */
    20% {opacity:1}      /* */
    20.2% {opacity:0}
}
/* -webkit- = ベンダープレフィックス Chrome、Safari指令 */
@-webkit-keyframes illum5show {
    0% {opacity:0}      /* opacity(要素透明度指定) 0.0（完全に透明）～1.0（完全に不透明）*/
    0.2% {opacity:1}    /* ５個の画像なので１つ20%で不透明にする                                  */
    20% {opacity:1}
    20.2% {opacity:0}
}

/* 各画像のアニメーションの開始時間をずらす                                                */
/* CSS クラス名 photo-illumination5                                                          */
/* E:nth-of-type(n) 、疑似クラス、 n番目のその種類の要素にスタイルを適用する */
.photo-illumination5 img:nth-of-type(1) {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
}
.photo-illumination5 img:nth-of-type(2) {
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
}
.photo-illumination5 img:nth-of-type(3) {
    animation-delay: 4s;
    -webkit-animation-delay: 4s;
}
.photo-illumination5 img:nth-of-type(4) {
    animation-delay: 6s;
    -webkit-animation-delay: 6s;
}
.photo-illumination5 img:nth-of-type(5) {
    animation-delay: 8s;
    -webkit-animation-delay: 8s;
}

確認です。

②（２枚の画像でスライドショー）イルミネーション・ツリー

③（５枚の画像でスライドショー）お台場・イルミネーション

④（５枚の連続写真）イタリア・青の洞窟の入口

①（５枚の連続写真）　お台場・X'masツリーとレインボーブリッジ

タグ：CSS イルミネーションスライドショー html画像指定

2017-08-30 08:31 nice!(1) コメント(2)
共通テーマ：旅行

ＣＳＳ：連続写真を重ねてX'masイルミネーションやスライドショーをブログで表示したい。　[パソコン]

ブログでクリスマス・ツリーが点滅している様子を再現したくてテストしています
タイトルをクリックするとＣＳＳアニメーションのページにリンクします。

①（５枚の連続写真）　お台場・X'masツリーとレインボーブリッジ

②（２枚の画像でスライドショー）イルミネーション・ツリー

③（５枚の画像でスライドショー）お台場・イルミネーション

④（５枚の連続写真）イタリア・青の洞窟の入口

使いまわしがしたいので①から④まで同じＣＳＳで行っています。
htmlは５枚の連続写真を<DIV class="photo-illumination5">で囲みます。

<body>
<br> <br> ＣＳＳ　スライドショーのテスト<br> <br>
①（５枚の連続写真）　お台場・X'masツリーとレインボーブリッジ
<DIV class="photo-illumination5">
     <IMG src="./IMG_8333.JPG">
     <IMG src="./IMG_8334.JPG">
     <IMG src="./IMG_8335.JPG">
     <IMG src="./IMG_8336.JPG">
     <IMG src="./IMG_8337.JPG">
</DIV>
</body></html>

今のところ、（U-Page+）にcss、html、画像ファイルを置いた場合はＯＫ。
後はブログのcss編集での確認になります。
　cssアニメーションはかなりCPUを食いそう。
　①から④を一気に表示させたらスマホではカクカクした表示でした。
なので今回のテストのようにU-Page+にリンクした方が良さそうです。
その場合はU-Page+は10mByteしかないので写真はブログに登録してU-Page+のhtmlから画像をリンクできるか？

作成したＣＳＳは IE、Chrome、Safari　だけ対応しています。

今回はここまでにします。

タグ：CSS アニメーション連続写真スライドショーイルミネーション X'mas お台場

2017-08-28 07:52 nice!(1) コメント(0)
共通テーマ：旅行

那須ステンドグラス美術館。　[旅行：栃木]

ステンドグラス美術館

夕食はいいものを食べていました。

2017-08-25 07:38 nice!(1) コメント(0)
共通テーマ：旅行

日光：中禅寺湖のイタリア大使館とヤマネ、湯滝の鮎釣り(2001)　[旅行：栃木]

中禅寺湖のイタリア大使館、

イタリア大使館で隠れていた天然記念物のヤマネ。素早い動きでピントが合わないです。

湯滝

　
鮎の釣り人と湯滝

鮎なら売っている

湯元は右方向

日光湯元

戦場ケ原

戦場ケ原の木道、木道の左の花はホザキシモツケ

花盛りのホザキシモツケ

2017年調査
・日光：イタリア大使館
　　昭和3年イタリア大使館の夏季別荘として建造、1997年まで使用されていた
・ヤマネ
　　1975年天然記念物に指定。2012年の見直しでランク外として削除された
・鮎
　　アユを釣る姿は日本の夏の風物詩
・湯滝
　　湯ノ湖から斜面を流れ落ちる。湯ノ湖のほとりには日光湯元温泉、流れているのは湯ではなく水
・戦場ケ原
　　山の神がこの湿原を舞台に争いを繰り広げたという伝説に由来する
・ホザキシモツケ
　　1997年に絶滅危惧II類に指定されていたが、2007年より解除された
　　
夏休みの自由研究になってしまいました。ヽ(^。^)ノ

　ブログのタグクラウド

スポンサードリンク

ヤマネのオリジナル画像ファイル

タグ：イタリア大使館鮎釣りヤマネ

2017-08-24 13:06 nice!(1) コメント(4)
共通テーマ：旅行

アクアマリンふくしま・天地閣の「カニも付いた美味しいもの」（2002)　[旅行：福島]

左折するとアクアマリンふくしま

ここで左折したところが天地閣だったと思う

直進で小名浜港

アクアマリンふくしま入口

クマノミ

トルネード

アクアマリンふくしまの一番高いところからだと思う

天地閣からの景色、中央下に見えるビニールハウスみたいな透明な建物がアクアマリンふくしまだと思う。

反対を向くとお天気カメラが設置されていた記憶があるが撮ってないです。
ビールを開ける前

良く見るとカニもいました。（カニ食べた記憶はないです）

後の写真は無いので楽しく食べたのだろうと思う。
今だったら１０枚は撮っているだろうな。

写真を整理してBlogにupしています。８月は過去に８月に旅行した写真をBlogにUP。で１年で整理する予定。

2017-08-21 08:53 nice!(2) コメント(0)

江戸川花火大会（2007)、アルバム整理の予定リスト９月～７月　 [旅行：千葉]

UP予定のリスト

９月　　イタリア（ローマ・カプリ・ボンベイ・ピサ・フィレンツェ・ベネチア・ミラノ・コモ湖）
１０月　シドニー、ケアンズ、札幌、函館、茶臼山、富士山、西伊豆、那須
１１月　安芸の宮島、神宮外苑、西伊豆
１２月　東京タワー、外苑黄葉
１月　　銀山温泉
２月　　小樽、流氷紋別・氷瀑祭り、札幌雪祭り、霧氷筑波山、四万温泉、カピパラ、スカイツリー、浜金谷
３月　　小樽、支笏湖丸駒温泉、旭日山動物園、幸手桜堤、千鳥ヶ渕、
４月　　桜（皇居、千鳥ヶ渕、目黒、門前仲町、西伊豆、幸手、赤城山、小田原、埼玉、秩父・・）
５月　　立山黒部の雪の大谷、御柱祭り、五色沼、山寺蔵王、宮城松島、猿地獄谷温泉、弘前桜、昇仙峡、南房総、はとバス（築地食い倒れ、富士山芝桜さくらんぼ、鴨川イチゴ狩）・・
６月　　５月に行き過ぎて６月は休憩
７月　　７月も休憩、西伊豆堂ヶ島
８月　　作成中（中禅寺湖、ふくしまアクアマリン、那須ステンドグラス）

♪スペインのサクラダファミリアも行きたいんだけどなぁ　今朝のニュースを見ると・・・・なかなかいけないかなァ

　追記：

　UP予定のリストは不足していました。
　　写真を外部HDDに保存しているが１つのHDDでしか整理していなかった。
　　外部HDDが複数あり全部マージして整理が必要。
　　（写真のファイルはバックアップが沢山ある状態です）

花火は良い場所に座れたようです。

８月から写真を整理してBlogにupしています。８月は過去に８月に旅行した写真をBlogにUP。で１年で整理する予定。

2017-08-17 17:54 nice!(3) コメント(3)

有料だけど桟橋からが良く見える、手賀沼花火大会（2004,2006,2007)　[旅行：千葉]

公園からの手賀沼花火（2004)
観覧席、焼きそば、ビール、唐揚げ

湖上の花火はここからだとよく見えないけど焼きそばが在る

桟橋からの手賀沼花火（2006)
湖の上の花火の発射台
席はこんな感じです。

花火は良いよね♪

2006年と同じ桟橋だと思う、手賀沼花火（2007)

カメラのモードが合って無い、見る方に集中していたんだと思う

桟橋は特等席です。

　ブログのタグクラウド

タグ：手賀沼花火大会桟橋

2017-08-16 12:34 nice!(0) コメント(0)
共通テーマ：旅行

助かってよかった。諏訪湖花火大会（2013)　[旅行：長野]

こんなカミナリが迫ってきました。

クラブツーリズムの一泊バスツアーで行きました。ツアーは写真に写っているようにバス席の並び順で白線内に座ります。暑かったなぁ

花火の打ち上げ場所が見えるので期待できそう。

17時56分、夕立が来た後。ビニールレインコートを脱いでいる人がいます。

たぶん18時45分ごろの記憶している風景、また来ました（画像は「無料　雷」で検索してダウンロードした画像です）

雷雨が暗い湖の上をこちらに向かってくる。

その後・・・・wikipediaより抜粋　ここから
2013年（平成25年）大雨洪水警報が発表される中で予定通り19時から開催されたものの、雷と大雨の影響で19時30分すぎに中止となった。またこの大雨の影響で中央本線が運転見合わせ、中央自動車道・長野自動車道が通行止めとなったことから花火大会の見学客が帰宅困難となり、諏訪市が近隣の施設を開放し受け入れた[2]。なお、中央本線は最大6時間20分遅れとなり、首都圏のJR各線では接続用の臨時列車を運行して対応した。観客は50万人。
抜粋　ここまで

50万人の中にいました。

助かってよかった。
　大雨洪水警報が発表される雷雨、でも観覧席の湖畔は高い建物がありません
　湖畔から道路の出口は階段です、

　何万人が一斉に非難を開始したため込み合ったまま湖畔の土手で足踏み状態、

　妻と離れないようにするのが精いっぱいでした。

　土手は一番高い場所。

　光が走るごとに怖いです。
　ツアーバスは乗り継ぎ駅に先回りしているため非難する場所がない、

　雷雨の中、湖畔の道路を駅に向かいます
　駅には入れない中、各社の添乗員が公民館が避難場所になっていることを叫んでいました

夏なのに寒い
　公民館に避難しましたが全身が濡れているため体力を奪われていきます。
　公民館の人が石油ストーブを出してくれました

　ストーブの周りにいる１０人ぐらいの人しか温まらない。
　行列のできている自動販売機でホットカカオを購入、

　寒いときはお勧めです。これで少し回復しました。

まいごになった
　当然のことながらツアー客はバラバラ、

　添乗員との電話連絡も通話する人が多いため繋がらない。
　電車はいつ動くかわかりません

その後
　ショートメールでやっと添乗員と連絡がとれた、

　「バスは乗り継ぎ駅で待っているのでそこで集合」

　バスも大雨で迎えにくることができません。
　２時か３時ごろ？やっと電車に乗れた。
　ツアーバスで全員集合するまで１時間ぐらいバスの中で待機、

　暖房は深夜のためか、駅周辺のためかできない。

　４時ごろだろうかホテルに到着、まだ全身湿っているので寒い。
　ホテルの人は大浴場を沸かしいて待っていてくれました。(^。^)
　あんなに暖かい、気持ちの良い風呂はないです、
　暖かさがしみ込んできました。ホテルの人、ありがとうございます。

・・・・
　雷が迫ってきている段階で主催者の判断ではなく自分の判断で避難するべきだった。

その後のその後
　会社にも非常用の持出リュックを置きました。
　　乾燥米、水、氷砂糖、ペットボトル、ラジオ、Ｔシャツ、ソーラー充電器、歯ブラシ

翌日、ツアーは中止することなく続行され清里にいきました。

添乗員さんを含めて全員体調を崩さず良かったです。

＠＠＠＠＠　当時のメモ　＠＠＠＠＠

19:30 避難開始、荷物をまとめるだけで背中が濡れる。
マンションの軒下に非難、雷と雨がひどい、
雨が収まり諏訪湖駅に向かう。途中で仮設トイレに行く
諏訪湖駅の行列に並ぶ（１５分くらい）
諏訪湖駅でクラツーの案内があり文化センターに行く
文化センター　ずっと立ちっぱなし
　中に入り退避
　電話で添乗員に繋がらない
自販機でココア購入１００円＊２
　ストーブが設置されて少し温まる
22:23　ＳＮＳで添乗員に連絡
22:54 添乗員から塩尻駅に行くようにＳＮＳで返信
23:10 諏訪湖駅に向かう
途中で仮設トイレに行く
諏訪湖駅で並ぶ、並んでいる時にリュックを前に抱える
（リュックが濡れているため腹が濡れてしまう）。３０分ぐらい並ぶ
アズサで塩尻に向かう、ここでやっと座れる
電車の中から添乗員にＳＮＳ。塩尻に向かっている
塩尻でバスに乗る、ポテトチップと水
靴下を脱ぎ乾かす
バスで１時間程度でホテルに到着　（4時前か？）
風呂に入り、靴などを乾かす
5:10 寝る
8:10 起きる
9:00-30 朝食
10:00 出発

2017-08-15 21:15 nice!(2) コメント(1)
共通テーマ：旅行