WordPressで画像を中央揃えにするには

 文章に説得力をもたせたり記事の彩りとしてブログの文章に画像や写真を挿入することは欠かせません。WordPress では「投稿の編集」画面から「メディアを挿入」ダイアログを利用して画像を貼り付けますが、スタイルシートでどのように指定すればよいのかを解説したいと思います。

20161023_1_1

写真はどこで集めるの?

 記事に挿入したりアイキャッチとして設定するための画像や写真ですが、もちろん自分で描いたり撮影してもよいのですが、時間が足りなかったり腕前に不安がある人も多いですよね。そんなときは無料で使うことのできる素材サイトさんにお世話になるのが一番です。

 キレイでお洒落な写真や画像をたくさん揃えられており、私たちは記事を書くことに専念すればいいわけですね。サイトによっては出典を明示する必要があったり一部有料だったりしますが、最近はクレジット不要・加工もOKなサイトが増えていますので、素材探しに不自由することはないと思います。サイトごとの利用規約をよく読んでから利用してください。

以前素材サイトさんについて記事にしていますので、よろしければどうぞ。

画像をレンタルサーバーにアップする

ブログに貼り付ける写真を入手できたら、今度は集めた写真をレンタルサーバーにアップロードする必要があります。管理画面から「メディア」→「新規追加」をクリック。

20161023_1_2

「ファイルを選択」ボタンをクリック。

20161023_1_3

「アップロードするファイルの選択」ダイアログが表示されるので、アップする写真を選択します。複数のファイルを一括で選択できるので、写真の枚数が多くなっても簡単です。

20161023_1_4

枚数が多くなるとアップロードに時間がかかりますので、処理が終わるまで待ちます。

画像をそのままブログに貼り付けてもいいのだけど

画像や写真はテキストに比べてデータ量が大きくなるので、ブログの表示時間にかなり影響を与えます。ブログの表示時間は訪問してくれるユーザー数に密接に関係しているため、容量の大きい画像をそのままブログにペタペタと貼り付けるのは避けたいものです。表示されるまでにものすごい時間のかかるブログをもう一度訪問する気にはなれないでしょ?

WordPress には画像の容量を削減してくれる便利なプラグインが用意されています。アップロードのときに自動的に処理をしてくれるので、こちらが特別な操作をする必要はありません。すでにアップロード済みの画像を一括で容量削減してくれる機能もついているのでとても便利です。

記事に画像を貼り付ける

「投稿の編集」画面で画像を挿入したい場所にカーソルを移動した後、「メディアを追加」をクリックします。

20161023_1_5

「メディアを挿入」ダイアログが表示され、先ほどアップロードした画像を選択できるようになるので、挿入したい画像を選択します。

20161023_1_6

ダイアログ右側で挿入する画像に対する設定を行うことができます。

「代替テキスト」はブラウザが画像を表示できないときにかわりに表示されるテキストのことです。img タグの alt 属性のことですね。検索エンジンに画像についての情報を伝えることができるので、SEO 的にも効果があるようです。できるだけ設定しておきましょう。

「リンク先」ですが、「なし」を選択すると img タグだけ、「メディアファイル」を選択すると img タグが a タグで囲まれたものが出力されます。記事から大幅にはみ出る画像はメディアファイルにしておき、画像だけでウィンドウが開くようにしておくとユーザーが見やすいと思います。

「サイズ」で貼り付けたい大きさを選択。最後に「投稿に挿入」ボタンを押します。

20161023_1_7

プレビューで画像がちゃんと表示されるか確認しましょう。

余談ですが、画像を別ウィンドウで開くためには a タグに target=”_blank” を追加しなければなりません。画像がたくさんあった場合に手作業で全部やろうとすると結構大変だと思います。Vim をインストールする必要がありますが、コマンドひとつで一括変更できる方法を紹介していますので、よろしければこちらもどうぞ。

画像を中央揃えにする

さて、今回の本題です。画像を中央に揃えたい場合には、メディアを挿入ダイアログの配置において中央を選択します。

20161023_1_8

すると、WordPress は img タグに aligncenter というクラスを追加してくれます。スタイルシートでこのクラスに設定すればよいというわけです。こんな感じです。

今は廃止されてしまった分類ですが img タグはインライン要素なので、このままではマージンを指定することができません。そのため、img を display プロパティでブロック要素に変換しています。インライン要素のセンタリングには text-align が定番なのですが、WordPress が出力したクラスを使うならこちらのほうがよいかと思います。

ブロック要素・インライン要素と text-align との関係についてはこちらをどうぞ。

中央に配置されているかを確認してください。

20161023_1_9

最後に

 WordPress は画像を一行で表示すると自動で p タグで囲んでくれるため、img タグの親要素を CSS セレクタで取得できれば img をブロック要素にする必要はないのではと思ったのですが、調べてみると CSS だけでは無理なようです。どうしても画像の親要素に text-align を指定したい場合には JavaScript や jQuery を利用するしかありません。子要素を指定する「>」はあるんだから「<」みたいに親要素を指定できると便利だと思うんですけどね。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP