WordPress(ワードプレス)で中央寄せに配置する方法を詳しく解説

Wordpress(ワードプレス)で中央寄せに配置する方法を詳しく解説blog

WordPress(ワードプレス)で文字を中央寄せに配置するのは簡単ですが、カスタムHTMLを使ったコンテンツを中央寄せに配置するのに困っていませんか?

カスタムHTMLを使ったコンテンツを中央寄せに配置するには、貼るコンテンツによって方法が異なります。

そこで、コンテンツごとに中央寄せに配置する方法を詳しく解説します。

スポンサーリンク

画像のキャプションを中央寄せに配置する方法

画像のキャプションを中央寄せに配置するには、テーマのCSSをカスタムする必要があります。

スタイルシートにコードを追加する

外観からカスタマイズを選択します。

CSSカスタマイズ

次に追加CSSを選択します。

追加CSSを選択

追加CSSに以下のようにコードを書きます。書き終わったら公開ボタンをクリックして公開すると、画像のキャプションを中央寄せに配置して表示できます。

追加CSSのコード

書き込むコード

figcaption {
text-align : center;
}

TouTubeを中央寄せに配置する方法

Youtubeの埋め込みを中央寄せに配置するには、テーマのスタイルシートに中央寄せにするコードを書いてたら中央寄せに配置することができます。

スタイルシートにコードを書く

コードを書くために外観からテーマエディターを選びます。

外観からテーマエディターを選ぶ

スタイルシート(style.css)に以下のコードを追加で書き、コードを書き終わったら「ファイルを更新」をクリックして書いたコードを保存させます。

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

これで、カスタムHTMLにYoutubeの埋め込みコードを貼り付けたら、中央寄せに配置されます。

Gooleマップやストリートビューを中央寄せに配置する方法

Gooleマップやストリートビューを中央寄せに配置するには、下記のタグを最初と最後に追加すると中央寄せに配置できます。

<div style="text-align: center;">(ここにGoogleマップの埋め込みコード)</div>

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

Twitterを埋め込んで中央寄せに配置するには、テーマのCSSをカスタムする必要があります。

スタイルシートにコードを追加する

外観からカスタマイズを選択します。

CSSカスタマイズ

次に追加CSSを選択します。

追加CSSを選択

追加CSSに以下のようにコードを書きます。書き終わったら公開ボタンをクリックして公開すると、Twitterを中央寄せに配置して表示できます。

CSSに追加するコード

書き込むコード

.twitter-tweet {
	margin: 0 auto;
}

インスタグラムの埋め込みを中央寄せに配置する方法

インスタグラムの埋め込みを中央寄せに配置するには、テーマのスタイルシートに中央寄せにするコードを書いて、カスタムHTMLで書いたコードのタグを追加します。

スタイルシートにコードを書く

スタイルシートにコードを書くために外観からテーマエディターを選びます。

外観からテーマエディターを選ぶ

スタイルシート(style.css)に以下のコードを追加で書く。コードを書いたら「ファイルを更新」をクリックして書いたコードを保存させます。

max-widthは、好みのサイズで変更して調整してください。

/*インスタグラムの中央配置タグ(max-widthを省くと中央配置できなくなる)*/
.instagram-center {
	margin:0 auto;
	max-width: 500px;
}

カスタムHTMLの書き方

次にカスタムHTMLで以下のような書式でインスタグラムの埋め込みコードを書き込むと中央寄せに配置することができます。

<div class="instagram-center">インスタグラムの埋め込みコード</div>

まとめ

カスタムHTMLは便利ですが、埋め込むコンテンツによって中央寄せに配置する方法が違うので面倒くさいですが、一度設定してしまったら、タグを追加するだけで中央寄せに配置できるので簡単になります。