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