/* ========================================================================= jiyucho-archive-embed.css ------------------------------------------------------------------------- 元の完成版HTMLの `body{...}` ルールを、サイト全体のではなくショートコード出力の外枠 `.jiyucho-archive-page` に付け替えたもの。宣言の中身(背景画像URL・センタリング方法など)は無変更。見出し・説明文・戻るリンク用のスタイルは、完成版デザインに存在しない要素のため削除済み。 ========================================================================= */ /* ---- 言語切替iframe(global-lang-buttons.html)周辺の余白リセット ---- WordPressのエディタ/テーマ(Cocoon等)は、本文中に置かれた要素を自動で

タグ等で囲むことが多く、その際に上下marginが付いて iframeの下に隙間が生まれやすい。ここでは実際に設置されているiframe(src末尾のファイル名で特定)自体に display:blockを指定して「インライン要素特有の下端の隙間」を消し、 marginも明示的に0にしている。 ※WordPress側の具体的なテーマ・レイアウト構造(pタグでの自動ラップの有無や構造)はこちらから直接確認できないため、テーマ側のCSSが優先されてしまいこの指定だけでは隙間が消えきらない場合は、実際にブラウザの検証ツールで隙間を作っている要素を特定のうえ、個別のセレクタを追加させてください。 */ iframe[src*="global-lang-buttons"]{ display:block !important; margin:0 !important; padding:0 !important; vertical-align:top !important; } /* ---- 全画面(画面幅いっぱい)の背景 ---- WordPressのテーマ側コンテナ(.entry-content等)の横幅制限を突き破って画面幅いっぱいに背景を広げるための、いわゆる「フルブリード」テクニック。 box-sizing:border-box を付けているのは、padding分だけ 100vw をはみ出して横スクロールバーが出てしまうのを防ぐため(ここが無いと数十pxだけ右に余白が生まれ、横スクロールが発生することがある)。 margin-top はテーマ側で吸収しきれない残りの隙間を強制的に詰めるためのネガティブマージン。実機のテーマの余白量によって最適値が変わるため、隙間が残る/詰まりすぎる場合はこの数値(-24px)を調整してください。 */ .jiyucho-archive-page{ position:relative; left:50%; width:100vw; transform:translateX(-50%); margin-left:0; margin-right:0; margin-top:-24px; box-sizing:border-box; background-image: url('https://fukabori-colors.com/wp-content/uploads/2026/08/Gemini_Generated_Image_u9vqrtu9vqrtu9vq.webp'); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 12px; } /* ---- 自由帳ウィジェットの実寸コンテナ ---- ショートコードが出力する空div(#jiyucho-archive-widget-N)に幅の基準が無いと、中の .jiyucho-root(width:100%; max-width:440px;)がパーセント指定の基準を見失い、意図した440pxまで広がらずに要素本来の最小サイズへ縮んでしまう。ここで「広がってよい範囲」を明示することで、実機確認の結果として決定した440px(スマホ・PC双方でバランスが良いサイズ)まで確実に広がるようにしている。 */ .jiyucho-archive-page > div{ width:100%; max-width:440px; margin:0 auto; }