wordpressの作成画像

<-WordPress-> 3分で「YouTube動画」を貼り付ける方法(その1)【コード埋め込み編】

・この記事を読むと

ワードプレスでブログ記事内に、ユーチューブ動画を貼り付けることが出来ます。作業時間3分以内で出来ます。
プラグインは使いません。今すぐやってみましょう!

この記事についてすべて実際に作業し、簡単に出来た内容を紹介しています!

 

手順の概要
手順1:YouTubeの埋め込みコードをコピー
手順2:投稿画面「テキストモード」でペースト
手順3:プレビューで確認

WordPressで「YouTube動画」を3分で貼り付ける方法

手順1:YouTubeの埋め込みコードをコピー

 

①投稿画面にて「テキスト」タブを選択します。(HTML コードを書く画面です)

 

②下記のコードをまるまるコピーします。

 

—YouTubeの埋め込みコード—この下からコピーする↓

<div class="p-articleYoutube"><iframe src="https://www.youtube.com/embed/〇〇〇" 
width="320" height="215" allowfullscreen="allowfullscreen"><span data-mce-type="bookmark"
 style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe></div>

 

手順2:投稿画面「テキストモード」でペースト

 

①ワードプレス投稿画面のテキストモードにて、埋め込みたい箇所に、手順1-②でコピーしたコードをペースト([Ctrl]+[v])します。

 

②貼り付けたいユーチューブ動画のアドレスをコピーします。

・YouTube動画の画面→「共有」→アドレスをコピー

メモ帳などにペーストすると、

「https://youtu.be/■■■」←こんな感じでコピーされてるはずです。

 

③この「■■■」の部分を、上記①の埋め込みコード内の〇〇〇に、上書きペーストします。

簡単に書くと

「■■■」→「〇〇〇」のところに上書き(ペースト)します。

 

手順3:プレビューで確認

 

①プレビュー画面で確認します。

 

 

YouTube動画の画面サイズを変更する方法

 

ユーチューブ動画の画面サイズを変更する方法は、下記コードの〔width=”320″ height=”215″〕部分です。
”width=”は画面の幅、”height=”は画面の高さです。数値を変えると画面の大きさが変化します。

 

<div class="p-articleYoutube"><iframe src="https://www.youtube.com/embed/〇〇〇" 
width="320" height="215" allowfullscreen="allowfullscreen"><span data-mce-type="bookmark"
 style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe></div>
wordpressの作成画像
最新情報をチェックしよう!
>大切なデータが突然消えた...( ̄O ̄;)

大切なデータが突然消えた...( ̄O ̄;)

えっ...
二週間かけて作ったデータが消えた...
何が起こったのか理解出来ず、しばし呆然。
私の時間を返してくれ!
【時を巻き戻す術はなし】

そういう経験をした方は少なくないはず。

さぁ、ownCloudでデータを二重化しときましょう!
実際に0円で導入し、運用しています。
→ 無料お問い合わせはコチラから

TKCオフィス仙台は「ホームページ制作、運営」その他をサポートします。
→ Webサイト・ブログ開設の無料相談はコチラから

CTR IMG