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

無料ツールソフトの使い方ホームページの作り方Hpで集客する方法グーグルサービス
 
初めてのHP作成の動画SEO実践編高齢者のホームページの作り方よくある質問
 

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

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

 

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

 

なので、付属のレスポンシブテンプレートには対応しません!

 

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でサイトにアクセスして、正常に表示されるか確認して下さい。

シリウスでYouTube動画をスマホに最適化させる方法の関連ページ

シリウスの初期設定
サイト作成ソフトシリウスの初期設定の操作方法を初心者さんにも解りやすいように動画で解説します。特にホームページ生成フォルダとヘッダー情報の取り扱いは完全に理解しましょう。
ヘッダー画像作成
オールインワンソフト!シリウスでは、簡単に綺麗なヘッダー画像を作成する事ができます。またヘッダー画像だけでなくバナーを作成する方法もご紹介します。画像の取り込みから、テキストの装飾までシリウスの画像作成機能を完全解説!
レイアウト枠の裏技
シリウスには一発でテーブル枠を2っ横に並べて表示させる機能があります。この機能はレイアウト枠と呼ばれ管理画面から設定できます。具体的な使い方と、さらに綺麗に表示させる裏技について解説します。
画像の操作基本編
超便利!こんな事が基本操作で簡単にできる!画像の取り込み方法と表示のさせ方の基本をまず覚えよう!サイト作成ソフトシリウスでどのように画像を扱えば、早くて便利に作業できるかを解説します。
ロゴ画像の表示方法
サイト作成ソフトシリウスにはページトップ(ページの一番上の帯)にロゴ画像を表示させることができます。デフォルトの設定では、ページタイトルが表示されてしまいますので、その変更方法について解説します。
超絶早技!右クリック!11本の動画で完全解説
サイト作成ソフトシリウスの早業、簡単、便利機能!シリウスでは管理画面上で右クリックするだけで、普段良く使う色々な機能を一発で呼び出し、操作する事ができます。その数は十数種類。それぞれの使い方について解説します。
文字装飾機能を使い倒す
サイト作成ソフトシリウスの文字装飾機能について詳しく解説します。テキストエディターの文字装飾機能は、いろいろなテキストを装飾するためのタグを自分の好みで複数登録する事が可能で、良く使う装飾パターンを登録しておいて、一発で呼び出す事ができます。

トップページ ソフトの概要 Hp公開の方法 SEO対策基本編 アクセス解析 特典のご案内 購入者メルマガ お問い合せ