画像＋テキスト装飾

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

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

Lilac Bloom 画像＋テキストデザイン集（全10種）

画像とテキストを効果的に組み合わせるためのレイアウトです。記事に視覚的な魅力を加え、情報をより印象的に伝えます。

1. 右に画像、左にテキスト（レスポンシブ対応）

AIで効率アップ！

当ブログのテーマは、AIを活用してWeb制作を効率化することです。煩雑なコーディング作業はAIに任せて、コンテンツ制作に集中できます。


[title]HTML: 右に画像、左にテキスト（レスポンシブ対応）[/title]
<div class="lb-img-text-right">
	<div class="lb-img-body">
		<h5>AIで効率アップ！</h5>
		<p>当ブログのテーマは、AIを活用してWeb制作を効率化することです。煩雑なコーディング作業はAIに任せて、コンテンツ制作に集中できます。</p>
	</div>
	<div class="lb-img-media"></div>
</div>


[title]CSS: 右に画像、左にテキスト（レスポンシブ対応）[/title]
.lb-img-text-right {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	margin: 20px 0;
}

.lb-img-text-right .lb-img-body {
	flex: 1;
	min-width: 280px;
}

.lb-img-text-right .lb-img-media {
	background-image:url('/Lilac-Bloom/wp-content/uploads/2026/01/DSC_0890-scaled.jpg');
	width: 150px;
	height: 150px;
	flex-shrink: 0;
	margin-left: auto;
	border-radius: 8px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

2. 左に画像、右にテキスト（レスポンシブ対応）

Lilac Bloomテーマ

シンプルながらも洗練されたデザインが特徴です。初心者でも迷わず使える管理画面で、記事作成に集中できます。


[title]HTML: 左に画像、右にテキスト（レスポンシブ対応）[/title]
<div class="lb-img-text-left">
	<div class="lb-img-media"></div>
	<div class="lb-img-body">
		<h5>Lilac Bloomテーマ</h5>
		<p>シンプルながらも洗練されたデザインが特徴です。初心者でも迷わず使える管理画面で、記事作成に集中できます。</p>
	</div>
</div>


[title]CSS: 左に画像、右にテキスト（レスポンシブ対応）[/title]
.lb-img-text-left {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	margin:
	20px 0;
}

.lb-img-text-left .lb-img-body {
	flex: 1;
	min-width: 280px;
}

.lb-img-text-left .lb-img-media {
	background-image:url('/Lilac-Bloom/wp-content/uploads/2026/01/DSC_0890-scaled.jpg');
	width: 150px;
	height: 150px;
	flex-shrink: 0;
	margin-right: auto;
	border-radius: 8px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

3. 上に画像、下にキャプション（影付き）

▲AIが生成した未来のウェブサイトイメージ。


[title]HTML: 上に画像、下にキャプション（影付き）[/title]
<div class="lb-img-caption-shadow">
	<img src="/Lilac-Bloom/wp-content/uploads/2026/01/DSC_0890-scaled.jpg" alt="サンプル画像">
	<p class="lb-caption">▲AIが生成した未来のウェブサイトイメージ。</p>
</div>


[title]CSS: 上に画像、下にキャプション（影付き）[/title]
.lb-caption {
	font-size: 0.85em;
	color: #666;
	margin-top: 8px;
	text-align: center;
}

.lb-img-caption-shadow {
	background: #fff;
	padding: 10px;
	border-radius: 8px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	margin: 20px 0;
}

.lb-img-caption-shadow img {
	max-width: 100%;
	height: auto;
	display: block;
}

4. 全幅背景画像（セクション区切り）

新しい章の始まり

次のテーマは、プロンプトエンジニアリングの極意です。


[title]HTML: 全幅背景画像（セクション区切り）[/title]
<div class="lb-img-full-bg">
	<h3>新しい章の始まり</h3>
	<p>次のテーマは、プロンプトエンジニアリングの極意です。</p>
</div>


[title]CSS: 全幅背景画像（セクション区切り）[/title]
.lb-img-full-bg {
	background-image:url('/Lilac-Bloom/wp-content/uploads/2026/01/DSC_0883-scaled.jpg');
	padding: 50px 20px;
	text-align: center;
	color: #fff;
	background-blend-mode: multiply;
	background-color: rgba(0,0,0,0.4);
	margin: 30px -20px;
}

.lb-img-full-bg h3 {
	color: #fff;
	margin-top: 0;
}

.lb-img-full-bg p {
	color: #fff;
	margin-bottom: 0;
}

5. アイコン付き吹き出し（ミニ解説）

これは補足情報です。AIに関する豆知識など。


 [title]HTML: アイコン付き吹き出し（ミニ解説）[/title]
 <div class="lb-img-speech-icon">
	 <div class="lb-icon"></div>
	 <div class="lb-speech-text">これは補足情報です。AIに関する豆知識など。</div>
 </div>


 [title]CSS: アイコン付き吹き出し（ミニ解説）[/title]
.lb-img-speech-icon { 
	display: flex;
	align-items: flex-start;
	gap: 15px;
	margin: 20px 0;
}

.lb-img-speech-icon .lb-icon {
	background-image:url('/Lilac-Bloom/wp-content/uploads/2026/01/DSC_0890-scaled.jpg');
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.lb-img-speech-icon .lb-speech-text {
	background: #f1e9ff;
	border-radius: 20px;
	padding: 10px 20px;
	position: relative;
	color: #6a5acd;
}

.lb-img-speech-icon .lb-speech-text::before {
	content: "";
	position: absolute;
	left: -10px;
	top: 15px;
	border: 8px solid transparent;
	border-right: 8px solid #f1e9ff;
}

6. 丸形画像＋下に名前（プロフィール）

AIアシスタント


[title]HTML: 丸形画像＋下に名前（プロフィール）[/title]
<div class="lb-img-profile">
	<div class="lb-profile-img"></div>
	<p class="lb-profile-name">AIアシスタント</p>
</div>


[title]CSS: 丸形画像＋下に名前（プロフィール）[/title]
.lb-img-profile {
	text-align: center;
	margin: 20px 0;
}

.lb-img-profile .lb-profile-img {
	background-image:url('/Lilac-Bloom/wp-content/uploads/2026/01/DSC_0890-scaled.jpg');
	width: 80px;
	height: 80px;
	border-radius: 50%;
	margin: 0 auto 10px;
	border: 2px solid #bd93f9;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.lb-img-profile .lb-profile-name {
	font-weight: bold;
	color: #333;
	margin: 0;
}

7. 左右に並んだカード型（比較・選択肢）

Option A

従来のやり方で進める。

Option B

AIを活用して効率化する。


[title]HTML: 左右に並んだカード型（比較・選択肢）[/title]
<div class="lb-img-card-row">
	<div class="lb-card-item">
		<img src="/Lilac-Bloom/wp-content/uploads/2026/01/DSC_0890-scaled.jpg" alt="Option A">
		<h5>Option A</h5>
		<p>従来のやり方で進める。</p>
	</div>
	<div class="lb-card-item">
		<img src="/Lilac-Bloom/wp-content/uploads/2026/01/DSC_0884-scaled.jpg" alt="Option B">
		<h5>Option B</h5>
		<p>AIを活用して効率化する。</p>
	</div>
</div>


[title]CSS: 左右に並んだカード型（比較・選択肢）[/title]
.lb-img-card-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	margin: 20px 0;
}

.lb-img-card-row .lb-card-item {
	flex: 1;
	min-width: 180px;
	max-width: 250px;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 15px;
	text-align: center;
	background: #fff;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.lb-img-card-row .lb-card-item img {
	width:100px;
	height: auto;
	margin-bottom: 10px;
}

.lb-img-card-row .lb-card-item h5 {
	margin: 0 0 5px;
	color: #bd93f9;
}

.lb-img-card-row .lb-card-item p {
	font-size: 0.9em;
	color: #666; margin: 0;
}

8. ポップアップ（ズームイン）画像


[title]HTML: ポップアップ（ズームイン）画像[/title]
<div class="lb-img-popup">
	<img src="/Lilac-Bloom/wp-content/uploads/2026/01/DSC_0890-scaled.jpg" alt="クリックで拡大" style="width:100%; height:auto;">
	<p>※クリックすると拡大するような演出</p>
</div>


[title]CSS: ポップアップ（ズームイン）画像[/title]
.lb-img-popup {
	margin: 20px auto;
	max-width: 400px;
	text-align: center;
}

.lb-img-popup img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	transition: transform 0.3s ease;
	cursor: zoom-in;
}

.lb-img-popup img:hover {
	transform: scale(1.05);
}

.lb-img-popup p {
	font-size: 0.8em;
	color: #888;
	margin-top: 5px;
}

9. グラデーションオーバーレイ

AI時代のブログ運営

効率と品質を両立させる秘訣


[title]HTML: グラデーションオーバーレイ[/title]
<div class="lb-img-overlay">
	<div class="lb-overlay-text">
		<h3>AI時代のブログ運営</h3>
		<p>効率と品質を両立させる秘訣</p>
	</div>
</div>


[title]CSS: グラデーションオーバーレイ[/title]
.lb-img-overlay {
	background-image:url('/Lilac-Bloom/wp-content/uploads/2026/01/DSC_0883-scaled.jpg');
	position: relative;
	padding: 50px 20px;
	text-align: center;
	background-blend-mode: multiply;
	background-color: rgba(189,147,249,0.6);
	color: #fff;
	margin: 30px -20px;
}

.lb-img-overlay .lb-overlay-text {
	position: relative;
	z-index: 1;
}

.lb-img-overlay h3 {
	color: #fff;
	margin-top: 0;
}

.lb-img-overlay p {
	color: #fff;
	margin-bottom: 0;
}

10. 無限ループ・カルーセル（自動スライド）

※スクロールバーなし・自動無限ループ実装済み


[title]HTML: 無限ループ・カルーセル（自動スライド）[/title]
<div class="lb-slider-container">
	<div class="lb-slider-inner" id="loopSlider">
		<div class="lb-slide-item" style="background-image:url('/Lilac-Bloom/wp-content/uploads/2026/01/DSC_0890-scaled.jpg');"></div>
		<div class="lb-slide-item" style="background-image:url('/Lilac-Bloom/wp-content/uploads/2026/01/DSC_0884-scaled.jpg');"></div>
		<div class="lb-slide-item" style="background-image:url('/Lilac-Bloom/wp-content/uploads/2026/01/DSC_0883-scaled.jpg');"></div>
	</div>
</div>
<p style="text-align:center; font-size:0.8em; color:#888; margin-top:10px;">※スクロールバーなし・自動無限ループ実装済み</p>


[title]CSS: 無限ループ・カルーセル（自動スライド）[/title]
.lb-slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
}

