前略、工作員Ｚさん

アピールエリアが黒っぽいのは、スキンのSILKのデザインのようです。

SILKのスキンのまま、アピールエリアだけSILKのデザインを外すには、Cocoonデフォルトのデザインで上書きするとできるかもしれません。

以下のCSSのコードを追加CSSか、子テーマのCSSにコピペしてみてください。

.appeal-content {
    max-width: 740px;
    width: auto;
    margin: auto;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.85);
    color: #484848;
    padding: 2em;
}

ただ、モバイルの表示もそれで良いのかは良くわかりません。

スキン「SILK」のデザインがそういうもののようです。

子テーマのstyle.cssに

.appeal-content {
  width: auto;
  max-width: 740px;
  margin: auto;
  color: inherit;
  background-color: rgba(255, 255, 255, 0.85);
}

で大体デフォルトっぽくなりますかね。

SILKで上書きされたスタイルを、再度親テーマと同じ内容で上書きする内容です。

追記：書き込み被りました。

工作員Ｚさん

あとは、Cocoon設定の「アピールエリア」タブの設定で、「高さ」の数値を少なくして、「アピールエリアの背景画像の固定」のチェックを外して、「変更をまとめて保存」のボタンで確定してみてください。

画像の感じからして、固定しない方が合っているような気がします。（固定というのは、スクロールしても動かない、という意味です）

もう少し画像の上の方をトリミングしてもいいかもですね。

寝ぼけているので、そろそろ寝ます。

リフィトリーさんへ（@leafytree ）

お返事を頂きありがとうございます！
SILKの仕様だったのですね。
大変勉強になりました。
お示し頂いたコードを子テーマのCSSへ書き加えたところ、デフォルトの表示になりました。
嬉しいです！
ありがとうございます。

また、アピールエリアの背景画像の固定についても、ご助言を頂きありがとうございます。
固定を解除してみました。
テキストエリア（メッセージエリア）と絵が被らないので、ご指摘の通りスクロールに追従させた方が良いなと考え直す良い機会になりました。
ありがとうございました。

はるさんへ（@haruinoue）

お返事を頂きありがとうございます！
SILKのデザインだったのですね。
設定ミスだとばかり思っておりました。
子テーマのCSSを書き加えることで解決することができました。
ありがとうございました。

リフィトリーさん（@leafytree）
はるさん（@haruinoue）

何れのコードもモバイル版にも効果アリでした。
本当にありがとうございました！

工作員Ｚさん

モバイル時の表示ですが、うーん、ちょっとよくわからないですが、先のコードより下の行に以下を足すと、少し体裁が良くなる？かも。

@media screen and (max-width: 480px) {
    .appeal-content {
        padding: 1em;
        margin: 10px auto;
    }
}

リフィトリーさんへ（@leafytree）

度々のご確認をありがとうございます！
やってみたところ、確かに少し体裁が良くなりました！
こうしてみてみると、SILKの標準仕様も悪くないなと思う一方で、
PC版の見栄えがとても良くなったこともあり、当面はこのままに、
様子を見ようと思います。