【3分で解決】WordPressの画像を自動で「中央揃え」にする方法

2023/10/24

本サイトにはプロモーションが含まれます

こんにちは。sabo（ sabo_nochihare）です。

記事に挿入した画像をひとつずつ手作業で中央揃えするの、地味に疲れますよね。

この記事では画像の「中央揃え」を自動化する方法を説明します。

この記事を書いた人

sabo

・ブログ開始：2021年5月
・収益化開始：2022年1月
・2022年の確定収益：約400万円（詳細はこちら）
・使用しているテーマ： SWELL

　 Twitter　　 Contact

ブログの運営記録

テーマを SWELL に変えた10ヶ月目から作業時間は2/3、収益は2倍以上に！

収益増に役立った本

2,310円(税込)

詳細

~~3,980円(税抜)~~
→ 550円(税込)

詳細

3,800円(税抜)
→ 無料！

詳細

クリックできる目次

画像の「中央揃え」を自動化するCSSを追加

WordPressの記事内にある画像を自動で中央揃えにするには、CSSコードを書き込むことで解決します。

CSSコードを追加する手順

ここから、CSSコードの追加手順を画面キャプチャ付きで解説します。

▼WordPressメニューの「外観」→「カスタマイズ」をクリック

▼「追加CSS」をクリック

▼以下のコードをコピーし、CSSに追加して「保存」をクリック

.entry-content figure.wp-block-image {
    width: 100%;
    text-align: center;
}

▼記事を表示し、手作業で「中央揃え」していない画像が「中央揃え」になっていれば完了

コードを追加しても、編集画面では画像が中央揃えになりません。プレビューや実際の記事で中央揃えになっているかを確認してください。

一部の画像だけ「中央揃えにしたくない」場合

基本的には挿入した画像すべて「中央揃え」でいいけど、一部は意図的に「左揃えにしたい」などの場合の対処法です。

方法は簡単。対象の画像を、記事編集の画面で個別に設定すれば、そちらが優先されます。

画像配置を自動化するCSSコード集

書き込むCSSコードをカスタマイズすれば、中央揃えだけではなく、左寄せ・右寄せなども自動化できます。

以下に画像配置を自動化をするCSSコードをいくつか用意しました。

sabo

みなさんの手間が少しでも省けますように！

画像の「左寄せ」を自動化するCSSコード

記事内の画像を自動で「左寄せ」するには以下のCSSコードを追加します。

基本の設定が「左寄せ」なので、あまり必要ないかな・・・

.entry-content figure.wp-block-image {
    width: 100%;
    text-align: left;
}

画像の「中央揃え」を自動化するCSSコード

記事内の画像を自動で「中央揃え」するには先ほど紹介したCSSコードを追加します。

.entry-content figure.wp-block-image {
    width: 100%;
    text-align: center;
}

画像の「右寄せ」を自動化するCSSコード

記事内の画像を自動で「右寄せ」するには以下のCSSコードを追加します。

.entry-content figure.wp-block-image {
    width: 100%;
    text-align: right;
}

まとめ：作業は自動化して執筆に専念しよう！

この記事では、画像の「中央揃え」を自動化する方法を説明しました。

ひとつずつの作業は軽微でも、積み重なると負担になるし、時間もバカになりません。

それが3分で解決するなら、使わない手はないですよね。

自動化できる作業はできるだけ設定やCSSにお任せして、記事の構成を考えたり執筆に専念できる環境を整えましょう！

よかったらシェアしてね！

URLをコピーしました！