初めてのホームページ作成で見る動画

 

便利な無料ソフトと便利サイト一覧サイト作成ソフトシリウス、最短HPテンプレートの使い方解説お店、企業用ホームページの作り方ホームページで集客し、売り上げを延ばす方法グーグルの無料サービス一覧
HP作成 超初心者、高齢者講座サイト作成のFAQ記事一覧SEO対策実践編SEO対策基本編トップバナー用無料下地画像素材集

サイト作成ソフトシリウスでYouTube動画をスマホに最適化

YouTube動画スマホに最適化

動画携帯端末最適化

いろいろなYouTube動画をスマホに最適化させる方法を試してみましたが、訪問者さんの使い勝手を考えた場合一番いいなと思った方法をご紹介します。私も現在はこの方法で統一しています。

 

スタイルシートの編集は「Iphoneサイトスタイルシート」で作業しますので、お間違えのないようにお願いします。Iphoneサイトのみに変更を命令するって事なので、、、

ver15から「Youtube、Googleマップのタグ」というコマンドが追加されています。YouTube動画はこのコマンドで携帯端末表示に最適化で対応する事ができます。

 

もちろん、動画の方法でも正常に動きます。

 

8-シリウスでYouTube動画をスマホに最適化 [この動画は9分で見れます]

 

 

手順@・・・HTMLにYouTube動画のコードを貼りつける

 

YouTube動画の埋め込みコードをコピーすると下記のようなソースを取得します。
動画の上で、右クリックで「埋め込みコード」をクリックして下さい。

<iframe width="620" height="349" src="https://www.youtube.com/
embed/NJZRiqXyaYM" frameborder="0" allowfullscreen></iframe>

YouTubeでのURLは、https://youtu.be/NJZRiqXyaYMになります。

 

この記述方法を「インラインフレーム」といい、ソースで指定したコンテンツを、画面中にインラインで表示するためのタグです。 まずこのコードを取得し、PCで表示させたい場所に貼り付けます。

 

シリウスのデフォルトタイプのテンプレートの2カラムでメインコンテンツにユーチューブの動画を貼る場合、横(width)620、縦(height)349、にしておきますと、横幅いっぱいちょうどに表示できます。

 

貼り付けましたら、埋め込みコードを次のタグで囲みます。

<div class="movieinfo">埋め込みコード</div>

※ 頻繁に動画を埋め込むホームページでしたら文字装飾設定しておく事をお勧めします。

 

管理画面の最終的なYouTube動画の記述は下記のようになります。

<div class="movieinfo">
<iframe width="620" height="349" src="https://www.youtube.com/
embed/NJZRiqXyaYM" frameborder="0" allowfullscreen></iframe>
</div>

 

もちろんPCの表示はwidth="620" height="349"で指示した大きさになります。2カラムのテンプレートで、動画を枠で囲まない場合、この大きさがちょうど良いです。
(当サイトの動画の大きさ)

 

 

手順A・・・「Iphoneサイトスタイルシート」を編集

 

シリウスカスタマイズスタイルシート

 

シリウスカスタマイズスタイルシート

 

「テンプレート」から「Iphoneサイトスタイルシート」を開いて頂けましたら、一番下までスクロールし、右記画像のように下記黄色枠内のソースを記述します。

 

注意事項
下記ののコメントタグも記述する事!
/* スマホ動画最適化 */

 

右記画像594行目の } があるか確認する。
コピーミスが一番多い!

 

 

※ くれぐれも完全にすべてコピーしてお使い下さい!

/* スマホ動画最適化 */
.movieinfo {
position: relative;
padding-top: 56.25%;
padding-bottom:30px;
}
.movieinfo iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

 

 

手順B・・・コピペが完了しましたら、スタイルシートを保存します。

 

シリウスカスタマイズスタイルシート保存

 

スタイルシートを保存します
保存ボタンを押す事で、このスタイルシートに記述された内容がHTMLに反映されます。

 

 

元のスタイルシートに戻す場合
スタイルシートがデフォルトに戻ります。今までスタイルシートに記述した内容が、すべてリセットされ、ソフトご購入時の状態になるって事です。

 

手順C・・・Iphoneサイト用のプレビューで確認します。

 

アイフォンサイトプレビュー

 

 

アイフォンサイトプレビュー右クリック

プレビューボタンの上で右クリックしますと、右画像のようにiphoneサイトのプレビューが表示されますので、クリックして下さい。

 

上記の画像のプレビューのように、画面幅いっぱいにYouTube動画が表示されていれば、正しく機能していることになります。

 

 

以上でHTMLにYouTube動画を貼りつける方法と、スマホ最適化のためのスタイルシートの設定が完了しました。作業が終わりましたら、実際にスマホやIphoneでサイトにアクセスして、正常に表示されるか確認して下さい。

 

 

 

 

 

TOPへ