注目の記事 PICK UP!

baserCMSで、Youtube動画のスマホ最適化をする方法

baserCMSを利用したサイトの設定も終わったので、あとは更新するのみ!と思っていたのですが、忘れてたことがありました。

Youtube動画などのスマホ最適化・・・
PCで見ている時は問題ないのに、スマホで見ると横にガーッとはみ出しているっていうアレです。

baserCMSだと、どうすればいいのだろう・・・
漠然と不安を感じましたが、思った通り途中でひっかかりました。

baserCMSの場合、どの方法だとスマホではみ出さない?

WordPressでYoubute動画をスマホ最適化する方法

私が知っている方法だと↓この2つ。

  • CSSで設定して、投稿の際にclass指定してタグを記載する。
  • プラグインを利用する(私はAdvanced Responsive Video Embedderを利用中)

詳しい方法は後日記事にまとめます。

baserCMSの場合だと、情報が全然検索エンジンでヒットしない!!(T_T)
まずはこれに困りました。え~~っみんな動画導入しないの~~???

しかたがないので、自分で適当に試してみることに。

プラグインやタグの書き方など色々試してみた結果

Youtubeの動画の共有から取得する埋め込みコードのiframeタグは反映されるみたいですね。
記事を書いている時は動画は表示されずBOX表示ですが、プレビューURLから確認するとちゃんと動画は見れます。

ということは、動画を挿入すること自体は簡単なわけです。
でも、スマホで見るとはみ出す。(>0<) これがやっぱり解決しない。

プラグインはどうかというと、現状では厳しいですね。
私が利用できるプラグインをわかっていないのか、使い方をわかっていないのかどうかは不明ですが、初心者であればCSSでサッサとすました方がいいかと思いました。

無料プラグインに「oEmbed 有効化」というものがあって、oEmbed 有効化をインストールするととても楽ちんに動画の埋め込みは可能だけど、やっぱりスマホだとはみ出す・・・

あと、動画に限らず画像でも幅を100%指定して、縦は自動的に!って書き方をする時があります。width=”100%″ と書く代わりにheigthを削除したりするわけですが・・・
それでiframeタグを書き直すと、確かに横にははみ出さないけれど、高さがおかしくて見づらいことに。画像と同じようには、すんなりキレイに表示されてくれませんでした。

baserCMSもスマホ最適化するならCSS(スタイルシート)で!

とりあえず、同じCMSなのだから、WPと同じようにやればいいのでは?と思って、Wordpressとまったく同じ手順で試してみることに・・・

結果を言うと、WordPressと同じ手順でCSSに情報を追加して記載すれば可能でした。
追加するファイルを探すのは迷いまくりましたけど。

どのファイルに追加すれば良いのかさえわかれば簡単です。

CSSに追加する情報と記事での記載方法

WordPressだと、テーマによって違いはありますが、style.cssに情報を追加したりしますよね。
ここが、baserCMSだとわかりづらかった!style.cssではないですよ~。
ぐるぐる時間がかかったのはここだけ(笑)

style.cssに追加してもダメという時点で、???この方法はダメなのか?と、収集つかなくなりましたね(笑)とりあえず、すべてのCSSに貼り付けて確認すればよかったです。

baserCMSで、ratio_3_2のテーマを利用した場合、bootstrap.min.cssに情報追加します。
まさかこのファイルとは・・・
実際に編集画面を見るとわかるのですが、style.cssやconfig.cssは、キレイに改行されて書かれており、よく見るcssファイルって感じでした。しかし、それ以外の3つのファイルは、改行もなくびっしり敷き詰められて書かれていたので、「これはいじってはいけないものなのか?」なんて不安になったんですよね。CSSってよくわかっていないので。

スポンサードリンク

それに、WPだとstyle.cssというイメージが強く頭にあったせいで、何がどういけないのかわからず時間がかかりました。

最終的に、cssに全部貼って再度試すしかない!とやってみた結果、うまくいったのがbootstrap.min.cssだったということです。
では、タグを追加してみましょう。

bootstrap.min.cssに追加&保存

テーマ管理から、現在利用しているテーマの青い管理ボタンをクリックします。

テーマ管理

css一覧をクリックすると、5つのCSSファイルが並んでいます。
この中のbootstrap.min.cssを編集します。

スタイルシート

念のため、テキストエディタなどにコピーしてバックアップをとってから始めましょう。
そして、一番下に↓下記の内容を追加します。

.youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin-top: 20px;
margin-bottom: 20px;
}
.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

スタイルシート

※youtubeという部分は、任意でお好みの名前でOKです。
保存ボタンをクリックしておきましょう。
スタイルシートの設定はこれだけ!( ̄∇ ̄*)b

記事に投稿する時のタグの書き方

では、実際に投稿してみた記事を参考に、投稿の仕方を確認します。

動画部分は、投稿画面のソースボタンを押した状態で、divタグで埋め込みタグを挟むように記載します。

<div class=”youtube”>
<iframe allowfullscreen=”” frameborder=”0″ height=”315″ src=”URL” width=”560″></iframe>
</div>

※CSSに「youtube」と書かなかった人は、記載した文字にしてくださいね。

ソースボタンを再度押して元に戻ると、こんな感じになっています。

動画

一瞬「えっ!?」と思いますが、一度非公開の状態で保存すると上にプレビューURLが表示されるので、クリックして確認しましょう。動画はちゃんと表示されて見えますよ。

試しに投稿した記事で、最適化されているか確認してみてください。
ラジオ体操動画を探してきました

このテーマはレスポンシブデザインなので、ブラウザの横幅を狭くしていけば、画面サイズに合わせて動画も小さくなっていきます。スマホでもはみ出しません。

スポンサードリンク

関連記事

  1. baserCMSでサイト作成♡手順その1【 ratio_3_2編】

  2. baserCMSサイトをGoogle Search Consoleに登録してみた

  3. baserCMSでサイト作成♡手順その7【 ratio_3_2編】

  4. baserCMSでサイト作成♡手順その6【 ratio_3_2編】

  5. baserCMSでサイト作成♡手順その5【 ratio_3_2編】

  6. beserCMSを簡単インストールした手順と感想♡

  7. baserCMSでサイト作成<まとめページ>

  8. baserCMSでサイト作成♡手順その2【 ratio_3_2編】

  9. 要注意!baserCMSを使い出してすぐ失敗!(T_T)

スポンサードリンク

特集記事

  1. 私が利用しているおすすめのオンラインストレージ
  2. 料理・食材・スイーツなど食事関連のフリー素材サイト
  3. baserCMSでサイト作成<まとめページ>
  4. 私が利用しているフリー素材サイトまとめ
  5. WPのテーマならTCD!手軽にオシャレな本格的サイトになる♡

最新記事

人気記事

Twitter でフォロー

PAGE TOP