So-net無料ブログ作成
パソコン ブログトップ

ブログのSSL化(http⇒https) [パソコン]

過去の記事にリンクを張っていますが5月15日のSSL化(http⇒https)で修正が
必要との事。

ヘルプページで修正案とかが欲しいです。

記事管理からエクスポート、インポートでなんとかできるかなと思ったら
画像がエクスポートされないとの仕様。

では単純にエクスポート、インポートすれば画像は消えずに復元できる?
それならばエクスポートしたデータの記事リンク部分を一括修正して(http⇒https)できるけど
怖くてできません。

とりあえず、エクスポートすれば内部記事リンクがある記事を見つけることはできる。

エクスポートしてみました。


     
-------------------------エクスポートされたデータの抜粋-------------------------
     
○(1)画像
  <img width="600" height="450" align="" alt="IMG_7432.JPG" src="http://blog.so-net.ne.jp/_image・・・・・
○(2)動画
  <div><a class="video-link" href="http://blog.so-net.ne.jp/_images/blog・・・・・
■(3)記事リンク
  <div><a href="http://suikasuship.blog.so-net.n・・・・・・
□(4)amazon
  <p class="sonet-asin-title"><a href="http://www.amazon.co.jp/exec/ob・・・・・
□(5)楽天市    自分で使用していませんでした。
□(6)楽天トラベル 自分で使用していませんでした。

○(7)地図
  <div> <iframe src="http://blog.so-net.ne.jp/_map/?lat=36.4734・・・・・・
□(8)Twitter    自分で使用していませんでした。

□(9)instagram   自分で使用していませんでした。

□(10)googlePhoto 自分で使用していませんでした。

□(11)htmlを編集してリンクしたgoogleマップ
  <div><iframe width="640" height="480" src="https://www.google.com/maps/d/e・・・・・・
□(12) htmlを編集してリンクしたwebページ
  <div><a href="http://www016.upp.so-net.ne.jp/apl39・・・・・・


     エクスポートされたデータの抜粋、1~10はブログの「記事の編集」でUPした部分。
     11、12はhtml編集した部分。
 ○はシステムでhttp://blog.so-net.ne.jp を https://blog.so-net.ne.jp に変換するのだろう。
 □はブログの外なのでhttps化とは関係ない、
 ■は自分で修正ということか?
  システムで正規表現で修正できるけれど全てのページを確認ができないので行わない?
  http://*.blog.so-net.n ⇒ https://*.blog.so-net.n
 ■はso-netの告知に追記がされました。
  So-netブログ内へのリンク先はリダイレクトされますので修正の必要はございません。
  ヤッター!(^◇^) リュカ さん教えてくれてありがとう。

SSL ではなくてSL ・・・・・ 座布団持ってけ!

DSCN7640.jpg


追記:

エクスポートのヘルプページみたら500記事以上ある場合は月別指定だとか・・・・
10年だったら120回エクスポートするのか~
-------ヘルプページから抜粋-------
エクスポートする記事の範囲を指定してください。すべての記事または月別の指定が可能です。
ただし目安として500記事以上ある場合、「すべて」出力ができませんのでご了承下さい。


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

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;
}


確認です。



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 だけ対応しています。

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

nice!(1)  コメント(0) 
共通テーマ:旅行
パソコン ブログトップ