MINWEB[ミンウェブ]

みんな使えるWeb活用術『ミンウェブ』
by株式会社セルリア

フェイスブック

ツイッター

RSS

MINWEB[ミンウェブ]

みんな使えるWeb活用術『ミンウェブ』
by株式会社セルリア

フェイスブック

ツイッター

RSS

WordPressで画像を中央揃えにする方法3つ(デフォルト機能/CSS)

Date: Category: Webソリューション活用
  • このエントリーをはてなブックマークに追加

WordPressで画像を中央揃えする方法を3つご紹介します。

 


 1. デフォルト機能で解決 投稿画面の編集ボタンを利用

 2. CSSで解決 親要素になるブロックにスタイルシートを指定

 3. CSSで解決 imgタグをブロック要素にしてスタイルシートを指定


 

WordPressデフォルト機能で中央揃え

 

[1]投稿画面の編集ボタンを利用

投稿画面の編集ボタンを利用した画像の中央揃えは2ステップです。

 


 ステップ1 画像をクリックし指定する

 ステップ2 投稿画面にある中央揃えボタンを押す


 

・ステップ1 画像をクリックし指定する

画像の中央揃え1

画像にカーソルをわせクリックすると、画像が枠で囲われ編集ボタンが浮かんできます。

・ステップ2 投稿画面にある中央揃えボタンを押す

画像の中央揃え2

浮かび上がってきた編集ボタンともともと設置されていた編集ボタンどちらでも中央揃えが可能です。

・これで画像の中央揃えは完了です。

画像の中央揃え3

 

・プレビューを見てみると、ちゃんと中央揃えになっています。

画像の中央揃え4

 

こちらの方法が最も手軽でポピュラーなのでオススメです。

しかし、PHPをカスマイズしていくうちに中央に合わなくなったり

テーマによって機能しないケースがあるようなので、

その場合は以下のCSSを使う方法を試してみてください。

 

CSSで画像を中央揃え

 

[2]ブロック要素を親にしてスタイルシートを指定

インライン要素であるimgタグをブロック要素である、Pタグやdivタグで囲む方法です。

この時に使用するブロックに要素(pタグ・divタグ)にclassを付与し

text-align: center; と指定すると、その中に指定したimgを中央揃えにすることが出来ます。

画像を使う度にHTMLで修正をするとなるとかなりの労力になってしまうので

ある程度パターンを決めておいたほうがよいでしょう。

imgタグに共通のクラスを付与しCSSで一括管理できる形がよいと考えます。

このパターンでは.tacのような汎用クラスを使用するのではなく

.center-imgのようなクラス名を付与して、用途をtext-align:center;に限定して

利用するのがよいと思います。

[3]imgタグをブロック要素にしてスタイルシートを指定

基本的にimgタグを代表とするインライン要素のタグはマージンやパディングが出来ません。

しかし、imgタグにほとんどの場合付与されている class=”photo” を利用し、

そのクラスに、desplay: block; と指定することでブロック要素に変化させることができます。

その後は通常のブロック要素と同じように

margin:0 auto; と指定していただくことで、上下はマージンなし、左右はマージンを均等にとる

ように指定していただくと、画像を中央に揃えることができます。

ブロック要素とは・・・見出し・段落・表など、文書を構成する基本となる要素で、

一つのブロック(かたまり)として認識されます。

インライン要素とは・・・主にブロックレベル要素の内容として用いられる要素で、

文章の一部として扱われます。

 

まとめ

 

今回はシンプルにブログ投稿の際画像を中央揃えにする方法を3つ記述しました。

お役立ちできれば幸いです。

 

-カテゴリ:WordPress

Webマーケティング think the web

Date: Category: Webソリューション活用
  • このエントリーをはてなブックマークに追加

Webソリューション活用のウェブアクセル

最新記事一覧
カテゴリー

Webソリューション活用のウェブアクセル