レイアウト補助（囲み・センター）

レイアウト補助（囲み・センター）

アフィリエイトリンク(広告)がありますのでご了承ください。

※ 下記のCSSはそのままコピーしてご利用いただけます。 他テーマでも使用可能です。

Lilac Bloom レイアウト補助デザイン集（全10種）

中央寄せ、全幅背景、回り込みなど、記事の構成を美しく整えるためのクラス集です。これらを活用することで、単調な文章の羅列から卒業できます。

1. 強力なセンター寄せ（画像・ボタン用）

中央に配置されたボタン

画像やボタンを完全に中央へ配置します。


[title]HTML: センター寄せ[/title]
<div class="lb-layout-center">
	<a href="#" class="lb-btn-standard">中央に配置されたボタン</a>
	<p style="margin-top:10px;">画像やボタンを完全に中央へ配置します。</p>
</div>


[title]CSS: センター寄せ[/title]
.lb-layout-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin: 20px 0;
}

2. シンプルな二段組み（レスポンシブ）

左側のコンテンツ。説明文など。
右側のコンテンツ。画像など。


[title]HTML: 二段組み[/title]
<div class="lb-layout-flex">
	<div class="lb-flex-item" style="background:#f9f5ff; padding:10px;">左側のコンテンツ。説明文など。</div>
	<div class="lb-flex-item" style="background:#f1e9ff; padding:10px;">右側のコンテンツ。画像など。</div>
</div>


[title]CSS: 二段組み[/title]
.lb-layout-flex {
	display: flex;
	gap: 20px;
	flex-wrap: wrap; /* スマホでは縦並び */
}

.lb-flex-item {
	flex: 1;
	min-width: 250px;
}

3. 淡い背景のワイド区切り

ここは背景色が付いたワイドなセクションです。章の切り替わりなどに最適です。


[title]HTML: ワイド背景[/title]
<div class="lb-layout-wide-bg">
	<p>ここは背景色が付いたワイドなセクションです。章の切り替わりなどに最適です。</p>
</div>


[title]CSS: ワイド背景[/title]
.lb-layout-wide-bg {
	background: #f8f6fc;
	padding: 40px 20px;
	margin: 30px -5%; /* コンテンツ幅より少し広げる */
	border-top: 1px solid #e0d5f5;
	border-bottom: 1px solid #e0d5f5;
}

4. キャプション付きフレーム

画像ダミー

▲ ここに画像の説明文（キャプション）が入ります


[title]HTML: フレーム[/title]
<div class="lb-layout-frame">
	<div style="background:#ddd; height:100px; display:flex; align-items:center; justify-content:center;">画像ダミー</div>
	<p class="lb-frame-caption">▲ ここに画像の説明文（キャプション）が入ります</p>
</div>


[title]CSS: フレーム[/title]
.lb-layout-frame {
	border: 1px solid #ddd;
	padding: 10px;
	background: #fff;
	display: inline-block;
}

.lb-frame-caption {
	font-size: 0.85em;
	color: #666;
	margin-top: 8px;
	text-align: center;
}

5. おしゃれな引用（大文字クォート）

AIを使いこなすことは、未来の「読み・書き・そろばん」である。 


[title]HTML: 引用[/title]
<blockquote class="lb-layout-quote">
	AIを使いこなすことは、未来の「読み・書き・そろばん」である。
</blockquote>


[title]CSS: 引用[/title]
.lb-layout-quote {
	position: relative;
	padding: 30px 20px;
	background: #fff;
	border-left: 8px solid #bd93f9;
	font-style: italic;
}

.lb-layout-quote::before {
	content: "“";
	position: absolute;
	top: -10px; left: 10px;
	font-size: 60px; color: #f1e9ff;
}

6. メディアオブジェクト（横並び）

💡
ヒント：

アイコンとテキストを綺麗に横並びにするレイアウトです。


[title]HTML: メディア[/title]
<div class="lb-layout-media">
	<div class="lb-media-img">💡</div>
	<div class="lb-media-body">
		<strong>ヒント：</strong>
		<p>アイコンとテキストを綺麗に横並びにするレイアウトです。</p>
	</div>
</div>


[title]CSS: メディア[/title]
.lb-layout-media {
	display: flex;
	align-items: flex-start;
	gap: 15px;
}

.lb-media-img {
	font-size: 2em;
	background: #f9f5ff;
	border-radius: 50%;
	padding: 10px;
}

7. 右寄せのサブテキスト（メモ）

※ 2026年1月現在の情報です


[title]CSS: 右寄せメモ[/title]
<div class="lb-layout-right-content">
	<div class="lb-layout-right-memo">※ 2026年1月現在の情報です</div>
</div>


[title]CSS: 右寄せメモ[/title]
.lb-layout-right-content {
	text-align:right;
}

.lb-layout-right-memo {
	display: inline-block;
	font-size: 0.8em;
	color: #888;
	border-bottom: 1px solid #ddd;
	padding-bottom: 2px;
}

8. ホバーで浮き出すカード囲み

関連記事のタイトル

記事の要約文がここに入ります。全体がカードとして強調されます。


[title]HTML: カード囲み[/title]
<div class="lb-layout-card">
	<h5>関連記事のタイトル</h5>
	<p>記事の要約文がここに入ります。全体がカードとして強調されます。</p>
</div>


[title]CSS: カード囲み[/title]
.lb-layout-card {
	padding: 20px;
	border: 1px solid #eee;
	border-radius: 12px;
	transition: 0.3s;
	cursor: pointer;
}

.lb-layout-card:hover {
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	transform: translateY(-3px);
}

9. 縦線セパレーター（情報の区切り）

前段の話

結論はこちら


[title]HTML: 縦線[/title]
<div class="lb-layout-center">
	<p>前段の話</p>
	<div class="lb-layout-v-line"></div>
	<p>結論はこちら</p>
</div>


[title]CSS: 縦線[/title]
.lb-layout-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin: 20px 0;
}

.lb-layout-v-line {
	width: 2px;
	height: 40px;
	background: #bd93f9;
	margin: 15px 0;
}

10. 注目！グラデーション枠囲み

ここを一番読んでほしい！という箇所に使う、豪華な枠線デザインです。


[title]HTML: グラデ枠[/title]
<div class="lb-layout-grad-border">
	<p>ここを一番読んでほしい！という箇所に使う、豪華な枠線デザインです。</p>
</div>


[title]CSS: グラデ枠[/title]
.lb-layout-grad-border {
	padding: 20px;
	background: #fff;
	border: 4px solid transparent;
	border-image: linear-gradient(45deg, #bd93f9, #ff79c6);
	border-image-slice: 1;
}

💡 調整のコツ
色は #bd93f9（標準的なライラック）を使用しています。サイトのロゴやメインカラーに合わせて、これらのカラーコードを書き換えるだけで、独自のブランドカラーに統一できます。