前略、tasha さん

Cocoonのサイトのアピールエリアのマニュアルにも記載されているように、アピールエリアの画像は、背景画像なんですよね。

背景画像ということは、画像自体に高さという情報がないので、エリアを別途に指定している訳です。その指定したエリアの背景として表示されているに過ぎない、ということですので、なかなか難しいのかなと思います。

「画像」ウィジェットを、「コンテンツ上部」のエリアに入れると、似たような表示になるので、デベロッパーツールで以下のCSSを仮設定して試してみました。

#content-top-in {
    width: 100%;
}

.widget.widget-content-top.widget_media_image img {
    display: block;
    width: 100%;
}

上側にちょっと隙間が空いちゃうので、もう少し、CSSで調整が要るかもしれません。

参考程度ということで・・

tasha さん

これで上手くいくかどうかは、わかりません。

アピールエリア以外の方法を探っているのです。

tasha さん

アピールエリアのままで、以下のCSSを追記するだけでもイケるような気もしてきました。

#appeal {
    height: calc(100vw * 0.3);
}

あまり詳しく、試していないのですが・・

だだし、Cocoon設定のアピールエリア設定で、高さの設定はクリアしないといけないかもしれません。

tasha さん

tasha さん

こっちで、問題ないようなら、こっちの方が簡単ですね。

いろいろなブラウザや、スマホで試してみてください。

@leafytree

こんにちは

こんなに早く返信頂けるとは思っていなかったのでビックリしました。

ご対応くださり誠にありがとうございます。ブログをずっとしてきたのでワードプレス初挑戦だったため、教えてくださった方法まだ理解できてませんが頑張って挑戦してみようと思います。

この度はご親切にありがとうございます。

@tasha さん

CSSのコードは、追加CSSにコピペでもOKです。

追加CSSは、ダッシュボードの「外観」→「カスタマイズ」→「追加CSS」で開けます。すぐ上にある「公開」ボタンで保存を確定できます。

CSSなどのコンピューター言語のコードを扱うときは、UTF-8（BOMなし）の文字コードを扱うことのできるテキストエディタを使ってください。ExcelやWordやメモ帳などからコピーすると、余分な文字が入ってしまいエラーになることがあります。

@tasha さん

子テーマにお書きの以下のCSSは、コメントアウトするか、取り替えてください。

/*スマホのアピールエリアの高さの調整*/
#appeal {
  min-height:150px; /* 最低の高さを300pxに指定 */
}

@leafytree

エクセル、ワードからコピペしてという方法をしようとしていたのでそのアドバイス大変助かります。

テキストエディタを使ってみます。

また、CSSのコメントアウト取り替え早速今から取り掛かってみようと思います。
何から何まで教えてくださりleafytreeさんありがとうございます。

@tasha さん

私のオススメのテキストエディターは、「Mery」です。

kuroさんという方が開発されています。

テキストエディター「Mery」

お使いのパソコンのOSに合わせて64ビットか32ビットのzip版をダウンロードして解凍し、パソコンの拡張子を表示する設定にして、フォルダを開くと、「Mery.exe」というファイルがありますので、それを、パソコンのタスクバーにドラッグします。（それだけで使えるようになります）

フォルダ自体はデスクトップに置いておけばOKです。

文字コードをUTF-8（BOMなし）に設定します。

フォントも、Windowsなら、「consolas」にしておくと、エルとアイ や ゼロとオーなどの区別がつきやすくなるかと思います。

私はMacは持っていないのですが、Mac用の代表的なテキストエディタは、CotEditor とうのがあるみたいです。

私はわいひらさんのブログの記事で紹介されていた、Myrica というフォントが気に入って、インストールして使っています。

@leafytree

leafytreeさん返信ありがとうございます。

初めて追加ＣＳＳというのをやりました。教えてくださった

>>私のオススメのテキストエディターは、「Mery」

をＤＬし

#content-top-in {
    width: 100%;
}

.widget.widget-content-top.widget_media_image img {
    display: block;
    width: 100%;
}
#appeal {
    height: calc(100vw * 0.3);
}

高さ数値は入れずに追加CSSを試してみましたがまだスマホでは切れてしまうようです。

元画像はこちらになっています。

投稿者:: @leafytree

@tasha さん

子テーマにお書きの以下のCSSは、コメントアウトするか、取り替えてください。

/*スマホのアピールエリアの高さの調整*/
#appeal {
  min-height:150px; /* 最低の高さを300pxに指定 */
}

 

このことを言っているのかと凄く分かりやすい説明でとても助かっています。ありがとうございます。

外観→テーマエディターからテーマの編集で上記内容を確認しました。

こちらのコメントアウトというのは削除するということでしょうか。もしくは別の数値に変えるということですか？

質問ばかりで申し訳ございません。

@tasha さん

必要なコードは、以下のものだけです。

他のコードは、不要です。

#appeal {
    height: calc(100vw * 0.3);
}

コメントアウトが、わからないときは、削除しても大丈夫です。

気になるときは、「CSS コメントアウト」でググってみてください。

いま、出先なので、苦手なスマホ入力です。

@leafytree

大変申し訳ございません。

お手すきのタイミングで構いませんありがとうございます。

コメントアウトという意味が分かりました私の場合消さないほうが後々良さそうなのでこのままにしようと思いました。

現在、

#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 さん

先ず、子テーマにお書きの以下のCSSは不要になりますので、削除してください。

@tasha さん

次に追加CSSにコピペしたコードは、一旦、全部削除してください。

その次に以下のコードだけをコピペしてみてください。

/*アピールエリアの高さを調整*/
#appeal {
    height: calc(100vw * 0.3);
}

@leafytree

外出中なのにもかかわらず返信下さり誠にありがとうございます。

不要なコードの削除。

スマホ、PC共に両端がうまく表示されるようになりましたが今度は胴体が切れてしまうようになってしまいました。

これはスマホの場合高さの指定が出来ないからということでしょうか。

0.3を0.4にすると

PC→胴体切れず両端もキレイに表示される

スマホ→拡大されるせいなのか両端はきれるが胴体はきれない。

こんな感じになっております。

朝質問したときよりゴールが見えてきたのでとても感謝しております!!

@tasha さん

さきほど自宅に戻りました。

すみません。私の計算が間違っていました。

500px÷1500px＝0.333333 なので、

0.34ぐらいで試してみてください。

#appeal {
    height: calc(100vw * 0.34);
}

@leafytree

リファトリー様

この度はお忙しい所丁寧なご指導をしてくださり誠にありがとうございました。

無事にスマホとＰＣでアピール画像表示されるようになりました。ここ数週間悩んでいたので解決できてほっとできました。

@tasha さん

私もあまり詳しくないのですが、以下のような書き方もできるっぽいです。

#appeal {
    height: calc(100vw * 5/15);
}

何が正しいのか、よく知らないんですけどね。

確かに、どんな画面幅であっても、キレイに表示されるようになりましたね。 ? 

@leafytree

CSSを作る方の好み？なのでしょうか

スマホ一台しかないので少し不安でしたがどんな画面幅であってもキレイに表示されるようになって良かったです。

回答くださった内容で知らないことだからだった為、調べながら解決できたことが嬉しくとても勉強になりました。

ありがとうございました。