WordPressを使用していて、記事のトップや真ん中に画像(写真)を挿入したとき、その画像の左右のスペースにもなぜか元画像へのリンクが設定されてしまい、また画像のサイドへマウスカーソルを持って行っても指のカーソルに変わってしまう。左右の白い余白をクリックしたりタップできてしまう。そんな経験をしたことがありませんか？
これは、<img class=”aligncenter”>のmargin-leftとmargin-rightを「auto」と指定し、画像の左右に余白を入れることで中央揃えにしているためです。画像にリンクを設定している<a>は<img>の親要素のため、左右の余白も含めてリンクとして処理します。そのため、画像の左右にカーソルを重ねてもリンクが機能してしまいます。
ただし、画像に「キャプション」を付けた場合はこの問題は発生しません。キャプションを付けると、「aligncenter」というクラス名が<img>の親要素の<div>に付加され、<div>の左右に余白が入ることで画像が中央揃えになるためです。
それではさっそくキャプションを付けて、左右がすっきりした画像を挿入することにしてみましょう。
キャプションは上記の赤丸内のアイコンをクリックして付けます。
キャプションを付ける項目が出てきました。試しに「テストテスト」と入力して、「更新」を押しましょう。記事投稿画面に戻ってくるはずです。この状態で画像を中央揃えにするために、下記の通り中央揃えになるボタンを押します。
ではこの状態で記事を投稿してみましょう。「公開」ボタンを押します。どうでしょうか。画像の左右のリンクが消えましたよね？
しかし！その代わり画像の下に「テストテスト」というテキストが出てきてしまいました。写真に説明を加えたいという人ならテキストを挿入するのは歓迎かも知れませんが、そうでなければただ不格好なだけです。
それならば！この「テストテスト」と打ち込んだ先ほどのキャプション欄に「 (空白のスペース)」を入れてしまいましょう！そうすればキャプションが維持されたまま、文字が消えてきれいに中央揃えとなるはずであろうと予想。
しかし･･･実際空白を入れて更新すると、なんとキャプションの機能が維持されなくなって、左寄り、右寄り、または元の左右リンクが復活してしまうという結果になります。つまりキャプションに空白を入れても、空白は無いものと見なされて、キャプションの要素は消えてしまうのです。残念無念！
そこでこの方法を編み出しました。キャプションに入力したテキストを、CSS側で非表示にする方法です。
ダッシュボードから「外観」をクリックし、そこからテーマの編集をクリックします。そうするとそのページの右側を見ると「スタイル」を設定している.cssというファイルがあるはずです。そのファイルに
.wp-caption-text{
display: none;
}
という設定をコピペしてcssファイルを更新してください。これは、入力されたキャプションテキストを非表示にする設定です。
ではここで再びキャプション入力画面に移行し、「テストテスト」でも「ああああ」でも適当な文字をキャプションに入力して更新してみて下さい。
いくら文字を入れても、キャプションはCSSにdisplay: noneと書いて画面上に表示されないようにしましたから、入力したテキストは見えません。これでテキストを表示することなく、且つ左右のリンクのスペースも取れるはずですよ。是非挑戦してみて下さい。