teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

追記

2021/07/14 06:32

投稿

pomnit
pomnit

スコア1

title CHANGED
File without changes
body CHANGED
@@ -77,4 +77,35 @@
77
77
  Regenerate Thumbnails
78
78
  Wordfence Security
79
79
  WP Multibyte Patch
80
- XML Sitemaps
80
+ XML Sitemaps
81
+
82
+ ### 追記
83
+ 下記が検証ツールを使用してそれぞれのHTMLを検証した際の差異部分です。
84
+ 正常に動作しているDEMOは文節が1つ多いようです。
85
+ 【テストに存在しないテキスト】
86
+ ```
87
+ <div style="position: absolute; top: 35px; right: 5px; width: 25px; height: 25px; z-index: 101; cursor: pointer; background: url(&quot;https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/loupe.svg&quot;) 50% 50% / cover no-repeat;"></div>
88
+ ```
89
+
90
+
91
+ ◆cloudimage-360より下層部分
92
+
93
+ DEMO
94
+ ```
95
+ <div class="cloudimage-360 initialized" data-folder="https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/demo/chair-360-36/" data-filename="chair_{index}.jpg?v1" data-amount="36" data-magnifier="3" data-full-screen="" draggable="false" style="position: relative; width: 100%; cursor: grab;">
96
+ <div class="cloudimage-inner-box"><canvas width="802" style="width: 802px; font-size: 0px; height: 802px;" height="802"></canvas>
97
+ <div style="position: absolute; inset: 0px; width: 100px; height: 100px; margin: auto; background: url(&quot;https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/360_view.svg&quot;) 50% 50% / contain no-repeat rgba(255, 255, 255, 0.8); border-radius: 50%; box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 4px; transition: all 0.5s ease 0s; color: rgb(80, 80, 80); text-align: center; line-height: 100px; z-index: 2;"></div>
98
+ <div style="position: absolute; top: 35px; right: 5px; width: 25px; height: 25px; z-index: 101; cursor: pointer; background: url(&quot;https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/loupe.svg&quot;) 50% 50% / cover no-repeat;"></div>
99
+ <div style="position: absolute; top: 5px; right: 5px; width: 25px; height: 25px; z-index: 101; cursor: pointer; background: url(&quot;https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/full_screen.svg&quot;) 50% 50% / cover no-repeat;"></div>
100
+ </div>
101
+ </div>
102
+ ```
103
+ テストページ
104
+ ```
105
+ <div class="cloudimage-360 initialized" data-folder="https://pomnit.wp.xdomain.jp/wp-content/uploads/2021/07/" data-filename="sofa_{index}.jpg?v1" data-amount="36" data-full-screen="" draggable="false" style="position: relative; width: 100%; cursor: grab;">
106
+ <div class="cloudimage-inner-box"><canvas width="802" style="width: 802px; font-size: 0px; height: 802px;" height="802"></canvas>
107
+ <div style="position: absolute; inset: 0px; width: 100px; height: 100px; margin: auto; background: url(&quot;https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/360_view.svg&quot;) 50% 50% / contain no-repeat rgba(255, 255, 255, 0.8); border-radius: 50%; box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 4px; transition: all 0.5s ease 0s; color: rgb(80, 80, 80); text-align: center; line-height: 100px; z-index: 2;"></div>
108
+ <div style="position: absolute; top: 5px; right: 5px; width: 25px; height: 25px; z-index: 101; cursor: pointer; background: url(&quot;https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/full_screen.svg&quot;) 50% 50% / cover no-repeat;"></div>
109
+ </div>
110
+ </div>
111
+ ```