記憶の箱舟 WPで画像に額縁を付ける方法
例えば、「phot」と「furusato」のカテゴリー投稿ページで、「サイズの違う画像」全てに「サイズにフィットする額縁」を付けるCSS。
「Cocoon子テーマのstyle.css」 または「外観 → カスタマイズ → 追加CSS」に貼り付けて使う想定場合。
/********************************************
* phot・furusatoカテゴリ投稿の画像を額縁風にするCSS
* （画像の元サイズは不問で、その大きさにフィット）
********************************************/
/* 1) 対象ページ：カテゴリ phot, furusato の投稿ページのみ */
body.single.category-phot .entry-content img,
body.single.category-furusato .entry-content img {
/* inline-block にして、画像を一つの“箱”として扱う */
display: inline-block;
/* 額の内側（マット部分）の色：画像の周囲に余白を作る */
background-color: #fffbe8; /* 好みで変更可：薄いクリーム色など */
/* マット部分の幅（画像と内枠線の間の余白） */
padding: 8px;
/* 内枠線（細めのフレーム） */
border: 4px solid #c0b49a; /* 色・太さはお好みで */
/* 枠の計算をしやすくするための指定（基本このままでOK） */
box-sizing: border-box;
/* 複数の box-shadow を重ねて、“中間色＋外枠線” を表現 */
box-shadow:
0 0 0 4px #f0e6d8, /* 内枠と外枠の間の色（中間色） */
0 0 0 10px #8a7b5a; /* 一番外側の枠線（太めのフレーム） */
/* 画像同士がくっつきすぎないように外側の余白を追加（任意） */
margin: 12px;
}
/********************************************
* phot・furusatoカテゴリ投稿ページの背景色を変更
********************************************/
body.single.category-phot,
body.single.category-furusato {
/* ページ全体の背景色：額縁と相性の良い淡い色に */
background-color: #f5f1e8; /* お好みで変更可 */
}
このCSSのポイント
・ スラッグが phot/furusato の「投稿ページ」に限定して効く。
・ entry-content img⇒投稿本文内のすべての を対象にし、画像サイズ関係なく自動で額縁が付く。
・額縁の「太さ」「色」「マット幅」を変えたい場合は、それぞれで。
padding（マット幅）
border（内枠線の太さ・色）
box-shadow内の色・数値
投稿ページのカスタムCSS版
各投稿編集画面の下部にある「カスタムCSS」欄での設定。
/********************************************
* この投稿ページの画像を額縁風にするCSS
* （カテゴリ条件なし：この投稿内画像すべてに適用）
********************************************/
/* この投稿ページの本文画像すべてに額縁 */
.entry-content img {
display: inline-block;
background-color: #fffbe8; /* 額の内側の色 */
padding: 8px; /* マット幅 */
border: 4px solid #c0b49a; /* 内枠線 */
box-sizing: border-box;
box-shadow:
0 0 0 4px #f0e6d8, /* 中間色 */
0 0 0 10px #8a7b5a; /* 外枠線 */
margin: 12px; /* 画像同士の間隔 */
}
/* この投稿ページの背景色 */
body.single.postid-[POST-ID] {
background-color: #f5f1e8;
}
・重要:最後の)postid-[POST-ID] を実際の投稿IDに置き換えてください。
(投稿編集画面のURLにpost=123 のような数字がID)
・優先順位（重複時の動作）
1位：投稿ごとのカスタムCSS（最も優先）
2位：カスタマイズの追加CSS
3位：子テーマ style.css
おすすめ運用
① phot/furusatoカテゴリの「多くの投稿」で共通 → カスタマイズ追加CSS
② たまに例外デザイン → 各投稿のカスタムCSSで上書き
より安全な「投稿カスタムCSS」版(カテゴリ条件付き)
投稿ごとのカスタムCSSにこれを書けば、「この投稿がphotかfurusatoなら効く」仕様になります。
/* この投稿が phot または furusato カテゴリの場合のみ額縁 */
body.category-phot .entry-content img,
body.category-furusato .entry-content img {
display: inline-block;
background-color: #fffbe8; /* 額の内側の色 */
padding: 8px; /* マット幅 */
border: 4px solid #c0b49a; /* 内枠線 */
box-sizing: border-box;
box-shadow:
0 0 0 4px #f0e6d8, /* 中間色 */
0 0 0 10px #8a7b5a; /* 外枠線 */
margin: 12px; /* 画像同士の間隔 */
}
/* この投稿ページの背景色 */
body.category-phot,
body.category-furusato {
background-color: #f5f1e8;
}
この場合、カテゴリ条件があるので、他の投稿には効かない。追加CSS版と共存しても安全。
結論:まずは「カスタマイズ追加CSS」に全体版を入れ、必要に応じて個別投稿で上書きするのが管理しやすい。
