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が表示されるので、クリックして確認しましょう。動画はちゃんと表示されて見えますよ。
試しに投稿した記事で、最適化されているか確認してみてください。
ラジオ体操動画を探してきました
このテーマはレスポンシブデザインなので、ブラウザの横幅を狭くしていけば、画面サイズに合わせて動画も小さくなっていきます。スマホでもはみ出しません。