ニコニコ動画をワードプレスに綺麗に埋め込もう

WEB

ニコニコには無反応のワードプレスに動画を埋め込みましょう。

レスポンシブルデザインにも対応します。

まずは初期状態を確認しよう

ニコニコ動画

PCだとそこまで違和感がないかもしれませんが、スマホだと変な形になったりします。

スマホで見た時のデフォルト状態

今回はこれを直して見やすくしたいと思います。

CSSに記述を付け加える

CSS(カスタムシート)に以下のコードをコピペして下さい。

外観からカスタマイズを選択し、追加CSSを選択します。

外観→カスタマイズを選択
追加CSSを選択

すると下の画像のような画面になるので、下記コードをコピペして、必ず公開を押してください

コードを張り付けた状態

張り付けるコード

/*埋め込み動画レスポンシブル*/
.umekomi {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.umekomi iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

これでCSSの準備は整ったので、実際に張り付けてみましょう。

動画を埋め込む

コードを習得

PC版動画プレイヤーの右上に共有ボタンがあるのでクリックし、プレーヤー埋め込みコードをコピーします

ワードプレス側の準備

先ほど追加したCSSは埋め込んだプレイヤーの表示をコントロールするもので、対象を指定しなければいけません。

ただコピペしただけでは動作しないのでカスタムHTMLで動画を埋め込みましょう。

画像のように「ブロックを追加」を選択し、ウィジェットにカスタムHTMLがあるのでクリックをします。

kここnこのこのkこのきこのこ

このようになればOKです

カスタムHTMLに張り付け、対象を指定する

先ほどコピーしたコードを作成したカスタムHTMLに張り付けます。

次に、CSSで指定した.umekomiに対応させるため、<div class=”umekomi”>で囲みます。

<div class=”umekomi”>コピーしたコード</div>という感じにします。

下記コードは使用例です。

<div class="umekomi">
<script type="application/javascript" src="https://embed.nicovideo.jp/watch/sm37576518/script?w=640&h=360"></script><noscript><a href="https://www.nicovideo.jp/watch/sm37576518">レーザービーム/Perfume feat AIきりたん&イタコ</a></noscript>
</div>

使用前と使用後の違いを見てみましょう

使用前
使用後
使用後のスマホ閲覧

使用前はプレイヤーが小さいですが、使用後は全体に引き伸ばされて見やすくなっています。

また、スマホでは縦に伸びず綺麗に保っています。

このように指定すると画面の幅に合わせて伸縮するデザインになります。

終わりに

スマホ/PCで同じデザインを表示できるので非常におすすめです。

ニコニコ動画はスマホで見ると縦長になったりするのでCSSでの指定は必須になります。

少し面倒ですが、格段に見やすくなるので張り付ける場合は指定しましょう。

それでは!

CSSで指定した場合↓

コメント

  1. […] ニコニコ動画をワードプレスに綺麗に埋め込もう […]