AFFINGER5(WING)で動画の横幅いっぱい表示を縮小する方法

秋田です。

AFFINGER5(WING)を使っていますが・・・Youtube動画を共有から埋め込みすると・・・自動的に横幅いっぱいに表示されるためPCだとエライことになってしまします。

大迫力画面、となるのです。
もちろんスマホだと自動調整ですので・・・違和感なく表示されます。(スマホの方はご安心ください)

それで・・・PCで閲覧してくださる読者さまでもビックリすることなくYoutube動画の埋め込みを見ていただくためにカスタマイズすることにしました。

このサイズだとどうでしょうか?
 

 
PCで見ても・・・違和感なく表示されているかと思います。

今回は

・AFFINGER5(WING)でYoutube動画の表示サイズを適度な大きさにするカスタマイズ

についての解説です。

 

目次

大きさの比較とカスタマイズ方法

まずは何もしない時のPCでの表示サイズは下のようになります。
Youtube動画からそのまま「埋め込み」のコードをコピペしたものがカスタマイズ前です。

繰り返しますが・・・スマホだとちゃんと縮小されてますのでビックリ感は出ないと思います。

Youtube動画埋め込み(PC表示)画面のビフォー(Before)

ド迫力です。(スマホの方はごめんなさい。自動的に調整された横幅いっぱいの画像になっているかと思います)
 

 
単純にコピペしたものは
■ width=560
■ heght=315 になっています。

560:315=16:9です。

この比率はちゃんと意識しておいてください。

これをカスタマイズしたものがこちらです。

矢印イメージ画像

 

アフター(After)

残念ながらスマホはビフォーと同じ大きさに表示されているかと思います。
違いがわからないかも知れません。

PCで見ている方は、いかがでしょうか。
 

 
ちゃんと、ほどよく縮小されているかと思います。

では、早速カスタマイズのやり方をご案内します。

 

カスタマイズ(調整)のやり方

横幅いっぱいに広がってしまうので・・・記事入力欄に読者からは見えない形で、箱(ボックス)をつくります。

下のようなイメージです。

ボックス配置してその中にYoutube動画を挿入するイメージ画像

その箱の横幅を制限した上で、その箱の中にYoutubeのコードを入れるようにします。
簡単【2ステップ】です。

 

前提条件として

Youtube動画は・・・16:9の比率で作成されていますので・・・その比率をずっと追いかける形だサイズを縮小してください。

私はYoutube動画そのもののサイズ(widthとheight)は、ピッチリと合わせています。

Youtube動画サムネイル画像の大きさ 1280×720px=16:9
さまざまな大きさ 64:36=:16:9
112:63=16:9
128:72=16:9
256:144=16:9
336:189=16:9・・・※【A】
448:252=16:9・・・※【B】
512:288=16:9
・・・

※【A】と【B】が何となく(PCで見た時に)良さそうな感じかな、と私は思いましたので・・・この数字を元に「白い箱(ボックス)」を作ることにしました。

 

追加cssのカスタマイズ【ステップ1/2】

[st-kaiwa1]私は・・・※【A】のサイズに合わせる形で白いボックスを作ることにしました。
もちろんお好きなように※【B】に合わせるサイズでも構いません。[/st-kaiwa1]

下記のコードをWPの管理画面から
「外観」⇒「カスタマイズ」⇒「追加css」に貼りつけてください。

.tablebox {
margin-left: auto;
margin-right: auto;
margin-bottom:30px;
width: 450px;
height: 260px;
}

私は、※【B】の448×252の動画サイズを埋め込むために、白い箱(ボックス)のサイズを上のコードにあるように450pxと260pxにしたものです。

もし※【A】に合わせるのであれば・・・350×200pxでもいいかと思います。

[st-kaiwa3]もし可能であれば・・・上のコードを下記のようにしてAddQuicktagに登録しておくのもお薦めです。[/st-kaiwa3]

【AddQuicktagへの登録方法】
当然、プラグインがインストールされている前提です。

「設定」⇒「AddQuicktag」

■ 開始タグ
<div class=”tablebox”>

■ 終了タグ
</div>

いつでも呼び出して使えます。

これで準備完了です。

 

記事入力(投稿)欄の書き方【ステップ2/2】

ズバリ・・・
下記のように記述してください。

<div class=”tablebox”>

この間にYoutube動画のコードをコピペします。

</div>

バッチリ、縮小された動画が挿入されたと思います。
念のために・・・

私は動画のコードそのものにあるサイズも

width=”560″ height=”315″ ⇒ width=”448″ height=”252″に変更しています。

 

まとめ

AFFINGER5カスタマイズまとめイメージ画像
最近のWPテーマはかなりスマホ対応を意識したつくりになっています。
まさにレスポンシブ機能が充実している、のが当たり前という感じです。

逆にPCでの表示に違和感が出ていたことからカスタマイズしたものです。
【簡単2ステップ】のコピペでカスタマイズできますので、ぜひお試しください。

【まとめ】
・AFFINGER5(WING)へのYoutube動画埋め込み時の動画サイズをPC閲覧でも違和感なくする方法で、PC閲覧者へのユーザビリティも追求した形のカスタマイズです。
・特にこれから・・・動画とブログ、さらにはSNSなどを連動させたい、という方でAFFINGER5を利用している方へのお薦めカスタマイズでした。
・自分なりのサイズを検討・決定した上でcssを追加してください。

 

ここまで本当にありがとうございました。

 

スポンサードリンク



 

よかったらシェアしてね!

この記事を書いた人

秋田秀一と申します。銀行に31年勤務して定年退職後、二足の草鞋を履いています。副業・起業・借金(資金調達と返済)についてお手伝いできましたらうれしい限りです。⇒ プロフィール

目次
閉じる