西島です。

最近では、WordPressばかり使っていますが、今でも使っている数少ない無料ブログが、fc2ブログです。

無料ブログのなかでは、一番使いやすいので使っていますが、YouTubeをブログに載せる際に、「レスポンシブじゃない!」って事に気づき、早急に対応している次第です。

今回はfc2ブログで、綺麗にYouTube動画をレスポンシブ対応させていきたいと思います。

nisijimanisijima

ちなみに、僕のサイトでは、カエテンジョイと言うテンプレートを使用しています。

fc2ブログのYouTube投稿方法

まずはレスポンシブ対応されていないfc2ブログデフォルトのYouTubeの埋め込み方を見てみましょう。

まずは投稿画面で、YouTubeのアイコンをクリック

投稿画面でYouTubeのアイコンをクリック

新しい操作画面が出てくるので、こちらにブログに挿入したいYouTubeのURLを入れていきます。

YouTube埋め込みページ

チェック

・fc2ブログのYouTube挿入方法は、埋め込みタグではなく、ページURLを入れていきます。

YouTubeページのURLをコピペ

この投稿画面では、「小・中・大」と選べます。 YouTubeの埋め込みサイズ

今回は比較しやすいように、「小」と「中」を選んでみます。

ここで一度レビューをクリックして、実際どんな感じになっているのか確認してみましょう。

YouTube投稿サイズの確認

「小」で挿入した画面は、一応投稿枠内ですが、「中」の動画ですでに投稿枠からはみ出してしまいます。

nisijimanisijima

「小」でも左寄りだし、見た目が良いといえませんね。

fc2ブログでYouTube動画をレスポンシブ対応にしていく。

今回は、テンプレートの横幅も関係なく、スマホでも横幅一杯に収まるようにしていきます。

テンプレートにcssを追記

まずはfc2ブログのテンプレートに、新たにYouTube動画をレスポンシブ対応させる、cssを記述していきます。

「テンプレートの設定」からページの一番下の「スタイルシートの編集」に追加css記述していきます。

cssの編集画面

今回は「スタイルシートの編集」の一番下に新たにsccを追記していきます。

上をまるっとコピペしていきます。

cssを一番下に追記

最後に「更新」をクリックして終了です。

投稿画面でhtmlタグを入れる

後は投稿画面で、YouTube動画を挿入したいところに下のタグを記入。

上のタグを挿入し、「YouTube埋め込みURL」の位置に、YouTubeの埋め込みタグを記述していきます。

チェック

・今回はURLではなく、埋め込みタグをコピペします。

「共有」→「埋め込む」

YouTube埋め込みコード

出てきた埋め込みタグをまるっとコピペしていきます。

YouTube埋め込みコードをコピペ

後は、そのまま記事を投稿すれば、テンプレートからはみ出す事なく、スマホで見てもきっちり枠に収まっています。

レスポンシブ対応されたYouTube投稿

まとめ

今回はfc2ブログのYouTube動画を、綺麗にレスポンシブ対応させる方法をザックリご紹介。

これで、また1つfc2ブログが便利になりました。

WordPressよりは劣る部分もありますが、やはり無料ブログの中では一番使いやすく、今後も利用価値はあると感じました。

無料ブログならfc2ブログがオススメです。

それでは、西島でした。^^

気軽にお問い合わせ下さい

  • ネットビジネスは難しそう
  • 何をやればいいかわからない
  • そもそもこの業界が怪しい

などなど、悩み・質問・相談、気軽にお問い合わせ下さい。

お問い合わせはこちら

特典付き無料メールマガジン


現在特典付きで、無料メールマガジン配信中!
いつでも解約出来るので、気軽に登録して下さい。

mail-magazine

↑クリックすると、特典紹介ページに移ります。