サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020年8月10日 02:21
初めましてこんばんは。
ワードプレスのアピールエリアに挿入している画像がスマホ表示だと両端が切れてしまう件についてお聞きしたく今回此方に書き込みを致しました。
PCでは両端切れずに挿入している画像がちゃんと表示されます。
お手数おかけしますがご教示頂けませんでしょうか
宜しくお願い致します。
tasha reacted
2020年8月10日 10:00
前略、tasha さん
Cocoonのサイトのアピールエリアのマニュアルにも記載されているように、アピールエリアの画像は、背景画像なんですよね。
背景画像ということは、画像自体に高さという情報がないので、エリアを別途に指定している訳です。その指定したエリアの背景として表示されているに過ぎない、ということですので、なかなか難しいのかなと思います。
「画像」ウィジェットを、「コンテンツ上部」のエリアに入れると、似たような表示になるので、デベロッパーツールで以下のCSSを仮設定して試してみました。
#content-top-in {
width: 100%;
}
.widget.widget-content-top.widget_media_image img {
display: block;
width: 100%;
}
上側にちょっと隙間が空いちゃうので、もう少し、CSSで調整が要るかもしれません。
参考程度ということで・・
This post was modified 4年前 by リフィトリー
Topic starter
2020年8月10日 12:10
こんにちは
こんなに早く返信頂けるとは思っていなかったのでビックリしました。
ご対応くださり誠にありがとうございます。ブログをずっとしてきたのでワードプレス初挑戦だったため、教えてくださった方法まだ理解できてませんが頑張って挑戦してみようと思います。
この度はご親切にありがとうございます。
Topic starter
2020年8月10日 13:29
エクセル、ワードからコピペしてという方法をしようとしていたのでそのアドバイス大変助かります。
テキストエディタを使ってみます。
また、CSSのコメントアウト取り替え早速今から取り掛かってみようと思います。
何から何まで教えてくださりleafytreeさんありがとうございます。
tasha reacted
2020年8月10日 13:45
@tasha さん
私のオススメのテキストエディターは、「Mery」です。
kuroさんという方が開発されています。
お使いのパソコンのOSに合わせて64ビットか32ビットのzip版をダウンロードして解凍し、パソコンの拡張子を表示する設定にして、フォルダを開くと、「Mery.exe」というファイルがありますので、それを、パソコンのタスクバーにドラッグします。(それだけで使えるようになります)
フォルダ自体はデスクトップに置いておけばOKです。
文字コードをUTF-8(BOMなし)に設定します。
This post was modified 4年前 by リフィトリー
Topic starter
2020年8月10日 15:54
leafytreeさん返信ありがとうございます。
初めて追加CSSというのをやりました。教えてくださった
>>私のオススメのテキストエディターは、「Mery」
をDLし
#content-top-in {
width: 100%;
}
.widget.widget-content-top.widget_media_image img {
display: block;
width: 100%;
}
#appeal {
height: calc(100vw * 0.3);
}
tasha reacted
Topic starter
2020年8月10日 16:12
@tasha さん
子テーマにお書きの以下のCSSは、コメントアウトするか、取り替えてください。
/*スマホのアピールエリアの高さの調整*/ #appeal { min-height:150px; /* 最低の高さを300pxに指定 */ }
このことを言っているのかと凄く分かりやすい説明でとても助かっています。ありがとうございます。
外観→テーマエディターからテーマの編集で上記内容を確認しました。
こちらのコメントアウトというのは削除するということでしょうか。もしくは別の数値に変えるということですか?
質問ばかりで申し訳ございません。
tasha reacted
Topic starter
2020年8月10日 16:50
大変申し訳ございません。
お手すきのタイミングで構いませんありがとうございます。
コメントアウトという意味が分かりました私の場合消さないほうが後々良さそうなのでこのままにしようと思いました。
現在、
#content-top-in {
width: 100%;
}
.widget.widget-content-top.widget_media_image img {
display: block;
width: 100%;
}
#appeal {
height: calc(100vw * 0.4);
}
height: calc(100vw * 0.4);
こちらを0.3にすると胴体が切れてしまうので0.4にしてみました。
ただ、0.4にするとスマホ側がおかしくなってしまうようです。
tasha reacted
2020年8月10日 18:37
外出中なのにもかかわらず返信下さり誠にありがとうございます。
不要なコードの削除。
スマホ、PC共に両端がうまく表示されるようになりましたが今度は胴体が切れてしまうようになってしまいました。
これはスマホの場合高さの指定が出来ないからということでしょうか。
0.3を0.4にすると
PC→胴体切れず両端もキレイに表示される
スマホ→拡大されるせいなのか両端はきれるが胴体はきれない。
こんな感じになっております。
朝質問したときよりゴールが見えてきたのでとても感謝しております!!
リフィトリー reacted
2020年8月10日 18:52
リファトリー様
この度はお忙しい所丁寧なご指導をしてくださり誠にありがとうございました。
無事にスマホとPCでアピール画像表示されるようになりました。ここ数週間悩んでいたので解決できてほっとできました。
リフィトリー reacted
2020年8月10日 19:24
CSSを作る方の好み?なのでしょうか
スマホ一台しかないので少し不安でしたがどんな画面幅であってもキレイに表示されるようになって良かったです。
回答くださった内容で知らないことだからだった為、調べながら解決できたことが嬉しくとても勉強になりました。
ありがとうございました。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。