お世話になっております。
MASTERPIECEのTOPにYouTube動画を掲載することは可能でしょうか?
デザインの購入を考えていますが
TOPにYouTube動画を掲載できればと思っております。
もしできないようでしたら
MASTERPIECEのデザインと類似している
TOPにYouTube動画の掲載ができるデザインをご紹介いただければと思います。
ご質問ありがとうございます。
MASTERPIECEについて、テーマの設定でできることとしては現状では「最大4枚までの画像スライダー(1枚の場合は固定)」という仕様になっていますが、ちょっとしたHTML編集のカスタマイズによってYouTube動画を埋め込むことは可能です。
HTML編集は絶対できないという方や、初めてでも解説があればできてしまう方など、色々なので「かんたん」かどうかは断言できないのですが、もし抵抗がなければ十分できると思います。
具体的な方法はこちらでサポートできますので、もしMASTERPIECEご利用の際はこのトピックにお知らせください。
レイアウトはあまり似ていないのですが、Relationというテーマは動画を押し出したデザインとしてご好評いただいています。
https://design.thebase.in/detail/76
どうぞ宜しくお願いいたします。
お世話になっております。
ご回答とご提案ありがとうございました。
MASTERPIECEのデザインを購入させていただきました。
HTML編集のAppsのインストールも行いました。
お手数ではございますが、YouTube動画の挿入方法をご教示いただければと思います。
何卒よろしくお願いいたします。
MASTERPIECEのヘッダー画像部分を直接書き換えるには、
- まずテーマ設定の「【TOP】メイン画像2〜4(スライド)」に画像がない状態にしてください。2番以降に画像が入るとスライドになってしまうためです。1枚目の部分はこれから消してしまうので、あってもなくても構いません。
- HTML編集画面でMASTERPIECEのコード293行目あたりに「<div id=”MainVisual”>〜</div>」というタグがあると思います。この「〜」の部分を全て削除し、その場所にYoutube動画画面から取得した埋め込みコードを貼り付けます。
- コードが「<div id=”MainVisual”><iframe>Youtubeのタグ</iframe></div>」という形になればOKです。
- 「プレビュー」をしてみるとメイン画像のエリアにYouTubeの動画が表示されていると思います。そのまま「保存」して、「変更内容をショップページに反映しますか?」で「はい」することで、カスタマイズがショップに反映されます。
- 次に動画を表示エリアにフィットさせレスポンシブにするため、テーマ設定の一番下にある「【上級者向け】独自スタイルシート」という欄に次のコードをペーストしてください。
#MainVisual { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } #MainVisual iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
これで動画が上手くフィットして表示されます。
※当然ながら、このカスタマイズをした状態ではテーマ設定の「【TOP】メイン画像」は使えなくなりますので、動画を変更したい場合は同じように直接埋め込みコードを入れ替えてください。画像に戻したい時のために、バックアップを取っておいてください。