.lb-slider-inner {
    display: flex;
    overflow-x: auto; /* 一時的にスクロールを許可 */
    white-space: nowrap;
    
    /* スクロールバーを隠す設定（主要ブラウザすべてに対応） */
    -ms-overflow-style: none; /* IE, Edge */
    scrollbar-width: none;    /* Firefox */
}

.lb-slider-inner::-webkit-scrollbar {
    display: none;
}

.lb-slide-item {
    flex: 0 0 300px; /* 横幅300pxで固定 */
    height: 180px;
    margin: 10px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 600px) {
    .lb-slide-item {
        flex: 0 0 250px;
        height: 150px;
    }
}


[title]JavaScript: 無限ループ・カルーセル（自動スライド）[/title]
document.addEventListener("DOMContentLoaded", function () {
    const slider = document.getElementById("loopSlider");
    if (!slider) return;

    // 無限ループを実現するために、中身の画像を複製して繋げる
    const items = [...slider.children];
    items.forEach(item => {
        const clone = item.cloneNode(true);
        slider.appendChild(clone);
    });

    let scrollLeft = 0;
    const speed = 1; // 数字を大きくすると速くなります（0.5〜2くらいがおすすめ）

    function loop() {
        scrollLeft += speed;
        
        // 元のコンテンツ量（全体の半分）まで進んだら、瞬時に左端（0）へ戻る
        // これにより、ユーザーにはループしているように見えます
        if (scrollLeft >= slider.scrollWidth / 2) {
            scrollLeft = 0;
        }
        
        slider.scrollLeft = scrollLeft;
        
        // ブラウザの描画タイミングに合わせて実行（非常に滑らかに動きます）
        requestAnimationFrame(loop);
    }

    // 自動スライド開始
    loop();
});

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