```
↓ 以下のように書き換えます
```html
```
#### 場所3：ギャラリー右側の画像
```html
```
↓ 以下のように書き換えます
```html
```
#### 場所4：瀧本 顕様のプロフィール写真
```html
```
↓ 以下のように書き換えます
```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;
}
}