文章に説得力をもたせたり記事の彩りとしてブログの文章に画像や写真を挿入することは欠かせません。WordPress では「投稿の編集」画面から「メディアを挿入」ダイアログを利用して画像を貼り付けますが、スタイルシートでどのように指定すればよいのかを解説したいと思います。
写真はどこで集めるの？
記事に挿入したりアイキャッチとして設定するための画像や写真ですが、もちろん自分で描いたり撮影してもよいのですが、時間が足りなかったり腕前に不安がある人も多いですよね。そんなときは無料で使うことのできる素材サイトさんにお世話になるのが一番です。
キレイでお洒落な写真や画像をたくさん揃えられており、私たちは記事を書くことに専念すればいいわけですね。サイトによっては出典を明示する必要があったり一部有料だったりしますが、最近はクレジット不要・加工もOKなサイトが増えていますので、素材探しに不自由することはないと思います。サイトごとの利用規約をよく読んでから利用してください。
以前素材サイトさんについて記事にしていますので、よろしければどうぞ。
WordPress初心者必見！アイキャッチ画像を集めるのに便利な無料写真素材サイト７選 | Naokix.net
アイキャッチ画像を集めるのに便利な無料写真素材サイト１４選 | Naokix.net
画像をレンタルサーバーにアップする
ブログに貼り付ける写真を入手できたら、今度は集めた写真をレンタルサーバーにアップロードする必要があります。管理画面から「メディア」→「新規追加」をクリック。
「ファイルを選択」ボタンをクリック。
「アップロードするファイルの選択」ダイアログが表示されるので、アップする写真を選択します。複数のファイルを一括で選択できるので、写真の枚数が多くなっても簡単です。
枚数が多くなるとアップロードに時間がかかりますので、処理が終わるまで待ちます。
画像をそのままブログに貼り付けてもいいのだけど
画像や写真はテキストに比べてデータ量が大きくなるので、ブログの表示時間にかなり影響を与えます。ブログの表示時間は訪問してくれるユーザー数に密接に関係しているため、容量の大きい画像をそのままブログにペタペタと貼り付けるのは避けたいものです。表示されるまでにものすごい時間のかかるブログをもう一度訪問する気にはなれないでしょ？
WordPress には画像の容量を削減してくれる便利なプラグインが用意されています。アップロードのときに自動的に処理をしてくれるので、こちらが特別な操作をする必要はありません。すでにアップロード済みの画像を一括で容量削減してくれる機能もついているのでとても便利です。
表示速度アップ！EWWW Image Optimizerを導入する | Naokix.net
記事に画像を貼り付ける
「投稿の編集」画面で画像を挿入したい場所にカーソルを移動した後、「メディアを追加」をクリックします。
「メディアを挿入」ダイアログが表示され、先ほどアップロードした画像を選択できるようになるので、挿入したい画像を選択します。
ダイアログ右側で挿入する画像に対する設定を行うことができます。
「代替テキスト」はブラウザが画像を表示できないときにかわりに表示されるテキストのことです。img タグの alt 属性のことですね。検索エンジンに画像についての情報を伝えることができるので、SEO 的にも効果があるようです。できるだけ設定しておきましょう。
「リンク先」ですが、「なし」を選択すると img タグだけ、「メディアファイル」を選択すると img タグが a タグで囲まれたものが出力されます。記事から大幅にはみ出る画像はメディアファイルにしておき、画像だけでウィンドウが開くようにしておくとユーザーが見やすいと思います。
「サイズ」で貼り付けたい大きさを選択。最後に「投稿に挿入」ボタンを押します。
プレビューで画像がちゃんと表示されるか確認しましょう。
余談ですが、画像を別ウィンドウで開くためには a タグに target=”_blank” を追加しなければなりません。画像がたくさんあった場合に手作業で全部やろうとすると結構大変だと思います。Vim をインストールする必要がありますが、コマンドひとつで一括変更できる方法を紹介していますので、よろしければこちらもどうぞ。
楽してWordPressの画像リンクにtarget=”_blank”を挿入する方法 | Naokix.net
画像を中央揃えにする
さて、今回の本題です。画像を中央に揃えたい場合には、メディアを挿入ダイアログの配置において中央を選択します。
すると、WordPress は img タグに aligncenter というクラスを追加してくれます。スタイルシートでこのクラスに設定すればよいというわけです。こんな感じです。
1 2 3 4 | .aligncenter { display: block; margin: 0 auto; } |
今は廃止されてしまった分類ですが img タグはインライン要素なので、このままではマージンを指定することができません。そのため、img を display プロパティでブロック要素に変換しています。インライン要素のセンタリングには text-align が定番なのですが、WordPress が出力したクラスを使うならこちらのほうがよいかと思います。
ブロック要素・インライン要素と text-align との関係についてはこちらをどうぞ。
divにtext-alignは効かないよ？ | Naokix.net
中央に配置されているかを確認してください。
最後に
WordPress は画像を一行で表示すると自動で p タグで囲んでくれるため、img タグの親要素を CSS セレクタで取得できれば img をブロック要素にする必要はないのではと思ったのですが、調べてみると CSS だけでは無理なようです。どうしても画像の親要素に text-align を指定したい場合には JavaScript や jQuery を利用するしかありません。子要素を指定する「＞」はあるんだから「＜」みたいに親要素を指定できると便利だと思うんですけどね。
Comment
編集画面では、中心に画像が来るのですが、プレビューで確認すると、左端に来てしまいます。この様な場合、次にどの様にしたら宜しいのでしょうか？お教え頂ければ幸いです。