So-net無料ブログ作成

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

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


htmlファイルの例
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>CSSでイルミネーション・html画像指定</title>
    <link rel="stylesheet" href="irumi5.css" type="text/css">
  </head>
<body>
<br> <br> CSS スライドショーのテスト<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>


ブログ画像ファイルのURL調査方法

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


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

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

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



CSSファイルの内容(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}      /* 5個の画像なので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}    /* 5個の画像なので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;
}


確認です。



ダイエット中、7月末に84Kgでスタートして 現在体重81.4Kg  年末までに80Kgが目標

nice!(1)  コメント(2) 
共通テーマ:旅行

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

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



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

  <body>
  <br> <br> CSS スライドショーのテスト<br> <br>
  ①(5枚の連続写真) お台場・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、画像ファイルを置いた場合はOK。
後はブログのcss編集での確認になります。
 cssアニメーションはかなりCPUを食いそう。
 ①から④を一気に表示させたらスマホではカクカクした表示でした。
なので今回のテストのようにU-Page+にリンクした方が良さそうです。
その場合はU-Page+は10mByteしかないので写真はブログに登録してU-Page+のhtmlから画像をリンクできるか?

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

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


ダイエット中、7月末に84Kgでスタートして 現在体重81.4Kg  年末までに80Kgが目標

るるぶ東京 舞浜 お台場'14 (国内シリーズ) まっぷる イタリア mini '18 (まっぷるマガジン)

nice!(1)  コメント(0) 
共通テーマ:旅行

那須ステンドグラス美術館。今はダイエット中(2001) [旅行:栃木]

ステンドグラス美術館P8110056.JPGP8110097.JPG
夕食はいいものを食べていました。P8110123.JPGP8110127.JPGP8110133.JPGP8110141.JPGP8110153.JPG


今はダイエット中。
目標はお菓子をなるべく食べない、1日なるべく8000歩。

1ケ月にマイナス1Kgと思っていたのですが順調。
初めて24日で84.0-81.8=2.2Kg  最初だけかな

朝:今までと同じ
 目玉焼きかウィンナー、パン1枚、紅茶(砂糖なし)、サラダ(トマト、キャベツ、胡瓜など)
昼:多少減量して
 ご飯(150g)、サラダ、油分の少ないオカズ1品、お茶
夜:今までと同じ
 ご飯(150g)、みそ汁、オカズ(麻婆豆腐や生姜焼きなど)、
 小鉢1、2品(サラダ、枝豆、冷ややっこ、納豆、切り干し大根など)、
 果物かヨーグルト(オリゴ糖)、お茶

 
 お菓子のカロリーを調べてみた
 ・アーモンドチョコ 半分で約300Kカロリー
 ・サラダせんべい小分け1袋(2枚)約70Kカロリー、3袋で210Kカロリー
 ・アイス1本 約70Kカロリー
 
 ご飯(150g)約250Kカロリー


(^。^)(^。^)

nice!(1)  コメント(0) 
共通テーマ:旅行

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

中禅寺湖のイタリア大使館、P8130027.JPG
イタリア大使館で隠れていた天然記念物のヤマネ。素早い動きでピントが合わないです。P8130040.JPG
湯滝P8130063.JPG 
鮎の釣り人と湯滝P8130064.JPG
鮎なら売っているP8130077.JPG
湯元は右方向P8130081.JPG
日光湯元P8130082.JPG
戦場ケ原P8130097.JPG
戦場ケ原の木道、木道の左の花はホザキシモツケP8130100.JPG

花盛りのホザキシモツケ

P8130101.JPG


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

ダイエット中、7月末に84Kgでスタートして 現在体重81.8Kg  年末までに80Kgが目標

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


nice!(1)  コメント(4) 
共通テーマ:旅行

エクセル、今日のおかずは何が良いですか?回転CSSで遊んでみました。 [パソコン]

DSCN9513.jpg

何年か前にエクセルで作成しようとした「食べたいおかずリスト」を流用しました。

別ウィンドウが開きますおかずは何が良いですか?

行の中央付近をカーソルでタッチすると回転します。
本当はランダムに今日の「おかず」と「果物」が出てくれば良いなと思っていたのですが
「おかず」を考えることが大変で中断しています。
変にエクセルで合成された「牡蛎のけんちん汁」とかでてきます。
(冬に食べてみたい気もするけど。)

エクセルじゃなくても良いじゃないか  は ・・・聞き流しますヽ(^。^)ノ

ブラウザによっては回転しません。
IE11   回転しません
chrome  回転しました
Firefox 回転しました


ダイエット中、7月末に84Kgでスタートして 現在体重81.9Kg  年末までに80Kgが目標


nice!(2)  コメント(0) 
共通テーマ:趣味・カルチャー

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

左折するとアクアマリンふくしまP8170220.JPG
ここで左折したところが天地閣だったと思うP8170224.JPG
直進で小名浜港P8170225.JPG
アクアマリンふくしま入口P8170250.JPG
クマノミP8170338.JPG
トルネードP8170375.JPG
アクアマリンふくしまの一番高いところからだと思うP8170412.JPG
天地閣からの景色、中央下に見えるビニールハウスみたいな透明な建物がアクアマリンふくしまだと思う。P8170436.JPG
反対を向くとお天気カメラが設置されていた記憶があるが撮ってないです。
ビールを開ける前P8170447.JPG
良く見るとカニもいました。(カニ食べた記憶はないです)P8170448.JPG
後の写真は無いので楽しく食べたのだろうと思う。
今だったら10枚は撮っているだろうな。P8170444.JPG


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

ダイエット中、7月末に84Kgでスタートして 現在体重82.5Kg  年末までに80Kgが目標
ダイエット宣言で継続させようとしています。
お菓子をなるべく食べない、1日なるべく8000歩。が目標です。

nice!(2)  コメント(0) 

江戸川花火大会(2007)、アルバム整理の予定リスト9月~7月 [旅行:千葉]

UP予定のリスト

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

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

 追記:

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



花火は良い場所に座れたようです。IMG_3531.JPGIMG_3536.JPGIMG_3538.JPGIMG_3568.JPGIMG_3634 .JPGIMG_3657.JPG
8月から写真を整理してBlogにupしています。8月は過去に8月に旅行した写真をBlogにUP。で1年で整理する予定。

ダイエット中、7月末に84Kgでスタートして 現在体重82.5Kg  年末までに80Kgが目標

nice!(3)  コメント(3) 

ダイエット:増量中(-_-;)・Fitbitで週間カロリー消費量の確認 [ダイエット]

1ケ月1Kg減量が目標のダイエットが一進一退


花火でビール、焼きそば、からげ揚げ、おにぎり、せんべい
食べる前は82Kg台だったのに現在83.4Kg、増量中(-_-;)


Fitbitで今週のFitbitで週間カロリー消費量の確認
・摂取カロリーも記録できるけど、それはしていない
・2.6K(2600カロリー)がデフォルトの摂取カロリーとしてラインが引かれている。
・棒グラフがラインに届けば痩せる 消費カロリー > 摂取カロリー
・金曜日から火曜日まで届いていない = 摂取カロリーの方が多い = 太る
もう少し歩く努力が必要と判断しました。

Screenshot20170816.png

一番気に入ってるのは1時間座り込んでいるとバイブレータと画面表示で散歩した方が良いと教えてくれること。
Fitbit フィットビット 心拍計 フィットネスリストバンド AltaHR 心拍 睡眠 健康管理 活動量計 アクティブトラッカー スマートブレスレット Black ブラック Lサイズ 【日本正規品】 FB408SBKL-CJK

nice!(0)  コメント(0) 
共通テーマ:美容

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

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

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


桟橋からの手賀沼花火(2006)
湖の上の花火の発射台
席はこんな感じです。IMG_0252.JPGIMG_0253.JPGIMG_0254.JPG

花火は良いよね♪IMG_0266.JPG

IMG_0275.JPGIMG_0300.JPGIMG_0302.JPGIMG_0303.JPGIMG_0304.JPGIMG_0321.JPGIMG_0322.JPGIMG_0323.JPGIMG_0328.JPGIMG_0329.JPGIMG_0330.JPG


2006年と同じ桟橋だと思う、手賀沼花火(2007)IMG_4185.JPGIMG_4187.JPG
カメラのモードが合って無い、見る方に集中していたんだと思うIMG_4194.JPGIMG_4200.JPGIMG_4222.JPGIMG_4291.JPGIMG_4295.JPG
桟橋は特等席です。

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


nice!(0)  コメント(0) 
共通テーマ:旅行

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

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




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

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

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

たぶん18時45分ごろの記憶している風景、また来ました(画像は「無料 雷」で検索してダウンロードした画像です)suwakokaminari.jpg
雷雨が暗い湖の上をこちらに向かってくる。

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

50万人の中にいました。


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

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

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

 土手は一番高い場所。

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

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


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

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

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



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

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


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

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

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

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


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

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


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



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

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


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

nice!(1)  コメント(1) 
共通テーマ:旅行