広告 How To

ブログ内のYouTube動画をテキストリンクで表示【ポップアップ表示も】WordPress

WordPressテーマ

WordPressブログ内に埋め込んだYouTube動画を、テキストリンクで表示する方法です。

記事後半では、リンククリック時にページ内でポップアップ表示する方法も紹介しています。

 

こんな人のお役に立てる記事です。

小豆
ブログに埋め込んだYouTube動画のサイズがでかすぎる。
これって、テキストリンクですっきり見せることできないの？

ブログ内のYouTube動画をテキストリンクで表示【WordPress】

WordPressでは、簡単にYouTube動画をブログ内に埋め込むことができますよね。

実際に、我が家のワンコ動画を埋め込んでみました。

小豆
一つ一つのサイズが大きいから、複数埋め込むと場所をとるね。
そうなんだよねぇ。
記事内でスペースを取らずに、すっきり表示させたいんだけど・・。
大福

 

記事の内容によっては、埋め込み動画に以下のように感じることがあります。

  • 記事内で邪魔にならないように、すっきり見せたい
    複数の動画を埋め込む場合や、表内などに動画を埋め込む場合
  • 必要な人だけに見てもらいたい動画なので、あまり目立たせる必要がない
    補足動画など、全員に見てもらう必要がない動画

というわけで、埋め込み動画をテキストリンクに変更してみました。

サンプル動画1
念入りに毛づくろいするポメラニアン		 動画を再生
サンプル動画2
グルーミングブラシが大嫌いなポメラニアン		 動画を再生

これなら連続で複数の動画を埋め込んでも、すっきり見せることができますね。

また、必要な人だけに再生してもらえるので、記事を読むときの邪魔にもなりません。

 

YouTube動画をページ内でポップアップ表示

YouTubeサイトに移動

動画テキストリンクをクリックすると、デフォルトではYouTubeサイトに移動します。

サイトの移動をさせず、ブログ（ページ）内で動画の再生を行うには、別途設定が必要です。

当ブログでは、サイトの移動をせずページ内で動画がポップアップ表示されるように設定済です。

 

大福
・動画をテキストリンクで表示する方法
・YouTubeサイトに移動せずにページ内で動画を再生する方法
それぞれ解説していくよ。　

 

テキストリンクで動画を表示する方法と埋め込み方

ブログ内でYouTube動画をテキストリンクで表示させる方法は、通常の埋め込み方法と多少異なります。

「動画リンクのコピー」～「埋め込み方法」までをわかりやすく解説していきます。

 

手順

  1. 動画リンクをコピー
  2. ブログ内に専用コードを設置
  3. 専用コード内にリンクを貼り付け

 

step
1動画リンクをコピー

動画URLをコピー

共有　→　表示されたリンクをコピー

小豆
あれ？
いつもの<iframe width=・・・の長いコードは使わないんだ！？
「埋め込む」ボタンを押した時に表示されるコードだね。
今回は、このコードは使わないよ。
大福
  • 「埋め込む」ボタンは使用しない

埋め込みボタンは使わない

 

step
2ブログ内に専用コードを設置

WordPressにコードを挿入

テキストエディタ　→　専用コードを設置

専用コード

<a href="動画URL">テキスト</a>

 

  • ブロックエディタの場合

ブロックエディタの場合

カスタムHTML　→　専用コードを設置

 

step
3専用コード内にリンクを貼り付け

動画URLを挿入

コピーしたYouTube動画リンクをコード内に貼り付け　→　任意のテキストに変更

実例サンプル <a href="https://youtu.be/DXmWPsUTny0">動画を再生</a>

 

大福
YouTube動画をテキストリンクで表示する手順は、たったこれだけ。
意外と簡単だね。
でも、このままだとリンククリック時にYouTubeサイトに移動しちゃうんだよね？
ページ内で動画を再生させる方法は？
小豆

 

YouTube動画をページ内でポップアップ表示させる方法

小豆
リンククリック時に、YouTubeサイトに移動するのは嫌だなぁ。
他の動画に目がいって、もうブログには戻ってきてもらえなそう・・。
確かに、それは言えるよね。
以下の方法で、ブログ内で動画を再生させることができるよ。
大福

 

使用するプラグイン

Easy FancyBoxプラグイン

ここで紹介する方法では、プラグイン【Easy FancyBox】を使用します。

【Easy FancyBox】は、記事内の画像や動画をページ内でポップアップ表示させるプラグインです。

 


  • プラグイン詳細を表示

    インストール済プラグイン

    WordPressメニュー　→　プラグイン　→　インストール済プラグイン


  • 設定画面を表示

    プラグインの設定

    Easy FancyBox　→　設定


  • 設定を変更

    YouTube動画のポップアップ表示設定

    メディア　→　YouTubeにチェック

    YouTube動画のみ・・の設定を行いたい場合は、画像のチェックを外しておきます。
    デフォルトでは、画像もページ内でポップアップ表示されるようになっています。


  • 自動検出の設定

    YouTubeの自動検出

    YouTube　→　自動検出にチェック　→　変更を保存

 

これで、リンククリック時にページ内でポップアップ表示されるようになったよ。
大福

 

テキストリンクにアイコンを表示させる方法

テキストリンクには、アイコン表示を行うとさらにわかりやすくなります。

アイコンなし アイコンあり 動くアイコン
動画を再生 動画を再生 動画を再生
小豆
ぱっと見で、動画リンクだと分かりやすくなるね。

 

当ブログでは、アイコン表示に【FontAwesome4.7】を使用しています。
FontAwesomeの詳しい使い方は、以下の記事内で解説しています。

アイコン
AFFINGER5で使えるアイコンの増やし方【カスタマイズも】

続きを見る

※WordPressテーマ「AFFINGER」利用者向けの内容です

 

まとめ：記事内で動画をスッキリ見せよう

YouTube動画をテキストリンクで表示することで、以下のメリットがあります。

  • 記事内で場所をとらない
  • 複数の動画を連続で埋め込んでもスッキリ見える
  • 記事内で邪魔にならず、必要な人だけに見てもらえる

表内に動画を埋め込む際にも、スッキリ見せることができますね。

記事の内容などによって、「通常の埋め込み」と「テキストリンクでの埋め込み」の使い分けがおすすめです。

 

  • 関連記事

Sponsored Links

この記事タイトルとURLをコピー
  • この記事を書いた人

大福

ブロガー兼アフィリエイター歴5年目。
当ブログのアクセス数は月7万PVほど。
月に20万円ほどのブログ収入で、田舎でのんびりと暮らしています。
人懐っこい性格ですが、人見知りです。

-How To