前略、hari さん

デベロッパーツールで少し調べただけなので、詳しく見ていないのですが、実際は、余白があるのではなく、ご自身で、カスタマイズされていらっしゃる「fluid-box」というコンテナが、下の方にあるだけのような気もします。

この「fluid-box」というのを使ってどのようなデザインにカスタマイズされたいのかは、わかかりませんが、ご自身でもよくわからなくなってしまったときは、一旦、デフォルトの状態に戻してから作業した方が良いような気がします。

子テーマのCSSや、追加CSSにも、コードを書いていらっしゃるので、それらをコメントアウトするなどして、ご自身のカスタマイズの影響がない状態で、一度どのような表示になるか確認してみてはいかがでしょうか？

hari さん

Cocoonを普通のブログとしてではなく、いろいろとカスタマイズする予定がある場合は、スキンは使わない方がカスタマイズし易い場合が多いような気がします。

スキンを使うと、カスタマイズしていくときに、CocoonのデフォルトのCSSのデザインに加えて、スキンのCSSがCocoonのデフォルトのデザインを上書している状態になっているところへ、また更に、ご自身のカスタマイズで上書きしなくてはならなくなります。

スキンのCSSの指定をリセットするCSSを書かなくてはならなかったりする場合も発生したりします。

なので、スキンを適用しないプレーンな状態から、カスタマイズした方がスムーズな場合もあるかなと思います。

hari さん

追加CSSを開くには、ダッシュボードの「外観」→「カスタマイズ」→「追加CSS」と たどると開けます。

リフィトリー様

投稿者のhariです。

先ほど、登録を済ませましたので名前が変わっております。

ご混乱をお招きしますが、お許しください。

ご回答・貴重なアドバイスありがとうございます。

追加CSS・子テーマCSS・固定ページCSSを全て無くし、テーマをデフォルトに戻し、

fluid-boxを撤去してみました。

これで記事テッペンの花の画像がヘッダー下すぐに表示出来たら

応用できそうな気がしています。

@hari_de_beaute さん

「画像」ウィジェットを「コンテンツ上部」のウィジェットエリアに入れるなどすれば、上の方に画像を配置することは可能かと思います。

ただ、それでも隙間が空いてしまうなどすると思われるので、CSSなどで調整する必要は出てくるかと思われます。

また、画像のアスペクト比などによっても、デザインに影響が出るかと思います。

Cocoonは、どちらかと言うと、ブロガー向けのデザインになっているので、コーポレートサイトや商用サイトにカスタマイズするのには、手間がかかり、なかなか難しい部分もあるような気もします。

以下のトピックは、初心者向け、となっていますが、初心者でなくても有用なリンクも掲載されています。

【初心者向け】WordPressやCSS初心者向けの記事を紹介するトピック

リフィトリー様

アピールエリアとウィジェットを上手に使うことで

変わりになるデザインが作れそうです。

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