とりあえずHP の使い方

上級編

YouTubeの動画を記事に埋め込もう記事に動画を埋め込む

このページは上級編となります。まずは初級編・中級編をマスターしてからご覧頂くことをおすすめいたします。焦らずじっくりと取り組んでいこう!

YouTubeにアップロードされている動画を記事に埋め込むことができます。

※動画をアップする方法は下記をご覧ください。
パソコンから動画をアップする

埋め込みたいyoutube動画のページにアクセス

YouTubeにアクセスし、埋め込みたい動画のページを開きます


動画のタイトル下にある、[共有]をクリックします
[埋め込みコード]をクリックします

タイトル下の[共有]をクリックすると、先に共有URLが表示されますが、
共有の隣の[埋め込みコード]をクリックします。

Youtube[埋め込みコード]表示方法画面

※ このとき、下部に表示される「動画の詳細設定」で [以前の埋め込みコードを使用する]の
  チェックが外れている
ことを確認してください。
 「以前の埋め込みコード」では、iPhoneなどで閲覧できないことがあります。

※ 動画の詳細設定が非表示になっている場合は[もっと見る]をクリックすると表示されます。
※ 動画のサイズは適宜調整することができます。

埋め込みコードをコピーします
Youtube[埋め込みコード]コピー画面

※ コピーするタグをなぞるようにして選択し、マウスの右クリックを押して
  表示されるメニューから「コピー」を選択するとコピーすることができます。
※「Ctrl+C」でもコピーすることができます。(Macは「command+C」)

動画を埋め込みたいページを開きます

「とりあえずHP」の管理画面から[各ページの編集]をクリックし、

左メニュー[各ページの編集]画面

動画を埋め込みたいページを選択します。

動画を埋め込みたいページ選択画面
埋め込みたい記事のHTMLソースエディタを開きます

動画を埋め込みたい記事ボックスの[HTML]ボタンをクリックすると、
別ウインドウが開きます。

[HTML]ボタンのクリック画面
3でコピーした「埋め込みコード」を貼り付けて[更新]

HTMLソースエディタが開いたら、動画を埋め込みたい場所に 3でコピーした「埋め込みコード」を貼り付けて[更新]をクリックします。 ここでは仮に、本文の下に貼り付けてみます。

HTMLソースエディタでの 埋め込みコードを貼り付け画面

※埋め込みたい場所にカーソルを合わせて、マウスの右クリックを押して表示される メニューから「貼り付け」を選択すると貼り付けることができます。

※HTMLソースエディタには‹s›〜‹/s›や‹br /›といった「HTMLソース」が
表示されています。削除しないようにお気をつけください。

表示を確認して[上記の内容で設定]をクリック

管理画面の記事ボックスに動画が表示されます。

動画埋め込み確認画面

表示を確認したら、忘れずに[上記の内容で設定]をクリックしましょう。

[上記の内容で設定]ボタンのクリック画面
ホームページを確認します

[ホームページを確認]をクリックして、
実際に動画が表示されているかを確認してみましょう。

埋め込んだ動画の表示確認サンプル画面

デザインを選ぶ

ロゴマークを表示させる

文字に装飾やリンクを設定する

プロフィールの掲載方法

お問い合わせフォームの設置

外部ブログを利用する

外部フォームを利用する

Googleアナリティクスの設定

アクセス解析を見る

PAGE TOP