質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1503閲覧

Cocoonを積んだWordpressにスクリプトを正しく実装したい

pomnit

総合スコア1

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/07/13 22:00

編集2021/07/14 06:32

前提・実現したいこと

非エンジニア、HTML・CSSがかろうじて読めるレベルの初心者です。
Cocoonを積んだWordpressにおいて、ドラッグで回転する画像を実装しようとしています。
下記のスクリプト、
js-cloudimage-360-view / GitHub
を用いてデスクトップ、モバイルともに表示したい赤いソファの画像を作成時、問題が発生しました。ある程度模索していましたが、行き詰ってしまったので知恵をお借りしたいです。
浅学ゆえ言葉足らず感が否めませんが、どなたかよろしくお願いいたします。

作成テストページ
上から
js-cloudimage-360-viewのテスト(実装したい赤いソファ)
js-cloudimage-360-viewのデモ
を設置してあります。
コンテンツ幅は790px、画像は800×800pxです。

問題点

・Wordpressのプレビュー時やサーバー管理者権限のあるChromeブラウザだと表示されるが、公開するとデスクトップ、モバイルともに表示されない。(DEMOは表示される)

・ウインドウ幅を狭めると、高さはそのままに画像が潰れてしまう(触ると直る)

・デスクトップ表示の際に画像の拡大表示をすると、閉じるボタンの×が表示されない。(デスクトップ表示だとDEMOも表示されないが、モバイル表示だと表示される)

試したこと

・Chromeでサーバー内を閲覧編集していたが、IE/Edge/Firefoxでは画像を確認できず、サーバー管理者権限の無いPCからChromeで閲覧しても表示されなかった。
・CSSでheight:auto; width:100%;を設定しても画像が潰れる。
・画像のピクセル数を変更したり、コンテンツ幅を600px、1080pxと上下させても×ボタンは表示されなかった。

該当のソースコード

コードエディター

<!-- wp:paragraph --> <p>testです</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>下記、js-cloudimage-360-viewを使用したsofaのテスト</p> <!-- /wp:paragraph --> <div class="cloudimage-360" data-folder="http://pomnit.wp.xdomain.jp/wp-content/uploads/2021/07/" data-filename="sofa_{index}.jpg?v1" data-amount="36" data-full-screen="">  </div> <!-- wp:paragraph --> <p></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>下記、js-cloudimage-360-viewを使用したchair(DEMO)</p> <!-- /wp:paragraph --> <div class="cloudimage-360" 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=""></div> <div class="image-wrap"></div> <p><!-- Powered by Scaleflex team. All rights reserved. JS Cloudimage 360 View is provided under the MIT License --></p>

カスタムjavascript

window.addEventListener('load', function() { var el = document.createElement("script"); el.src = "https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.6.0/js-cloudimage-360-view.min.js"; document.body.appendChild(el); });

補足情報(FW/ツールのバージョンなど)

Xfreeの無料サーバーを使用。
Cocoonを使用、スキンはイノセンスです。

使用しているプラグインは、
Akismet Anti-Spam (アンチスパム)
Contact Form 7
EWWW Image Optimizer
Jetpack by WordPress.com
Media Library Categories
Real Media Library (Free)
Regenerate Thumbnails
Wordfence Security
WP Multibyte Patch
XML Sitemaps

追記

下記が検証ツールを使用してそれぞれのHTMLを検証した際の差異部分です。
正常に動作しているDEMOは文節が1つ多いようです。
【テストに存在しないテキスト】

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

◆cloudimage-360より下層部分

DEMO

<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;"> <div class="cloudimage-inner-box"><canvas width="802" style="width: 802px; font-size: 0px; height: 802px;" height="802"></canvas> <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> <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> <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> </div> </div>

テストページ

<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;"> <div class="cloudimage-inner-box"><canvas width="802" style="width: 802px; font-size: 0px; height: 802px;" height="802"></canvas> <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> <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> </div> </div>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ご提示いただいたコードは

html

1<div class="cloudimage-360" data-folder="http://pomnit.wp.xdomain.jp/wp-content/uploads/2021/07/" data-filename="sofa_{index}.jpg?v1" data-amount="36" data-full-screen="">  </div>

となっていますが、
ご提示いただいた「作成テストページ」のソースでは、

html

1<div class="cloudimage-360" data-folder="https://pomnit.wp.xdomain.jp/wp-content/uploads/2021/07/" data-filename="sofa_{index}.jpg?v1" data-amount="36" data-full-screen="">  </div>

となっていました。

当方の環境で、ご提示いただいたコードに差し替えてスクリプトを実行したところ動作を確認できましたので、そちらをご確認されてはどうでしょうか?

投稿2021/07/14 01:41

Lhankor_Mhy

総合スコア36960

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pomnit

2021/07/14 06:36

ご回答ありがとうございます。 http→httpsと変更しましたが、×ボタンは非表示のままで表示されませんでした。 追記にて、該当ページのHTMLを調べてみたら差異が出てきたのですが、ここから読み取れる事はありますでしょうか?
Lhankor_Mhy

2021/07/14 07:07

> http→httpsと変更 いえ、逆です……
pomnit

2021/07/14 10:01

何度もすみません。 ではテキストエディター上では正しかったみたいですね。 どうやらテキストエディターにてhttp://表記にしてもhttps://にしても、テストページではhttps://になるようです。 サーバーのSSL設定を無効にしてみたりしましたが、http表記にしても表示されませんでした。
pomnit

2021/07/17 06:29

色々検証してみます。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問