YouTubeやTwitterの埋め込みを中央寄せにする方法

20200810-study表紙

スポンサーリンク

YouTubeやTwitterの埋め込みを中央寄せにする方法

以前、『YouTube動画の埋め込みを中央に配置する方法』を紹介したんですが、Twitterの画像も合わせて2通りそれぞれ改めてご紹介します。

※WordPressでCocoon使用時の画像説明になります。

  • YouTube動画の埋め込みを中央に配置する方法
  • Twitter画像の埋め込みを中央に配置する方法

WordPressでブログやサイト作成時に、YouTubeの動画やTwitterの埋め込み画像を中央に配置する方法を紹介します。

YouTube動画の埋め込みを中央に配置する方法

ブログにYouTube動画を埋め込む
❶ YouTubeから動画を選択し、登録ボタン付近にある【共有】ボタン選択。
YouTube共有ボタン
❷ 【埋め込む】ボタン選択。
YouTube埋め込み
❸ 左に動画画像、右にURLが表示されるので、URLか、右下にある【コピー】ボタンを選択しURLをコピー。
YouTube埋め込みをコピー
❹ コピーしたURLをWordPressのテキスト上の好きな場所に貼りつける。
動画を中央揃えにする。
❶ WordPressのビジュアル表示上で動画を選択し、【中央揃え】ボタンを選択する。

※通常はURLを貼り付けると左寄せで表示されます

WordPress中央揃え
(上記の方法か、テキスト上でセンタータグを直接入力する)

<p style="text-align: center;">コピーした動画のURL</p>

又は、

<div style="text-align: center;">コピーした動画のURL</div>
❷上記の方法で中央揃えが出来ない場合は、【子テーマのスタイルシート】に下記のCSSを指定する。

 

  • WordPressの【外観】➡【テーマエディター】
    WordPressのテーマエディター
  • 【テーマの編集】➡【Cocoon Child:スタイルシート(style.css)】を選択し、【子テーマ用のスタイル書く】で、CSSを入力する。

テーマの編集WordPress

テーマの編集WordPressのcss
テーマの編集のcssを指定

詳しくは下記記載

⬇⬇

/*YouTube動画の中央配置*/
.video-container{
margin: 0px auto;
}

※ /**/の記号内にメモしておくと何のコードだったか後から見直す時に便利です。

Twitter画像の埋め込みを中央に配置する方法

ブログにTwitter画像を埋め込む
    1. ツイート内の右上に表示されている ∨ アイコンをクリック
    2. メニューから 「ツイートを埋め込む」を選択
    3. 「Copy Code（コードをコピー）」をクリックしコードをコピー
    4. 任意の場所に貼りつける(Ctrl+Vまたは、⌘+Vで貼り付ける)
    5. そのままの状態で貼り付けると左寄せで表示される

liliytw-Twitter埋め込み説明1

 画像を中央揃えにする
コードに少し手を加えて中央揃えにする(WordPress以外でも使える)

★コピーして来たコードは下記のような感じです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ん？どした？（笑）???? <a href="https://t.co/xooeUdfGvx">pic.twitter.com/xooeUdfGvx</a></p>&mdash; える????猫とひきこもり (@liliytw) <a href="https://twitter.com/liliytw/status/1277405902048378880?ref_src=twsrc%5Etfw">June 29, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

★コピーして来た上記例題コードのclass=”twitter-tweet”の部分にコードを加える。

➡ class=”twitter-tweet tw-slign-center”
★中央揃えになる。

下線部の指定を変える事で右寄せも可能
  • 中央揃え　class=”twitter-tweet tw-slign-center“
  • 右寄せ　　class=”twitter-tweet tw-slign-right“
CSSを指定して中央揃えにする

毎回指定するのが面倒な場合や、ほとんど中央揃えの場合は、CSSで指定しておくと変更する手間が省けて便利に使用する事が出来る。

  1. WordPressの【外観】➡【テーマエディター】
  2. 【テーマの編集】➡【Cocoon Child:スタイルシート(style.css)】を選択
  3. 【子テーマ用のスタイル書く】で、CSSを入力する。
  4. 【ファイルの更新】を押して更新する。

 

WordPressのテーマエディター

テーマの編集WordPress

Twitter中央揃えcss

詳しくは下記記載

⬇⬇

 

テーマの編集cssファイルの更新

 

/* ツイート埋め込みを中央配置する */
.twitter-tweet {
	width: 500px !important;
	margin-left: auto;
	margin-right: auto;
}

― 広告 ―

― 広告 ―

まとめ

 

HTML・CSSなど、詳しくは専門サイト参照下さい。

他にも埋め込みコードの種類はありましたが、簡単で実際に自分で使用して機能している2種類の方法をご紹介しました♪

他にも『文字に囲み枠を付けるHTMLタグをコピペ用に保存版にしました♪』コチラも参考にしていただければ幸いです(*’▽’)/♡

◆◇◆サイト内検索を便利に使ってもらって、ワードを検索してみて下さい♪◆◇◆

『アラフィフの奮闘記』『猫との暮らし』『本、映画、音楽etc…』『サイト作成に必要なお勉強』

!!誤字・脱字、記載に何か問題のあるようでしたらコメント下さいm(__)m
える[Twitter猫、FANBLOG、Change Myself､ エラレルゥ､ Twitterエラレルゥ*^^*]
YouTube動画の埋め込みを中央に配置する方法(Cocoon使用時)
最近のご報告と、YouTube動画の埋め込みを中央に配置する方法が解決したのでご報告。
liliy.site
文字に囲み枠を付けるHTMLタグをコピペ用に保存版にしました♪
文字装飾で良く使う囲み枠を付けるHTMLタグを、コピペで使えるように保存版として記載しました。
liliy.site