Blogger の Contempo テーマは標準だとサイドバーを完全に消せず、最小でも100px幅が残ってしまいます。
でも、CSSとHTMLを少し調整すれば サイドバーを非表示にして1カラム化、さらに 記事下にウィジェット置き場を新設 できます。
ステップ1：元のレイアウトを保存しておく
いじる前に、必ずレイアウトをバックアップしておくと安心です。
管理画面 → テーマ → 三点メニュー → HTMLをバックアップ をクリック。
「テーマをダウンロード」してPCに保存。
これで、万一レイアウトが崩れてもすぐに戻せます。
ステップ2：サイドバーを完全に消すCSS
「テーマ → カスタマイズ → 詳細 → 追加CSS」に以下をコピペします。
/* サイドバーを完全非表示にする */
.sidebar-container,
.sidebar,
#sidebar,
#sidebar-wrapper,
.sidebar_top,
.sidebar-right {
display: none !important;
width: 0 !important;
max-width: 0 !important;
min-width: 0 !important;
overflow: hidden !important;
}
/* メインカラムを全幅に */
.main-container,
.main,
#main-wrapper {
width: 100% !important;
max-width: 100% !important;
}
/* Flexの余白調整 */
.main-container {
flex: 1 1 100% !important;
}
これでサイドバーが完全に消え、記事だけが表示されます。
サイドバーが消えても、その分右に寄ってしまっているので、「テーマ → カスタマイズ → 詳細 → 幅」でサイドバーを最小サイズにします。
サイドバーがなくなってもモバイルで見たときにハンバーガーメニューが残ってしまうので、それを消すには以下のコードを「テーマ → カスタマイズ → 詳細 → 追加CSS」に追加します。
/* モバイルのハンバーガーメニューを非表示 */
.hamburger-menu {
display: none !important;
}ステップ3：記事下にウィジェット置き場を作る
管理画面 → テーマ → HTMLの編集 を開く。 </main>で検索し、以下のような記述を探す。
</b:section>
</main>
</b:section>の後（</main>の前）に以下を追加：
<b:section id='below-post' class='below-post' maxwidgets='5' showaddelement='yes' name='記事下ウィジェット'/>
これを入れると「レイアウト」画面に 記事下（below-post） という新しいエリアが出現します。
そこにガジェット（例えば連絡先など）を追加すれば、サイドバーの代わりにメールフォームを記事の下へ配置できます。
Contempo テーマをシンプルな1カラムに変えて、記事の下にプロフィールやバナーを並べたい人におすすめです✨
おまけ
記事下のメールフォームをいい感じにサイズ調整するには以下を追加CSSに入れてみてください。
.contact-form-widget{
max-width: 720px; /* デスクトップ時の最大幅 */
margin: 16px auto; /* 中央寄せ */
padding: 16px;
background: #fff;
border: 1px solid #eee;
border-radius: 8px;
box-sizing: border-box;
}
.contact-form-widget,
.contact-form-widget input,
.contact-form-widget textarea,
.contact-form-widget button,
.contact-form-widget .contact-form-button{
font-size: 16px;
line-height: 1.6;
}
.contact-form-widget input[type="text"],
.contact-form-widget input[type="email"],
.contact-form-widget textarea{
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
padding: 10px 12px;
border: 1px solid #ddd;
border-radius: 6px;
background: #fff;
}
.contact-form-widget textarea{
min-height: 50px;
resize: vertical;
}
.contact-form-widget data\:contactFormNameMsg,
.contact-form-widget data\:contactFormEmailMsg,
.contact-form-widget data\:contactFormMessageMsg{
display: block;
margin: 8px 0 4px;
font-weight: 600;
}
.contact-form-widget input[type="text"]:focus,
.contact-form-widget input[type="email"]:focus,
.contact-form-widget textarea:focus{
outline: none;
border-color: #E4F7FF;
box-shadow: 0 0 0 3px rgba(228,247,255,.6);
}
.contact-form-widget .contact-form-success-message{
color: #2f7d32;
margin-top: 8px;
}
.contact-form-widget .contact-form-error-message{
color: #b00020;
margin-top: 8px;
}
/* ========== レスポンシブ ========== */
@media (max-width: 767px){
.contact-form-widget{
max-width: 100%;
margin: 12px auto;
padding: 12px;
border-radius: 6px;
}
.contact-form-widget .contact-form-button,
.contact-form-widget .contact-form-button-submit{
max-width: 100%;
}
}