最短ホームページテンプレートにユーチューブ動画を埋め込む方法について解説します。ホームページに動画を埋め込んだ場合は、スマホサイトでも動画が最適表示されるように設定しておく必要があります。訪問者さんが快適に閲覧できるようにしておきましょう。動画を最適表示させる方法[この動画は9分で見れます]チャンネル登録をして頂きますとホームページ作成に役に立つ最新動画のアップロードをお知らせします。clickユーチューブの動画の埋め込みコードを取得する動画の上で右クリックして「埋め込みコードをコピー」をクリックする。下記画像のように「共有」から「埋め込みコード」をコピーするパソコン用テンプレートに埋め込みコードを貼る最短ホームページテンプレートのメインコンテンツの幅はwidth="580"になっています。ユーチューブ動画の縦横比が16対9なので、縦幅はwidth="326"となります。allowfullscreen></iframe>メインコンテンツ全体に枠を指定している場合、または、動画を枠で囲う場合は、枠から動画がはみ出てしまいます。この場合は指定するサイズを調節します。指定した横幅に0.5625を掛ければ縦幅の大きさが算出できます。横幅が480pxなら縦幅は270pxです。スマホ用テンプレートに埋め込みコードを貼るスマホ用にユーチューブ動画を貼りつける場合は、サイズの指定をする必要はありません。CSSから画面に合わせたサイズになるようにクラス指定を書き込みます。スマホテンプレートのHTMLコピペでご利用下さい。class="movieinfo">ユーチューブ埋め込みコード</div>スマホサイトで動画の横幅を最適表示させるために、スマホテンプレートの動画の埋め込みコードをクラス指定します。クラス指定というのは、スタイルシート(CSS)で指定した内容を、その専用のDIVタグで囲んだHTML側に反映させるって事です。今回はmovieinfoというクラスをスタイルシートで作成し、その命令内容をCSSに記述し、HTML側(スマホサイト)に指示します。このmovieinfoで囲まれた範囲に命令が反映するって事です。movieinfoという名前自体は任意で決めても良いです。class="movieinfo">スマホ用CSSにクラス指定記述コピペでご利用下さい。100%;スマホのスタイルシートに書き込むソースですが、56.25%というのがポントです。この%は動画の縦横比を定義するものです。ユーチューブの動画表示の縦横比は16対9です。100%;は、結局ブラウザの横幅100%に表示させるという事になります。上記のソースの名前をmovieinfoとしている訳です。これをスタイルシートのクラス名と言います。HTMLのクラス指定した部分だけに、このクラスの命令が反映されます。中身は覚えなくて結構ですので、このような技術がCSSの役割だと考えて下さい。HTMLでも指示できますが、CSSは、CSSと呼ばれる外部のファイルから、まとめてある命令をHTMLに指示できるって事です。いま、直接HTMLでも指示できますと書きましたが、上記のCSSのソースを、直接HTMLの動画ごとに書き込んでも良いのですね!でもこの場合はソースは長ったらしくなります。動画をたくさん掲載したいホームページでは、ソースだらけになります。CSSはHTMLのソースを短くできるというメリットがあります。する事でSEO対策にもなるって事です。綺麗なソースはグーグルのクローラーが巡回しやすいためです。スマホ表示最適化サイト★スマホ表示最適化マニュアル最短ホームページテンプレートで、スマホサイトテンプレート付きをご購入された方は、参考サイトスマホ表示最適化もあわせてご活用下さい。Yoshida]プロフィール初めてのホームページ作成でビジネス、SEO対策のお役に立てば幸いです。最短ホームページテンプレートの構成を知る!ホームページを始めて作成する場合にホームページテンプレートの基本構成を理解しておく必要があります。テンプレートフォルダの中身にどのようなファイルがあるか把握しよう!ホームページ作成の第一歩。最短ホームページテンプレートの基本!綺麗なホームページを作成するための第一条件は表示崩れを発生させない事で、そのためにはまずテンプレートの構成をおおまかに把握する事です。このコンテンツではHTMLの基本とホームページ構成について解説します。綺麗な画像がサイトの価値を高める!デザイン的に優れたホームページを作成するのに画像の影響が大きなウエイトを占めるため、その扱い方が重要になります。ホームページでの画像の扱いにはルールがあるので、正しい作業の方法を身に付けましょう。ページ数を増やす方法サイトのページ増設の方法!最短ホームページテンプレートではページ数を簡単に、そして無限に増やす事ができます。基本的にはファイルをコピーし、そのファイル名でそのページに対するリンクをメニューなどに作成するだけで完了します。問い合わせフォームの簡単設置方法!最短ホームページテンプレートでは、お問い合わせフォームが付属されていて初心者さんでも簡単に設置する事ができます。フォームではPHPなど複雑なファイルを使用しますが、4っのステップでその方法を解説します。スパムを防止する方法お問い合わせフォームからのスパムを撃退!ホームページを運営されている方は、ほとんどの場合お問い合わせフォームを設置されていまがこのお問い合わせフォームを無差別で探し出し、販売などを仕掛けてくるスパムが横行しています。タグの追加でスパムを防止する方法を解説します。自動で表示させる方法を解説します。住所入力の段階で煩わしくなり問い合わせを見送る場合があります。確実に集客できるよう郵便番号の入力で住所を自動表示させるシステムを導入させておきましょう。ホームページ作成ソフトランキング!初心者さんにお勧め!.。