ブログのＳＳＬ化（http⇒https） [パソコン]
過去の記事にリンクを張っていますが５月１５日のＳＳＬ化（http⇒https）で修正が
必要との事。
必要との事。
ヘルプページで修正案とかが欲しいです。
記事管理からエクスポート、インポートでなんとかできるかなと思ったら
画像がエクスポートされないとの仕様。
画像がエクスポートされないとの仕様。
では単純にエクスポート、インポートすれば画像は消えずに復元できる？
それならばエクスポートしたデータの記事リンク部分を一括修正して（http⇒https）できるけど
怖くてできません。
それならばエクスポートしたデータの記事リンク部分を一括修正して（http⇒https）できるけど
怖くてできません。
とりあえず、エクスポートすれば内部記事リンクがある記事を見つけることはできる。
エクスポートしてみました。
-------------------------エクスポートされたデータの抜粋-------------------------
○（１）画像
<img width="600" height="450" align="" alt="IMG_7432.JPG" src="http://blog.so-net.ne.jp/_image・・・・・
○（２）動画
<div><a class="video-link" href="http://blog.so-net.ne.jp/_images/blog・・・・・
■（３）記事リンク
<div><a href="http://suikasuship.blog.so-net.n・・・・・・
□（４）amazon
<p class="sonet-asin-title"><a href="http://www.amazon.co.jp/exec/ob・・・・・
□（５）楽天市 自分で使用していませんでした。
□（６）楽天トラベル 自分で使用していませんでした。
○（７）地図
<div> <iframe src="http://blog.so-net.ne.jp/_map/?lat=36.4734・・・・・・
□（８）Twitter 自分で使用していませんでした。
<div> <iframe src="http://blog.so-net.ne.jp/_map/?lat=36.4734・・・・・・
□（８）Twitter 自分で使用していませんでした。
□（９）instagram 自分で使用していませんでした。
□（１０）googlePhoto 自分で使用していませんでした。
□（１１）htmlを編集してリンクしたgoogleマップ
<div><iframe width="640" height="480" src="https://www.google.com/maps/d/e・・・・・・
□（１２） htmlを編集してリンクしたwebページ
<div><a href="http://www016.upp.so-net.ne.jp/apl39・・・・・・
<div><iframe width="640" height="480" src="https://www.google.com/maps/d/e・・・・・・
□（１２） htmlを編集してリンクしたwebページ
<div><a href="http://www016.upp.so-net.ne.jp/apl39・・・・・・
エクスポートされたデータの抜粋、１～１０はブログの「記事の編集」でUPした部分。
１１、１２はhtml編集した部分。
１１、１２はhtml編集した部分。
○はシステムでhttp://blog.so-net.ne.jp を https://blog.so-net.ne.jp に変換するのだろう。
□はブログの外なのでhttps化とは関係ない、
■は自分で修正ということか？
システムで正規表現で修正できるけれど全てのページを確認ができないので行わない？
http://*.blog.so-net.n ⇒ https://*.blog.so-net.n
□はブログの外なのでhttps化とは関係ない、
■は自分で修正ということか？
システムで正規表現で修正できるけれど全てのページを確認ができないので行わない？
http://*.blog.so-net.n ⇒ https://*.blog.so-net.n
■はso-netの告知に追記がされました。
So-netブログ内へのリンク先はリダイレクトされますので修正の必要はございません。
ヤッター！(＾◇＾) リュカ さん教えてくれてありがとう。
So-netブログ内へのリンク先はリダイレクトされますので修正の必要はございません。
ヤッター！(＾◇＾) リュカ さん教えてくれてありがとう。
ＳＳＬ ではなくてＳＬ ・・・・・ 座布団持ってけ！
追記：
エクスポートのヘルプページみたら500記事以上ある場合は月別指定だとか・・・・
１０年だったら１２０回エクスポートするのか～
-------ヘルプページから抜粋-------
エクスポートする記事の範囲を指定してください。すべての記事または月別の指定が可能です。
ただし目安として500記事以上ある場合、「すべて」出力ができませんのでご了承下さい。
１０年だったら１２０回エクスポートするのか～
-------ヘルプページから抜粋-------
エクスポートする記事の範囲を指定してください。すべての記事または月別の指定が可能です。
ただし目安として500記事以上ある場合、「すべて」出力ができませんのでご了承下さい。
ＣＳＳ：連続写真を重ねて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>
<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ツリーとレインボーブリッジ
③（５枚の画像でスライドショー）お台場・イルミネーション
④（５枚の連続写真）イタリア・青の洞窟の入口
①（５枚の連続写真） お台場・X'masツリーとレインボーブリッジ
ＣＳＳ：連続写真を重ねてX'masイルミネーションやスライドショーをブログで表示したい。 [パソコン]
ブログでクリスマス・ツリーが点滅している様子を再現したくてテストしています
タイトルをクリックするとＣＳＳアニメーションのページにリンクします。
タイトルをクリックするとＣＳＳアニメーションのページにリンクします。
①（５枚の連続写真） お台場・X'masツリーとレインボーブリッジ
②（２枚の画像でスライドショー）イルミネーション・ツリー
③（５枚の画像でスライドショー）お台場・イルミネーション
④（５枚の連続写真）イタリア・青の洞窟の入口
②（２枚の画像でスライドショー）イルミネーション・ツリー
③（５枚の画像でスライドショー）お台場・イルミネーション
④（５枚の連続写真）イタリア・青の洞窟の入口
使いまわしがしたいので①から④まで同じＣＳＳで行っています。
htmlは５枚の連続写真を<DIV class="photo-illumination5">で囲みます。
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>
<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 だけ対応しています。
今回はここまでにします。
