初心者でも出来るホームページの作り方ガイド

記事の内容は動作や機能を100%保障するものではございません。悪しからずご了承下さいませ。※カスタマイズは必ずバックアップの上、自己責任にて行って下さい。

メモ

このサイトは「micata2」「AFFINGER4」の総合マニュアルサイトになっています

複数のYouTubeの挿入方法

WordPressはYoutubeのURLを貼るだけで自動で挿入されます。

YouTubeの動画は自サイトで動画を配信するよりもずっと軽くサーバーの負担を減らす事が出来ますが、それでも多数の動画を一度に貼り付けるとサイトの表示は一気に遅くなります。

当テーマでは専用のショートコードとプラグインを使用する事で遅くならずにYouTube動画を複数表示することができるのでその方法を説明します。

この方法で20個のYouTubeを貼った場合の結果が以下となります。

普通にYouTube動画を20個貼り付けた例

2016-11-29_10h48_42

表示に18秒、ページサイズは1.52MB

このページのように張り付けた例

2016-11-29_10h49_38

表示に4.6秒、ページサイズは602KB

なんと約5倍も速くなりました。

参考YouTube動画貼り付けテスト

重くならない複数のYouTubeの挿入方法

2016-08-22_182936

まず、任意の貼りたいYouTube動画のIDをコピーします。

上図の場合は①「共有」より②の「https://youtu.be/」以降のURL「4mYftcFqm_k」をコピーします。

 2016-08-22_190118

エディタにペーストして選択状態にします。

②「YouTubeID」ボタンをクリックします

2016-08-22_190130

ショートコード状態になりました。

これで、YouTube動画はYouTubeページにリンクされた「YouTube画像」になります。

プラグイン「Easy FancyBox」

ただ、それでは毎回YouTubeで見る手間が生まれるのでプラグイン「Easy FancyBox」を使用します。

2016-08-22_190519

「Easy FancyBox」は画像をポップアップ表示するプラグインでYouTubeにも対応しています。

「メディア」に「Easy FancyBox」の設定があるので「YouTube」にチェックを入れて保存して下さい。

2016-08-22_190609

外部リンクに_blankを付与

2016-08-22_191037

テーマ管理にて「記事内の外部リンクを別ウィンドウで開く」にチェックを入れて保存。

以上で完了です。
以下のような表示になります。

※「記事内の外部リンクを別ウィンドウで開く」はサイト全てに適応されますのでサイトの特性に応じて利用して下さい。

人気記事

kawaii 1

以前にWordPressテーマ「STINGER PLUS+」を公開した際に作成したサンプルサイトが「可愛い!」と特に女性の方から非常に好評をいただきました。 今回の参考サンプルサイト ただ現在「STI ...

2

ホームページを今まで沢山作ってきましたが、リニューアル案件以外の方はやはり「予算重視」である場合が多く、こちらの言う「大切」な事とか「重要な事」なんていう意見は「わかっているけど・・・」とはいうものの ...

tonkotu 3

今回はまず、ベースとなる「ホームページのタイトル」の考え方と下層ページコンテンツに何を作るべきかを考えていきます。 「タイトル設定」はまず最初に行うべき事であり、またホームページの命運を分ける最重要項 ...

投稿日:2016年8月22日 更新日:

Copyright© ホームページ作成なら無料テンプレートのmicata(ミカタ) , 2016 AllRights Reserved Powered by AFFINGER4.