サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2018年11月2日 16:48
わいひら様、いつもお世話になっております。
度々の質問失礼いたします。（内容的に『カスタマイズ相談』『要望』に書くべきなのかもしれませんが…質問も兼ねてこちらに投稿させてください）
cocoonのアピールエリア機能につきまして、背景画像の縦横比を保ったまま、画像全体を表示させるということは可能でしょうか？
現在の仕様ですと、大きい画像を用意すると当然画像の一部しか表示されないと思います。
そこでたとえばcocoonの設定で縦幅を最大の800pxに設定し、用意した画像も縦幅800pxに合わせて縮小したものを適用してみたのですが…これでも結局横幅が優先なのか？ズームされて画像の一部しか表示されないという状況です。
（私のイメージでは、縦幅800pxの設定に縦幅800pxの画像を設定すれば、縦幅が一致しているので自動的に横幅も元の画像と同じサイズになり、結果画像がフルサイズで表示されるかと思っていた…ということです）
※添付画像はオリジナルサイズ4500×3000を1200×800に縮小し、縦幅『800』で画像を設定した状態
また合わせまして、アピールエリアの幅そのものを変更するということは可能でしょうか？
たとえば横幅を現状のブラウザの幅いっぱいではなく、コンテンツ幅（カラム幅？）に合わせるなど。
これなら縦幅に対して横幅が相対的に短くなるので、画像の選択肢も増えるかなと思いまして…。
アピール機能は非常に便利な機能で求めているものでしたのでぜひ使いたいのですが、現在の仕様ですと、設定したい画像があってもサイズの問題で適用するとイマイチになることが多く…
なるべく違和感なく表示するには極めて横長の画像を探してくるしか方法がないようなので、アピールエリアの背景画像もレスポンシブと言いますか、オリジナルの画像をそのままの見た目で表示できるようになれば有難いと思いました。
上記内容について解決策などありましたらアドバイスいただけますと幸いです。
何卒よろしくお願い致します。
トピックスターター 2018年11月2日 16:50
画像が一投稿につき一枚しかアップできないようなので、続けて失礼致します。
念のためアピールエリアに設定前の背景画像も添付致します。
※添付画像をアピールエリアに設定の際、拡大縮小などで見切れることなく添付画像の見た目まま表示したいという質問（要望）になります
2018年11月2日 17:12
背景画像の縦横比を保ったまま、画像全体を表示させるということは可能でしょうか？
アピールエリアの幅そのものを変更するということは可能でしょうか？
CSSで指定すれば可能だと思います。
ただ実際の様子：画像サイズに合わせて調整が必要なのと、ご自身のコンテンツの横幅を指定すれば可能です。
冒頭にあるとおり、URLを提示いただけたらと思います。
不具合・カスタマイズ対象ページのURLを提示してください
わいひら reacted
トピックスターター 2018年11月2日 17:52
＞かうたっく様
ご返信ありがとうございます。
URLなのですが、今回は既存サイトのリニューアル（現在はcocoonではない別テーマを使用中）でcocoonに切り替える予定でして、デザインをローカル環境で確かめている状態なのでURLを提示することができません…
また画像も、サイズの異なる複数枚を試していますので「このサイズ！」と明示することができない状況です、申し訳ございません。
他のテーマでもよくcocoonのアピールエリアに類似した機能が実装されていて、他のテーマではだいたいサイズが自動調整されたり、サイズをフルサイズにするとかの選択肢がありましたので、cocoonでも同じようにできないか？と思い質問させていだきました。
本当は画像サイズやデザインが固まってから質問すれば良かったかもしれないのですが…現状でも調整可能な方法はございますでしょうか？
細かいサイズ調整等は自分でもなんとかできると思いますので、汎用的なCSSの記述のみでもアドバイスいただけますと幸いです。
何卒よろしくお願い致します。
2018年11月2日 19:52
設定とかもあるかと思いますが、それはおいておき
実際やってみないと何とも言えないので、申し訳ないです ? ? ?
2018年11月2日 22:10
また合わせまして、アピールエリアの幅そのものを変更するということは可能でしょうか？
アピールエリアの幅を固定したいのであれば、Cocoon設定の「全体」タブにある「サイト幅を揃える」のチェックを入れれば出来ることはできると思います。
これだと、デフォルトのような横幅がブラウザー幅による可変とはならずに、固定されるので縦横比を計算しやすいかと思います。
ただし、これにチェックを入れるとヘッダーもフッターも幅が均一になります。
他のテーマでもよくcocoonのアピールエリアに類似した機能が実装されていて、他のテーマではだいたいサイズが自動調整されたり、サイズをフルサイズにするとかの選択肢がありましたので、cocoonでも同じようにできないか？と思い質問させていだきました。
僕は他テーマのことはよくわからないので、サンプルとしてうまくいっているサイトページのURLを提示していただければ参考にさせていただきます。
トピックスターター 2018年11月3日 21:26
＞わいひら様
ご返信ありがとうございます。
アピールエリアの幅を固定したいのであれば、Cocoon設定の「全体」タブにある「サイト幅を揃える」のチェックを入れれば出来ることはできると思います。
これだと、デフォルトのような横幅がブラウザー幅による可変とはならずに、固定されるので縦横比を計算しやすいかと思います。
ただし、これにチェックを入れるとヘッダーもフッターも幅が均一になります。
なるほど、簡単に『サイト幅を揃える』の項目は見落としていました…ありがとうございます。
これなら横幅いっぱいよりはサイズ調整がしやすいですね。
僕は他テーマのことはよくわからないので、サンプルとしてうまくいっているサイトページのURLを提示していただければ参考にさせていただきます。
他のテーマなのですがたとえばひとつは、
・TCDシリーズ『SKIN』
などのイメージでした（ただしこれはcocoonの『サイト幅を揃える』で近いものができそうです）。
またその他には、
OPENCAGEの『STORK』
http://demo-stork.open-cage.com/
上記テーマはヘッダー画像の背景ですが、かなり細かく設定できるようです。
画像サイズに関しては、
・縦横AUTO
・横100%
・縦100%
・サイズ調整しない
を選択できることに加え画像の繰り返しも、
・繰り返し表示（縦横とも繰り返す）
・横方向に繰り返し
・縦方向に繰り返し
・繰り返ししない
4パターンを選べるとのことで、STORKのように画像サイズ調整の優先設定と繰り返しの設定を組み合わせると、元画像のサイズに関わりなく自分のイメージする表示に近づけることができるのではないか？と思いました。
これらはCSSなどで簡単にできるものでしょうか？
また今後カスタマイズ等でテーマの機能に実装いただけそうであれば、ご検討いただけますと幸いです。
2018年11月4日 18:59
CSSでやろうと思えば行うことができるとは思います
ただ、CSSに慣れていなければ、「簡単かどうか」はその人のスキルにもよるかと思います。
もし、「思い描いている状態」と同じ設定状態になっているサイトがあればそのURLを貼っていただければ、そのサイトのCSSをみて、僕が同様の状態に出来るCSSはこのトピックに貼れると思います。
トピックスターター 2018年11月8日 18:05
＞わいひら様
ご返信ありがとうございます。
あれから色々試したのですが、ひとまずは画像サイズを調整することで解決することにしました。
（せっかくCSSを教えていただいてもまた別の画像や表示をしたいと思ったらキリがなくなりますので…）
今後のcocoonのアップデートの際に、管理画面からアピールエリアの画像サイズやループについて条件を選択できるような機能を実装できそうでしたらぜひご検討をお願い致します。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。