おはようございます！
近牡と申します。
CSSデザイン対応のデザイン設定を変更し、
タグに直接スタイルを埋め込むことで
レスポンシブ対応のTOPページを作成しました。
ソースはこちら。
<div class="userbody" style="text-align: center;max-width:100%;height:800px;border-radius:15px;">
<!--bodyタグが禁止されているためdivタグのclass属性でユーザー定義のbodyを別途設定可能な状態にしました。-->
<img src="画像URL" width="80%" alt="image" style="margin: 0 auto;">
<!--imgタグへのstyle指定はスクリプトか何かで操作され、うまく動作しません。htmlタグの操作の範囲なら可能なためwidth="xx%"で指定し、調整しています。-->
<header>
<h2 style="padding: 0.3em 0.5em; background: -webkit-linear-gradient(to top, rgb(255, 255, 125), rgb(255, 255, 255)); background: linear-gradient(to top, rgb(255, 255, 125), rgb(255, 255, 255));
color: #f66;text-align: center;">蛸無したこ焼研究所</h2>
<!--色指定がバラバラなのは単に気分です。透過度指定できる方が色々便利だし全部rgbaでもいいよ！ -->
<h2 style="text-align: center;color: #f33">～TOP_PAGE～</h2>
</header>
<nav style="border-radius: 30px;background-image: url(画像URL)
;background-size: cover;opacity: .9;">
<h3 class="setumei" style="color: #f5c;font-weight: bold;">
<!-- HTML5で使えるheader要素やnav要素で出来るだけ丁寧にマークアップしてます。単にデザイン変えたいだけならdivでいいけど、せっかくなら丁寧にしようという心意気です。はい。 -->
<h3>お好きなMENUをどうぞ！</h3>
<a href="https://ameblo.jp/try-chika/theme-10109277391.html" style="display:inline-block; padding: 10px 30px;margin: 10px; background-color: rgba(255,255,255,.9);box-shadow: 2px 2px 4px #000;border-radius: 10px;margin: 30px;">雑談</a>
<a href="https://ameblo.jp/try-chika/theme-10107549319.html" style="display:inline-block; padding:10px 30px; background-color: rgba(255,255,255,.9);box-shadow: 2px 2px 4px #000;margin: 30px;border-radius: 10px;">HTML</a>
<a href="https://ameblo.jp/try-chika/theme-10109277393.html" style="display:inline-block; padding:10px 30px; background-color: rgba(255,255,255,.9);box-shadow: 2px 2px 4px #000;margin: 30px;border-radius: 10px;">CSS</a>
</nav>
<!-- a要素はそのままだとサイズの変更がきかないため、display:inline-blockを指定してデザインをいじってます。要素によりdisplayの指定が必要なことは多いので、必要に応じて調べるのが吉です。-->
</div>