WordPressにYoutube動画をレスポンシブで埋め込む方法【簡単】
「WordPressにYOUTUBE動画を埋め込んだけど、スマホで見たら動画がはみ出てる…！！」 ということがないように、この記事ではWordPressにYOUTUBE動画をレスポンシブで埋め込む方法をお伝えします。 CSSをいじるのですが、コピペでOKなので安心してください。簡単に出来るので、もしYOUTUBE動画をレスポンシブで埋め込みたい場合は参考にしてもらえればなと。 それではさっそく見ていきましょう。 YOUTUBE動画をレスポンシブ対応させるCSSを追加するまず、CSSにYOUTUBE動画をレスポンシブ対応する記述を追記していきます。 WordPressの「外観」の「カスタマイズ」をクリックします。 そのあと「追加CSS」をクリック。 そしたら、CSSに以下の記述をコピペしてください。 .youtube { position: relative; padding-bottom:
WordPressでアイキャッチ画像のサイズを変更する方法 – FOXWP
set_post_thumbnail_size()で指定する この方法は、functions.phpファイルを編集します。次のコードをfunctions.phpファイルに追加してください。 set_post_thumbnail_size( 100, 100 ); ()の中に書いてある数字は任意で指定できます。前から順番にアイキャッチ画像の幅、高さになります。 また数字の後ろにtrueという単語を入れると切り抜きモードになります。 set_post_thumbnail_size( 100, 100, true ); 切抜きモードは画像がサイズに合わせてリサイズされることなく、切り抜きが行われます。 the_post_thumbnail()に指定する この方法は、the_post_thumbnail()の()の中にアイキャッチ画像のサイズを指定する方法になります。 いくつか指定する方法がありま
.matchMedia()でJSでもメディアクエリを使って条件分岐する | SPYWEB
if (matchMedia('(max-width: 798px)').matches) { // ウィンドウサイズが798px以下のとき } else { // それ以外 } .matchMedia() を使うことでCSSのメディアクエリのように条件分岐することができます。しかし、この記述だと ページが読み込まれた時 にしか実行されません。CSSのメディアクエリはウィンドウサイズを変更したらスタイルが適用されますよね。 var mediaQuery = matchMedia('(max-width: 798px)'); // ページが読み込まれた時に実行 handle(mediaQuery); // ウィンドウサイズが変更されても実行されるように mediaQuery.addListener(handle); function handle(mq) { if (mq.matches)
Facebook, Twitter, Instagram, TikTokなど、各ソーシャルメディアで最適な画像・動画サイズのまとめ -SocialSizes
Facebook, Twitter, LinkedIn, Instagram, Pinterest, TikTok, YouTube, AppStoreなど、各ソーシャルメディアで最適な画像のサイズ、最低限必要なサイズ、動画の長さなどをまとめてダウンロードできるSocialSizesを紹介します。 Adobe XD, Figma, Sketch, Photoshop用のファイルが用意されており、個別でも一括まとめてダウンロードもできるので非常に便利です。 SocialSizesでサポートされているソーシャルメディア Facebook Instagram LinkedIn Twitter Snapchat YouTube Pinterest Twitch Whatsapp AppStore TikTok ProductHunt Vk PlayStore 各ソーシャルメディアで最適な画像・動画
テキストエリアのリサイズ機能を、CSSで制御する方法 | たねっぱ！
デフォルトでは、エリアの右下をドラッグしてリサイズできますが、レイアウトが崩れることもあります。 CSSを使って防げますので紹介します。 CSSでテキストエリアのリサイズを制御してみよう ベースとなるHTML、CSSはこちらです。 <textarea name="sample"></textarea> <style> textarea{ width: 150px; height: 100px; } </style> デフォルト（タテ・ヨコともにリサイズ可能な状態） 通常はこの状態です。 textarea { resize: both; } タテ方向のみリサイズ可能 textarea { resize: vertical; } ヨコ方向のみリサイズ可能 textarea { resize: horizontal; } テキストエリアの最小値と最大を指定する（指定の大きさまでリサイズ可） 最小
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Is it possible to calculate the Viewport Width (vw) without scrollbar?
