スマホで記事を見た時、動画や表が見にくかったので、修正しました


今回は雑記です

「雑記」というカテゴリーを儲けて、サイト運営のことを時々書いてみようと思います

Youtuberに関係ない記事なので、興味ない人は飛ばしても大丈夫ですよっ!

スマホで見たらYoutubeやテーブルの右側がぶつ切りに

ふと、スマホでYoutuberCHを見てみたら

記事内に埋め込んだユーチューブ動画や
テーブルタグを使用した表の右側部分が表示されてないことに気づきました

スマホユーザーの人にもしっかりと記事を見てほしい

これはすぐに修正しなくてはッ!!!

テーブル(表)をスマホでも見れるように対応

Responsive Scrolling Tables

という神プラグインを発見したので、こちらを使用しました

Responsive Scrolling Tablesを導入したことで、
スマホで見た場合、
テーブルの表をスワイプすることで左右に動かせるようになりました

※以下にテーブルを貼ります。スマホの人は左右に動かしてみてください

右に左に 動かせるよ 右に左に 動かせるよ 右に左に
動かせるよ 右に左に 動かせるよ 右に左に 動かせるよ

どうですか?

動かせましたか?


広告




Youtube動画をスマホ対応(レンスポンシブ)に

これは少し苦労しましたが、終わってみれば一瞬で解決しました

「ワードプレス Youtube スマホ対応」

で検索すると、

YOUTUBE動画をスマホ動画サイズを最適化して埋め込む方法

は沢山でてきました

動画の埋め込みコードの前後に

<div class=”v-wrap al-c m30-b”>動画のコード</div>

を入れる方法や、

youtube動画を埋め込む

Advanced Responsive Video Embedder

というワードプレスのプラグインを使う方法などが出てきました

YoutuberCHの特質上、記事にかなり多くの動画を埋め込んでいました

…なので、これから埋め込む時にYoutube対応にするだけじゃ意味がなかったわけです
今まで埋め込んだ動画1つ1つを手作業で入れなおすなんて嫌だ!!!

って思いつつ、ひたすらGoogle先生に教えをもらっていたら…

見つけました

一発で解決する方法が!!!

CSS.styleにたった1行

iframe{ width:100%; }

と入れるだけで

パソコンで見た時はパソコンの画面サイズ、

スマホで見た時に右側が切れずに、

自動でスマホ対応された動画が埋め込まれるように!

今後とも、YoutuberCHをよろしくお願いいたします

follow us in feedly にほんブログ村 ネットブログ YouTubeへ
にほんブログ村


広告


Topページに戻る

人今からでも大丈夫!初心者向けYoutubeの始め方

歌手になるチャンス?20~49歳男女限定のオーディションとは

歌い手&実況者向けのマイク・機材を紹介

コーディネートの参考にもゼヒ!メンズカジュアルをトータルで販売♪

インスタ映えする写真のコツ&方法まとめ

【てんちむプロデュース】着けるダケ理想のバストへ

どれを選べばいい?ユーチューバー向けビデオカメラ撮影機材の選び方

いい声で録音できるオススメのマイク7選

ネットで”合法的”に”無料”で「アニメ・ドラマ・映画」を見る方法

Youtuberてんちむ愛用!マジカルシェリー骨盤ショーツ!

ユーチューバー・歌い手・ゲーム実況者に必要な機材まとめ


【免責事項】
各記事に書かれている内容は、及びネット上に既に拡散された内容を元に
個人の感想を踏まえて書いています

基本的に事実に基づいて書くようにしますが
既にネット上で拡散されていた内容自体に誤りがある場合もあるので、
搭載との記事にも誤りが生まれる場合があることを予めご了承願います。

記事の内容に誤りのある場合や、事実であったとしてもご本人様からの修正、削除依頼は
お問い合わせフォームより連絡いただければなるべく速やかに対応致します。

記事内で使用している画像などについても同様に対応しております。

このサイトについて

シェアする

  • このエントリーをはてなブックマークに追加

フォローする