サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019年9月25日 21:05
はじめまして。
いつもCocoonを利用させていただいております。まことにありがとうございます。
さて、私のサイト（ https://usakabu.com/ ）にTradingviewというサイトで提供しているウィジェットを貼り付けたいのですが、ウィジェットのサイズを"自動サイズ"にした場合、高さが100pix程度になってしまいます。「自動サイズ調整がオンの場合、ウィジェットは、囲み要素の幅および/または高さの100%を使用します。ウィジェットが正しく機能するためには、ある一定の親要素の高さを設定することがとても重要です。」とのことですが、どのように設定すべきか分からず、まことに申し訳ございませんが、解決方法をご教示いただければ幸いです。
なお、以下はサイト（記事）にはりつけるコードです。
<!-- TradingView Widget BEGIN -->
https://s3.tradingview.com/tv.js
new TradingView.widget(
{
"autosize": true,
"symbol": "NASDAQ:AAPL",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "Light",
"style": "1",
"locale": "ja",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"container_id": "tradingview_df3e5"
}
);
</div>
<!-- TradingView Widget END -->
どうぞよろしくお願い申し上げます。
2019年9月26日 19:56
申し訳ないですが、タグを貼り付ける場合は以下で紹介しているnotepad.pwツールを利用していただければと思います。
https://wp-cocoon.com/notepad-pw/
でないと、フォーラムによりHTMLが変換されてしまうので。
ただ、サポート対象外のものにもあるように、外部ツールは基本的にサポート外とさせていただいています。
確認はしてみますが、必ずしもやり方がわかるかは保証できません。
Topic starter
2019年9月27日 07:26
わいひら様
ご確認いただきましてありがとうござます。
また、大変失礼したいました。
以下の通りnotepad.pwツールにタグをはりつけました。
https://notepad.pw/share/sh12ii4j4
＞確認はしてみますが、必ずしもやり方がわかるかは保証できません。
本件、承知いたしました。もし、お分かりになれば、是非お願いできればと思います。
どうぞよろしくお願いいたします。
2019年9月27日 20:11
CSSを変更すれば、多分高さは変更できるように思います。
高さは何pxほどにしますか？（ちなみに添付画像は高さ300pxです）
また、冒頭に書き込まれた、説明文が書かれているURLがあれば書き込んでいただけると助かります。
解説ページの説明を読めばもっと簡単な対応方法があるのかもしれないですし。
Topic starter
2019年9月30日 11:07
わいひら様
ご返信いただきまして、ありがとうございます。
説明文ですが、以下のページの下の方に記載がござます。（"ウィジェットが異なる画面サイズに対応していません。どうすれば良いですか？"の箇所です）
https://jp.tradingview.com/widget/advanced-chart/
また、いただいたアドバイスを参考にCSSを以下の通り更新してみましたが、うまくいきませんでした。もし、よろしければ、どのような記載が必要であるかご教示いただければ幸いです。
2019年9月30日 18:07
リンク先の説明を読む限りでは、自動サイズで高さを設定するには、CSSで変更するしかなさそうですね。
ウィジェットが異なる画面サイズに対応していません。どうすれば良いですか？
<i>自動サイズ</i>設定を使用してください。自動サイズ調整がオンの場合、ウィジェットは、囲み要素の幅および/または高さの100%を使用します。ウィジェットが正しく機能するためには、ある一定の親要素の高さを設定することがとても重要です。
子テーマのstyle.cssに対して、以下を追記すればできるかと思います。
div[id^="tradingview_"] {
height: 300px;
}
デバイスごとに、高さを変更する場合は、サイズを指定したメディアクエリ内に書くと良いかと思います。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。