Blog tips

【wordpress】ブログ記事内のSNS埋め込みパーツを簡単にセンタリングする方法

  /

ブログに Twitter や Instagram などの SNS の投稿を引用して埋め込みたい時ってたまにありますよね。

SNS埋め込みコードはコピペで済むので簡単なのですが、デフォルトのままのスタイルシートだとSNSパーツは記事内で左寄せの状態になっています。この記事では埋め込みしにひと手間加えるだけで、簡単に中央寄せする方法をご説明します。 （コピペ OK、作業1分）

SNSの埋め込みパーツを中央寄せにする方法

埋め込みコード用の「ハコ」を用意する

まずは記事内で埋め込みパーツを挿入したい場所に、下記のコードを貼り付けます。WordPress の場合は投稿画面の「テキスト」タブを選択してから貼り付けましょう。

HTML

<div style="display: flex; justify-content: center;">
  
</div>

埋め込みコードを貼り付ける

後は貼り付けたコードの空行の箇所に、コピペしてきた埋め込み用のコードを貼り付けるだけ。

HTML

<div style="display: flex; justify-content: center;">
  // ここにSNSから取得した埋め込みコードを貼り付ける
</div>

これで作業は終了です。

こちらの説明だけで理解していただいた方は、以降の文章は読まなくて大丈夫です！お疲れ様でした。念のためプレビューして確認してみてください、ちゃんと中央寄せになっていると思います。

Twitter の埋め込みパーツを中央寄せにする

ここからは実際に埋め込みコードを取得するところから、wordpressでセンタリング表示するところまでをご説明します。

まずはwordpressのテキストエディタ画面で、埋め込みパーツを挿入したい場所に先ほどのコードを貼り付けます。

埋め込みたい Twitter の投稿の埋め込みコードを取得してきます。

コピーした埋め込みコードを、先ほど貼り付けたコードの空行部分に貼り付けます。

これでおしまいです。

Instagram の埋め込みパーツを中央寄せにする

Instagram も手順は同様です。まずはwordpress投稿画面で埋め込みパーツを挿入したい場所にコードを貼り付けます。

埋め込みたい Instagram の投稿から埋め込みコードを取得してきます。

コピーした埋め込みコードを、先ほど貼り付けたコードの空行部分に貼り付けます。

これで完了です！

スタイルを別の CSS ファイルで管理したい場合

もし HTML タグ直にスタイルを書き込みたくない場合は、クラスを設定し、別途CSS ファイルに追記してスタイルを適用しましょう。

HTML

<div class="post-sns-box">
  // ここにSNSから取得した埋め込みコードを貼り付ける
</div>

CSS

.post-sns-box {
  display: flex;
  justify-content: center;
}

まとめ

ブログ記事内のSNS埋め込みパーツを簡単にセンタリングする方法をご紹介しました。

ほんのひと手間加えるだけで、記事のレイアウトが整うと思うので、是非試してみてください！

ではでは。

css html wordpress
RELATED POST