【解決済】ワードプレスで右揃え、中央揃えが効かない！

ワードプレスのエディタで中央揃え、左揃え、右揃えを選んでも全然動かないじゃん！ずっと左側にべたーっ！と張り付いたまんまなんだけど？私左揃え選んでないんだけれども？という場合、けっこうありますよね。

ということでここではワードプレスで右揃え、中央揃えが効かない！の解決方法を紹介します。

ちなみにワードプレスには新エディタ（ブロックエディタ）と旧エディタがありますが、どっちでも対応OKです。また記事下部にレスポンシブ対応版も書いておきますので同時に参考にしてくださいね。ではいきましょう。

いきなり解決方法

いきなり解決方法から。なんでそうなるの？という理由や原因は記事下部にまとめるので気になる人だけ読んでみてくださいね。

これはcssで右揃えと中央揃えのデザインが設定できてないのが問題。ということでこれを追加しましょう。

テンプレートのcssをいじるのでちょっと抵抗か…という場合は、ワードプレス管理画面の「外観」→「カスタマイズ」より「追加CSS」の所に貼り付けることでも解決できます。

css

.aligncenter{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignright{
	float: right;
	margin-left: 1.5em;
}
.alignleft{
	float: left;
	margin-right: 1.5em;
}

はい、これでOK！

aligncenter,alignleft ,alignrightというのが右揃えだったり中央揃えを選んだアイテムにワードプレスがつける名前（クラス名）なのでそれに対して新しく、んじゃこの場合はこうしてね！というデザインを設定しています。

aligncenter,alignleft ,alignright

ここからは気になる人だけ。

ワードプレスの旧エディタはこのaligncenter,alignleft ,alignrightは完全にテンプレート側で設定しとかないと右揃え中央揃えにならなかったんです。

んでワードプレスは新エディタ、ブロックエディタというものに最近移行中で、このブロックエディタはなんか中途半端にaligncenter,alignleft ,alignrightに対応しているというか。

画像（imgタグは）何もしなくてもaligncenter,alignleft ,alignrightが有効になってるっぽいのに、それ以外の、例えばblockquoteとかボタンとか、そういうアイテムはテンプレート側で上の例のようにaligncenter,alignleft ,alignrightを設定して上げないと右揃え中央揃えにならないんです。

なんか不思議ですがあって困るもんでもないのでとりあえずテンプレート側のcssに上記数条を書いておくのがおすすめ。

レスポンシブ対応版

レスポンシブ対応のaligncenter,alignleft ,alignrightも一応。

ただこちらは「@media (max-width: 480px)」の部分の480pxっていうのが使ってるテンプレートによって違うはず（どの画面サイズからスマホレイアウトで表示するかが異なる）なのでそこだけ注意してくださいね。

css

.aligncenter{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignright{
	float: right;
	margin-left: 1.5em;
}
.alignleft{
	float: left;
	margin-right: 1.5em;
}
@media (max-width: 480px){
	.alignright{
		float: none;
		margin-left: 0;
	}
	.alignleft{
		float: none;
		margin-right: 0;
	}
}