賢威6.2,トップページ,動画を埋め込む,レスポンシブ対応,方法

50代でも初心者でも大丈夫!自宅で月10万ネット収入計画

『賢威6.2』プリティ版カスタマイズ実践記⑧トップページにYouTubeの動画を貼る!

読了までの目安時間:約 4分

 

今回は、この記事の続きになります。
自己紹介の動画や、自分が読者様に見てもらいたい 動画があったら、

ぜひトップページに動画を設置してみませんか?

 

 

イメージとしては、こんな感じです。

image

 

 

 

 

まず、設置したいYouTubeの動画の方で、下準備しますよ~。
設置したい動画の下の部分の「共有」をクリックします。

image

 

 

 

「埋め込みコード」をクリックします。

image

 

 

 

 

今回は賢威のメインカラムの幅に合わせて、500pxにしたいので、
「もっと見る」をクリックします。

image

 

 

 

「動画のサイズ」が「カスタムサイズ」になっていることを確認します。

SNAGHTML158521a5

 

 

 

埋め込みコードが出来ましたので、コピーします。
コピーする時は、赤枠の中でクリックしたら、キーボードを使用しましょう♪

image

 

 

image

 

 

 

準備が出来たのでブログの管理画面に移動します(^^♪

 

 

ダッシュボードの外観↓「テーマの編集」をクリックし

image.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

右側の一覧から、メインインデックスのテンプレート(index.php)をクリックします。

image.png

 

 

 

 

 

 

 

 

 

注意!)そしたらこちらも、念のためバックアップはしておきましょうネ!

バックアップの方法はこちらの記事をさんこうにどうぞ~(^^♪

 

 

 

▽メインコンテンツの部分の、<div id="main-contents">の下の赤枠で囲まれた部分に

HTMLタグを入れていきます。

image.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<div class="v-wrap al-c m30-b">先程コピーしたYou tubeのタグをここに貼り付けます。</div>

 

 

<div class="v-wrap al-c m30-b"></div>で囲むと、ブログをスマホで表示させたときに
動画も、スマホでもはみ出さずに表示(レスポンシブ対応)させるタグになります。

タグを貼り付けると下の図のようになります。

 

2016-02-16 15-14-44

 

 

 

 

 

 

 

 

 

 

後は、「ファイルを更新」をクリックします。

 

image.png

 

 

 

 

 

 

 

PC表示とスマホでも、表示を確認してみてくださいネ!

ファイル_000

 

では、今日はこの辺で~(^^)/

 

 

 

 

WordPress 賢威6.2カスタマイズ    コメント:13

この記事に関連する記事一覧

コメントは13件です

  1. あとむ より:

    こんばんは!

    動画をトップページに張る方法を詳しく説明してくれていたので

    そのうちにブログのトップページに張ってもいいかなと思います。

    動画の解説が分かりやすかったですよ!!

    応援プチして帰ります。

    • ikura ikura より:

      あとむさん、こんにちは!

      いつもコメントありがとうございます。
      ぜひ、あとむさんのブログに動画を貼ってみてくださいネ!
      楽しみにしています(^^)/
      応援ありがとうございます。

  2. angeliruka より:

    ランキングから目に止まりました
    うんうんと納得勉強になり感謝
    またきます

    ブログやってます、是非遊びに来てください

    • ikura ikura より:

      angelirukaさん、こんにちは!
      コメントありがとうございます。
      後ほど、angelirukaさんのブログにも
      伺います(^^)/
      これからも、よろしくお願いいたします。

  3. ゆり より:

    めっちゃ分かりやすいですね!
    なかなかここまで説明してくれている方は
    いないですよ。
    助かりました!

    • ikura ikura より:

      ゆりさん、こんにちは!

      わかりやすいと言ってくださり
      とても嬉しいです。
      これからも、頑張ります~(*´▽`*)

      これからも、よろしくお願いいたします。

  4. 徳 幸太 より:

    こんばんは。ランキングから来ました。徳です。
    こんな簡単にトップ画面にユーチューブの動画を埋め込むんですね。ちょうど気になっていたじきなので勉強になりました。ありがとうございます。
    これからも頑張ってください。

  5. ikura ikura より:

    徳さん、こんばんは!
    コメントありがとうございます。

    お役に立てたようで嬉しいです。
    これからも、よろしくお願いいたします(^^♪

  6. 林檎まま より:

    こんにちは

    動画とかはとても苦手意識がありましたが
    なんだかできそうな感じです。
    ありがとうございました。
    応援ポチしました♪
    また来ますね~!

    • ikura ikura より:

      林檎ままさん、こんにちは!
      いつもありがとうございます!

      動画をブログに貼るって難しそうな感じですが
      意外と大丈夫です^^
      ぜひ、挑戦してみてくださいネ。
      応援ありがとうございました。

  7. 陽平 より:

    最近はYouTubeからのアクセス流入を集客の要にしている人もいますから、動画編集したり、それをサイトで表示させる技術はますます重要になってくると思います。
    私も勉強させていただきました。

    • ikura ikura より:

      陽平さん、こんにちは!
      コメントありがとうございます。

      動画編集、私もこれから力をいれていきたいところです。
      お互いに頑張りましょ~(^^)/

  8. パパン より:

    ikuraさん

    こんばんは、パパンです。
    先日はブログへの訪問ありがとうございました。

    ikuraさんの記事非常にわかりやすくて
    素晴らしいと思いました。

    私は動画にチャレンジしたいと思ってはいるのですが
    漠然と難しそうという理由でためらっています。

    ikuraさんの記事を参考にして
    初めの一歩を踏み出したいと思います。

    ありがとうございました。

コメントフォーム

名前

 

メールアドレス

 

URL

 

 

コメント

トラックバックURL: