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

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

 

こんにちは!sabo(sabo_nochihare)です。

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

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

スポンサーリンク
スポンサーリンク

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

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

CSSコードを追加する手順

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

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

▼「追加CSS」をクリック

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

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

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

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

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

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

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

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

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

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

sabo
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にお任せして、記事の構成を考えたり執筆に専念できる環境を整えましょう!

コメント