YouTube（動画）を入れる
Youtubeにアップされている動画を、ホームページに入れる方法をご案内します。
YouTubeは、他社が運営するサービスです。そのため、予告なく仕様や操作手順が変更となる場合があります。ご利用の際には、YouTubeが提供している最新情報ページやヘルプページなどをご確認ください。サービスの詳細などは、YouTubeへお問い合せください。
以下の情報は、2023年4月現在の情報です。
Youtubeヘルプセンター
はじめに
YouTubeを利用するには、アカウント登録が必要です。
また自分で撮影した動画をホームページに掲載したい場合、YouTubeへのアップロードが必要です。
アカウントの登録方法や、動画のアップロード方法は、YouTubeのヘルプセンターにてご確認ください
Youtubeヘルプセンター
操作の流れ
ページ内に動画を入れるために、まず、Youtubeの画面で「埋め込みコード」を取得します。その後、取得したコードを部品に追加します。
以下より該当の動画手順を選択の上、ご確認ください。
１）「共有」をクリックします
２）「埋め込みコード」をクリックします
３）埋め込みコードをコピーします
操作手順2．HTML部品を追加する
動画を入れたいページにHTML部品を追加します。
- ホームページ更新画面で、動画を入れたいページを開いておいてください。
1）上パネルで［+部品を追加する］ボタンをクリックし、動画を入れたい場所の［ここに追加］バーをクリックします
２）［HTML］＞［HTML］部品を選択し、[この部品を追加する]ボタンをクリックします
HTML表示の横に文章を入れたい場合は、「中見出し＋文章＋HTML」を選択します
→編集エリアにHTML部品が入ります
操作手順３.HTML部品に埋め込みコードを追加する
操作手順２で追加したHTML部品に、操作手順１でコピーした埋め込みコードを追加します。
１）編集エリアのHTML部品の黒い四角部分をクリックして、右パネルを表示します。
→右パネル内にHTML入力欄が表示されます
２）HTML欄の上で右クリックし、「貼り付け」をクリックします
→コピーした埋め込みコードが貼り付けられます
【上級者向け】動画の表示サイズを変更する
動画の表示サイズを変更したい場合、コード内の以下の数値を書き換えます。
<iframe width="数値" height="数値"
※widthは横幅 heightは縦幅です
※単位はpx（ピクセル）で記入します
※半角数字で記入します
３）部品内に、YouTubeの動画の埋め込みコードが表示されていることを確認します
※編集エリアには動画は表示されません。
４）入力欄以外の箇所をクリックして、確定します
→入力内容がサーバーに保存されます
５）画面右上［プレビュー］をクリックして、動画が表示されることを確認します
１）ショート動画上で右クリックします
２）「埋め込みコードをコピー」をクリックします
※ショート動画側の設定で埋め込みを許可していない場合、下記項目が表示されない等の制限があるようです。「埋め込みコードをコピー」が表示された場合、埋め込みが可能です。
３）埋め込みコードがコピーされます
操作手順2．HTML部品を追加する
動画を入れたいページにHTML部品を追加します。
- ホームページ更新画面で、動画を入れたいページを開いておいてください。
1）上パネルで［+部品を追加する］ボタンをクリックし、動画を入れたい場所の［ここに追加］バーをクリックします
２）［HTML］＞［HTML］部品を選択し、[この部品を追加する]ボタンをクリックします
HTML表示の横に文章を入れたい場合は、「中見出し＋文章＋HTML」を選択します
→編集エリアにHTML部品が入ります
操作手順３.HTML部品に埋め込みコードを追加する
操作手順２で追加したHTML部品に、操作手順１でコピーした埋め込みコードを追加します。
１）編集エリアのHTML部品の黒い四角部分をクリックして、右パネルを表示します。
→右パネル内にHTML入力欄が表示されます
２）HTML欄の上で右クリックし、「貼り付け」をクリックします
→コピーした埋め込みコードが貼り付けられます
【上級者向け】動画の表示サイズを変更する
動画の表示サイズを変更したい場合、コード内の以下の数値を書き換えます。
<iframe width="数値" height="数値"
※widthは横幅 heightは縦幅です
※単位はpx（ピクセル）で記入します
※半角数字で記入します
３）部品内に、YouTubeのショート動画の埋め込みコードが表示されていることを確認します
※編集エリアには動画は表示されません。
４）入力欄以外の箇所をクリックして、確定します
５）画面右上［プレビュー］をクリックして、動画が表示されることを確認します
マニュアル更新情報
2024年2月21日
スマホサイトに関するマニュアルを更新いたしました。
・スマホサイトに関わる設定
2023年9月1日
新機能の追加に伴い、下記のページを追加いたしました。
・ブログ部品とは
└ブログ部品の追加方法
└ブログ部品の削除方法
└ブログ部品の更新方法
└記事の編集方法
└記事設定の機能解説
2023年2月20日
GoogleAnalyticsの仕様変更に伴い、下記のページを追加いたしました。
・GoogleAnalyticsの最新版を追加で設定する
※すでにGoogleAnalyticsに登録済みの方向け
各種ダウンロード資料
ホームページ更新画面の
基本操作（印刷版PDF資料）
A4カラー印刷用
印刷版PDFはこちらをクリック