タスクの詳細
現在「完了」、進捗 100%。工程は全10件中 10件完了。
最新報告「反映」（2026-04-20 06:45:02）
タスクの詳細情報・説明 別ウィンドウで表示
依頼の詳細
https://www.notion.so/34423b3d1933804795b1ed51266b2500?source=copy_link
対象URL
※出稿中
https://btc-fintech.com/hikaku/cryptocurrency/bitcoin_buy.php
▼テストBASIC認証
ID:outsourcing
PASS:plustest
依頼内容
【優先度高】見出し①②修正
【優先度低】教育コンテンツのスライド仕様 ⇒👆ののち着手でお願いします！期限来週4/21(火)まででOKです！
■改修意図
該当記事で「ビットコインの買い方」を調べるユーザーに適した記事へ修正するため
※既存記事より初心者のイメージです
対応内容
初心者必見！簡単3STEPビットコイン買い方ガイドのコンテンツに
SP時にスライド(swiper)を追加する対応となります。
※本番反映前、テストサーバーにアップをお願いいたします。
【対象URL】
https://btc-fintech.com/hikaku/cryptocurrency/bitcoin_buy.php
【デザイン】
教育コンテンツの矢印追加について、下記の矢印ご使用ください！
https://drive.google.com/drive/folders/1ERmNszQUKT4PyxpdrIwVaoAprCkWlzH_
実装イメージは下記です。
https://www.figma.com/design/k5Vw6z8ICC4lcL1PYsVtdV/%E6%9A%97%E5%8F%B7%E8%B3%87%E7%94%A3_LP_%E7%B7%91?node-id=2328-2&t=DvGIOKVrja29b9C7-1
対応者メモ・コメント 別ウィンドウで表示
作業工程・チェックリスト
コメント コメントフォーム
Claude
テストサーバーへアップロード完了、依頼者へ確認依頼を送付しました。
【アップロード済ファイル】
・bitcoin_buy_test.php (新規)
・contents/start02_slider.php (新規)
・template/head.php (Swiper CDN条件追記)
・assets/css/style_pc.css (.start02--slider追加)
・assets/css/style_sp.css (.start02--slider SP override追加)
・assets/js/script.js (Swiper初期化追記)
【実装内容】
- .start02--slider modifier で既存.start02を非破壊
- SP: Swiperで1.x枚スワイプ、STEP間>矢印、最終スライド到達時のみ緑▼表示
- PC: 3カラム並列、>矢印、緑▼は右寄せ (float:right; margin:7px 120px)
- STEP01タイトルは
で8+3固定wrap
依頼者フィードバック待ち → 修正あれば対応、OKなら本番反映。
Claude
実装完了・ローカル動作確認済み
確認URL (ローカル)
http://localhost:8887/btc-fintech-hikaku-cryptocurrency/bitcoin_buy_test.php
動作確認結果
PC (1280px):
- 3STEPが横並びで表示
- STEP01→02、02→03間に「>」矢印
- 末尾(STEP03の下)に緑▼矢印
- スワイプ操作は無効 (allowTouchMove: false)
SP (390px):
- slidesPerView: 1.15 で現在スライド+次スライドの一部がチラ見え
- 現在スライド右側に「>」ナビゲーションボタン (最終スライド到達で自動非表示)
- 最終スライド(STEP03)到達時のみ下に緑▼矢印が表示される (Figma通り)
- スワイプ/タップで遷移可能
変更ファイル一覧
- 新規:
cryptocurrency/bitcoin_buy_test.php - 新規:
cryptocurrency/contents/start02_test.php - 新規:
cryptocurrency/assets/img/arrow_down.svg,arrow_scroll.svg - 編集:
cryptocurrency/template/head.php(Swiper v11 CDN条件付き読込) - 編集:
cryptocurrency/assets/js/script.js(Swiper初期化・末尾矢印制御) - 編集:
cryptocurrency/assets/css/style_pc.css(PC: 矢印・swiperラッパー調整) - 編集:
cryptocurrency/assets/css/style_sp.css(SP: swiperナビ・末尾矢印トグル)
本番無影響の確認
- Swiper CDNは
$param_page === bitcoin_buy_testの条件でのみ読込 - 既存
bitcoin_buy.php/start02.php/ 既存CSSセレクタには一切変更なし - 新CSSは全て
.start02--test名前空間内 → 出稿中のbitcoin_buy.phpに影響しない
次ステップ
テストサーバーへアップロード依頼をお願いします。
Claude
対応方針
bitcoin_buy.php は出稿中のためtest用ファイルを新規作成して対応します。
採用ライブラリ
- Swiper v11 (当サイト初導入。素のJS、jQuery不要、長期メンテ実績あり)
- CDN: jsdelivr
作成・編集ファイル
cryptocurrency/bitcoin_buy_test.php新規 — include先をstart02_test.phpに差し替えcryptocurrency/contents/start02_test.php新規 — swiper markup + STEP間矢印 + 末尾下矢印cryptocurrency/template/head.php編集 —$param_page === bitcoin_buy_testの時のみSwiper CDN読み込み (他ページ無影響)cryptocurrency/assets/js/script.js末尾追記 — Swiper初期化cryptocurrency/assets/css/style_pc.css追記 — PC時: STEP間に>矢印、末尾下に緑▼cryptocurrency/assets/css/style_sp.css追記 — SP時: swiper調整、nav矢印表示、末尾下に緑▼cryptocurrency/assets/img/arrow_down.svg/arrow_scroll.svg配置
レイアウト方針
- PC: Swiper初期化済みだが
slidesPerView: 3で3枚並列表示 (見た目グリッド)、STEP間と末尾に矢印 - SP:
slidesPerView: 1.2で1枚ずつスワイプ、nav次へ矢印 + 末尾下矢印 - DOM構造は常に同一で安定、breakpointsで切替
確認URL (作業後)
cryptocurrency/bitcoin_buy_test.php をテストサーバーにアップ後、本番反映はユーザー確認後
https://btc-fintech.com/hikaku/cryptocurrency/bitcoin_buy.php