```
↓ 以下のように書き換えます
```html
```
#### 場所3：ギャラリー右側の画像
```html
```
#### 場所4：瀧本 顕様のプロフィール写真
```html
```
### 3-4. 変更を保存
1. すべてのURLを書き換えたら、ページ右上の **「更新」** ボタンをクリックします。
2. ページが更新されます。
---
## 動作確認
### ページの表示を確認
1. WordPress管理画面から、LPを設置した固定ページを開きます。
2. ページ上部の **「ページを表示」** リンクをクリックして、実際のページを確認します。
3. 以下の点をチェックしてください：
- メイン背景画像が表示されているか
- ギャラリーの2つの画像が表示されているか
- 瀧本 顕様のプロフィール写真が表示されているか
- 価格表がクリックできるか
- クリックするとフォームセクションにスクロールするか
### 価格表の動作確認
1. ページ上の価格表の任意の行をクリックしてみてください。
2. 以下の動作が確認できるはずです：
- クリックした行がハイライト（背景色が変わる）される
- ページが自動的にお問い合わせフォームセクションにスクロールする
- フォーム上部に「ご希望の版とサイズ」として、選択した内容が表示される
### フォームの動作確認
1. 名前、メールアドレス、ご相談内容を入力してみてください。
2. 「お問い合わせを送信する」ボタンをクリックします。
3. 確認メッセージが表示されれば、フォーム機能は正常に動作しています。
---
## トラブルシューティング
### Q. デザインが崩れている、または表示されない
**A.** 以下をご確認ください：
- ステップ1でCSSコードが正しく保存されたか
- TCDテーマオプションの「保存」ボタンをクリックしたか
- ブラウザのキャッシュをクリアして、再度ページを読み込んでください（Ctrl+Shift+Delete）
### Q. 画像が表示されない
**A.** 以下をご確認ください：
- 画像のURLが正しくコピーされたか
- URLの前後に余分なスペースがないか
- 画像ファイルがWordPressのメディアライブラリに正しくアップロードされたか
### Q. 価格表がクリックできない
**A.** 以下をご確認ください：
- HTMLコードが完全に貼り付けられたか
- JavaScriptエラーがないか（ブラウザの開発者ツール（F12）で確認）
### Q. フォームが送信できない
**A.** 以下をご確認ください：
- 必須項目（お名前、メールアドレス、ご相談内容）が入力されているか
- メールアドレスの形式が正しいか
---
## さらなるカスタマイズ
### テキスト内容の変更
HTMLコード内の以下の部分を編集することで、テキスト内容を自由に変更できます：
- キャッチコピー：「思い通りの色を、そのままに」
- セクションタイトル：「作品ギャラリー」「プロフェッショナルの声」など
- 特徴説明：「圧倒的な再現性」などの説明文
- 価格表の内容
### 色やフォントサイズの調整
CSSコード内の以下の部分を編集することで、デザインを調整できます：
- 色：`#1a1512`（濃い茶色）、`#fff`（白）など
- フォントサイズ：`font-size: 42px` など
---
## ご質問・ご不明な点
何かご不明な点やお困りのことがございましたら、いつでもお気軽にお申し付けください。
Manusのコンピューター
Manus はエディタを使用しています
タスクの進捗
3 / 3
TCDテーマ「STORY」用・カスタムCSSとHTMLの分離設計
STORY専用・2ステップコピペ用コードの作成（画像URL目印付き）
最終完成版コードと導入手順（TCDテーマ用）の提供
tcd_story_custom_css.css
/* ========================================
TCDテーマ「STORY」用カスタムCSS
エンハンスド・アートフォトプリント LP
======================================== */
/* ========== ヒーローセクション ========== */
.art-print-hero-section {
position: relative;
height: 100vh;
min-height: 600px;
background: linear-gradient(135deg, #1a1512 0%, #2d2420 100%);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
overflow: hidden;
}
.art-print-hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
background-position: center;
opacity: 0.5;
z-index: 1;
}
.art-print-hero-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(26, 21, 18, 0.7) 0%, rgba(45, 36, 32, 0.6) 100%);
z-index: 1;
}
.art-print-hero-content {
position: relative;
z-index: 2;
max-width: 900px;
padding: 20px;
}
.art-print-hero-content h1 {
font-size: 64px;
font-weight: 300;
letter-spacing: 0.15em;
margin-bottom: 30px;
line-height: 1.3;
}
.art-print-hero-content p {
font-size: 20px;
font-weight: 300;
letter-spacing: 0.05em;
margin-bottom: 50px;
color: #ddd;
}
.art-print-hero-cta {
display: inline-block;
padding: 16px 45px;
background-color: #fff;
color: #1a1512;
text-decoration: none;
font-weight: 600;
letter-spacing: 0.1em;
border-radius: 4px;
transition: all 0.3s ease;
cursor: pointer;
font-size: 15px;
border: none;
}
.art-print-hero-cta:hover {
background-color: #f0f0f0;
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
/* ========== セクション共通 ========== */
.art-print-section {
padding: 80px 20px;
max-width: 1200px;
margin: 0 auto;
}
.art-print-section h2 {
font-size: 42px;
font-weight: 300;
text-align: center;
margin-bottom: 60px;
letter-spacing: 0.1em;
}
/* ========== 作例ギャラリーセクション ========== */
.art-print-gallery-section {
background-color: #fff;
padding: 80px 20px;
}
.art-print-gallery-section h2 {
color: #1a1512;
}
.art-print-gallery-container {
max-width: 1100px;
margin: 0 auto;
}
.art-print-gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 40px;
margin-bottom: 60px;
}
.art-print-gallery-item {
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 8px 25px rgba(0,0,0,0.12);
transition: all 0.3s ease;
cursor: pointer;
aspect-ratio: 3/4;
}
.art-print-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.art-print-gallery-item:hover img {
transform: scale(1.02);
}
.art-print-gallery-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(26, 21, 18, 0.9), transparent);
padding: 40px 20px 20px;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.art-print-gallery-item:hover .art-print-gallery-overlay {
transform: translateY(0);
}
.art-print-gallery-title {
font-size: 18px;
font-weight: 600;
color: #fff;
margin-bottom: 8px;
}
.art-print-gallery-description {
font-size: 13px;
color: #ddd;
line-height: 1.6;
}
.art-print-gallery-subtitle {
text-align: center;
font-size: 16px;
color: #666;
margin-bottom: 40px;
font-style: italic;
}
/* ========== 作家レビューセクション ========== */
.art-print-reviews-section {
background-color: #f9f9f9;
}
.art-print-review-container {
max-width: 900px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.art-print-review-image {
text-align: center;
}
.art-print-review-image img {
width: 100%;
max-width: 350px;
border-radius: 8px;
box-shadow: 0 8px 25px rgba(0,0,0,0.12);
object-fit: cover;
}
.art-print-review-content {
padding: 20px;
}
.art-print-photographer-title {
font-size: 13px;
color: #999;
letter-spacing: 0.1em;
margin-bottom: 10px;
text-transform: uppercase;
}
.art-print-photographer-name {
font-size: 32px;
font-weight: 600;
color: #1a1512;
margin-bottom: 8px;
}
.art-print-jps-badge {
display: inline-block;
font-size: 12px;
color: #fff;
background-color: #1a1512;
padding: 6px 12px;
border-radius: 4px;
margin-bottom: 25px;
letter-spacing: 0.05em;
}
.art-print-review-quote {
font-size: 17px;
color: #555;
font-style: italic;
margin-bottom: 25px;
line-height: 1.9;
position: relative;
padding-left: 30px;
border-left: 4px solid #1a1512;
}
.art-print-review-quote::before {
content: '"';
position: absolute;
left: 5px;
top: -15px;
font-size: 48px;
color: #ddd;
font-style: normal;
}
.art-print-photographer-bio {
font-size: 14px;
color: #666;
line-height: 1.8;
margin-bottom: 20px;
}
.art-print-photographer-bio strong {
color: #1a1512;
font-weight: 600;
}
.art-print-photographer-link {
display: inline-block;
color: #1a1512;
text-decoration: none;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.05em;
transition: all 0.3s ease;
border-bottom: 2px solid #1a1512;
}
.art-print-photographer-link:hover {
color: #2d2420;
border-bottom-color: #2d2420;
}
/* ========== 特徴セクション ========== */
.art-print-features-section {
background-color: #fff;
}
.art-print-features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 40px;
margin-bottom: 40px;
}
.art-print-feature-card {
background: #f9f9f9;
padding: 40px 30px;
text-align: center;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
transition: all 0.3s ease;
}
.art-print-feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}
.art-print-feature-icon {
font-size: 48px;
margin-bottom: 20px;
}
.art-print-feature-card h3 {
font-size: 22px;
margin-bottom: 15px;
color: #1a1512;
font-weight: 600;
}
.art-print-feature-card p {
font-size: 15px;
color: #666;
line-height: 1.8;
}
/* ========== 価格表セクション ========== */
.art-print-price-section {
background-color: #1a1512;
color: #fff;
}
.art-print-price-section h2 {
color: #fff;
}
.art-print-price-table-wrapper {
max-width: 900px;
margin: 0 auto;
background-color: #2d2420;
padding: 40px;
border-radius: 8px;
}
.art-print-price-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
.art-print-price-table th {
font-weight: normal;
font-size: 14px;
padding-bottom: 15px;
border-bottom: 1px solid #fff;
text-align: center;
}
.art-print-price-table th:last-child {
text-align: right;
}
.art-print-price-table tbody tr {
cursor: pointer;
transition: background-color 0.2s ease;
}
.art-print-price-table tbody tr:not(.art-print-divider-row):not(.art-print-category-row):hover {
background-color: rgba(255, 255, 255, 0.08);
}
.art-print-price-table tbody tr.art-print-selected {
background-color: rgba(255, 255, 255, 0.15);
}
.art-print-price-table td {
padding: 10px 5px;
vertical-align: top;
font-size: 15px;
}
.art-print-category-name {
text-align: center;
width: 25%;
font-size: 18px;
padding-top: 15px !important;
}
.art-print-size-info {
text-align: left;
width: 50%;
}
.art-print-size-info span {
display: inline-block;
margin-left: 15px;
color: #aaa;
}
.art-print-price {
text-align: right;
width: 25%;
}
.art-print-divider-row td {
border-top: 1px dotted #fff;
padding: 0;
height: 20px;
}
.art-print-price-footer {
font-size: 12px;
color: #aaa;
margin-top: 20px;
line-height: 1.6;
}
.art-print-selected-info {
margin-top: 20px;
padding: 15px;
background-color: rgba(255, 235, 59, 0.15);
border-left: 4px solid #ffeb3b;
border-radius: 4px;
display: none;
}
.art-print-selected-info.art-print-show {
display: block;
}
/* ========== フォームセクション ========== */
.art-print-form-section {
background-color: #f9f9f9;
}
.art-print-form-container {
max-width: 700px;
margin: 0 auto;
background: #fff;
padding: 40px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.art-print-form-group {
margin-bottom: 25px;
}
.art-print-form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #1a1512;
font-size: 14px;
}
.art-print-form-group input,
.art-print-form-group textarea,
.art-print-form-group select {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-family: inherit;
font-size: 14px;
transition: border-color 0.3s ease;
}
.art-print-form-group input:focus,
.art-print-form-group textarea:focus,
.art-print-form-group select:focus {
outline: none;
border-color: #1a1512;
box-shadow: 0 0 0 3px rgba(26, 21, 18, 0.1);
}
.art-print-form-group textarea {
resize: vertical;
min-height: 120px;
}
.art-print-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.art-print-form-row .art-print-form-group {
margin-bottom: 0;
}
.art-print-selected-size-display {
margin-bottom: 25px;
padding: 15px;
background-color: #f0f0f0;
border-left: 4px solid #1a1512;
border-radius: 4px;
display: none;
}
.art-print-selected-size-display.art-print-show {
display: block;
}
.art-print-selected-size-display p {
margin: 5px 0;
color: #333;
font-size: 14px;
}
.art-print-selected-size-display strong {
color: #1a1512;
}
.art-print-form-submit {
width: 100%;
padding: 15px;
background-color: #1a1512;
color: #fff;
border: none;
border-radius: 4px;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.1em;
cursor: pointer;
transition: all 0.3s ease;
}
.art-print-form-submit:hover {
background-color: #2d2420;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(26, 21, 18, 0.3);
}
/* ========== レスポンシブ ========== */
@media (max-width: 768px) {
.art-print-hero-content h1 {
font-size: 40px;
}
.art-print-hero-content p {
font-size: 16px;
}
.art-print-section {
padding: 50px 20px;
}
.art-print-section h2 {
font-size: 32px;
margin-bottom: 40px;
}
.art-print-gallery-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.art-print-review-container {
grid-template-columns: 1fr;
gap: 40px;
}
.art-print-features-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.art-print-size-info span {
display: block;
margin-left: 0;
font-size: 12px;
}
.art-print-price-table-wrapper {
padding: 20px;
}
.art-print-form-container {
padding: 25px;
}
.art-print-form-row {
grid-template-columns: 1fr;
}
.art-print-photographer-name {
font-size: 24px;
}
.art-print-review-quote {
font-size: 15px;
}
}
@media (max-width: 480px) {
.art-print-hero-content h1 {
font-size: 28px;
}
.art-print-hero-cta {
padding: 12px 30px;
font-size: 13px;
}
.art-print-photographer-name {
font-size: 20px;
}
.art-print-gallery-grid {
grid-template-columns: 1fr;
}
}
染織工芸家浦野理一の仕事
小津映画のきもの帖
発行日：2023/12/12
発行元：katsura books
写真：武藤奈緒美
装幀・レイアウト：櫻井久
中川あゆみ（櫻井事務所）
鈴木香代子（櫻井事務所)
判型：四六判(188×131ｍｍ）
頁数：336ｐ
製版・印刷：フルカラー
用紙：b7ナチュラル<本文>アラベールFS／スノーホワイト<カバー・見返し>ロストンカラー<表紙>
製本：上製本/ハードカバー(角背・ホローバック・右開き）
小津映画の衣装製作、雑誌「ミセス」の連載などにより、日本の和服のあり方に大きな影響を与えた染織工芸家・浦野理一の作品・製作過程を紹介する一冊。北鎌倉の自宅風景、作品各場面における衣装選考、豊富な作品サンプル等、小津映画ファンや和服愛好家の方であれば、必ず手元に置いておきたい本です。
また、小津監督から浦野におくられた手紙や月刊誌「ミセス」で昭和38年からはじまった新作きものの連載誌面、きものの織り手への直筆の製造指示書など、大変興味深い資料の数々がフルカラー写真で大きく紹介されています。
そして、小津映画を連想させるような北鎌倉の自宅や庭の写真もとても趣があり、見るたびに静謐な心持ちになります。
装丁は均整の取れた角背の上製本(ハードカバー）で、336ページのボリュームながら手に取りやすく軽やかな仕上がり。背と本体が離れているホローバック製本で開きやすさ、読みやすさも兼ね備えています。
和服愛好家や小津映画ファンの方々はもちろん、ページをめくるたび新たな発見と楽しみが広がる一冊です。ぜひお手に取ってじっくりとお楽しみください。
染織工芸家浦野理一の仕事 小津映画のきもの帖 | ご購入はこちら
四六判336ページ(ハードカバー) 定価3,600円＋税