未分類

WordPress投稿時、画像を中央寄せ(センタリング)すると、左右の余白スペースにリンクができてしまう問題について

更新日:

WordPressを使用していて、記事のトップや真ん中に画像(写真)を挿入したとき、その画像の左右のスペースにも元画像へのリンクが設定されてしまい、また画像のサイドへマウスカーソルを持って行っても指のカーソルに変わってしまう。そんな経験をしたことがありませんか?

これは、<img class="aligncenter">のmargin-leftとmargin-rightを「auto」と指定し、画像の左右に余白を入れることで中央揃えにしているためです。画像にリンクを設定している<a>は<img>の親要素のため、左右の余白も含めてリンクとして処理します。そのため、画像の左右にカーソルを重ねてもリンクが機能してしまいます。

 

ただし、画像に「キャプション」を付けた場合はこの問題は発生しません。キャプションを付けると、「aligncenter」というクラス名が<img>の親要素の<div>に付加され、<div>の左右に余白が入ることで画像が中央揃えになるためです。

 

それではさっそくキャプションを付けて、左右がすっきりした画像を挿入することにしてみましょう。

キャプションは上記の赤丸内のアイコンをクリックして付けます。

 

WS000032

キャプションを付ける項目が出てきました。試しに「テストテスト」と入力して、「更新」を押しましょう。記事投稿画面に戻ってくるはずです。この状態で画像を中央揃えにするために、下記の通り中央揃えになるボタンを押します。

WS000033

ではこの状態で記事を投稿してみましょう。「公開」ボタンを押します。どうでしょうか。画像の左右のリンクが消えましたよね?

WS000034

しかし!その代わり画像の下に「テストテスト」というテキストが出てきてしまいました。写真に説明を加えたいという人ならテキストを挿入するのは歓迎かも知れませんが、そうでなければただ不格好なだけです。

 

それならば!この「テストテスト」と打ち込んだ先ほどのキャプション欄に「 (空白)」を入れてしまいましょう!そうすればキャプションが維持されたまま、文字が消えてきれいに中央揃えとなるはずです。

 

しかし・・・実際空白を入れてみると、なんとキャプションの機能が維持されなくなって、左寄り、右寄り、または元の左右リンクが復活してしまうという結果になります。つまりキャプションに空白を入れても、空白は無いものと見なされて、キャプションの効果は消えてしまうのです。

 

そこでこの方法を編み出しました。キャプションに入力したテキストを、CSS側で非表示にする方法です。

 

ダッシュボードから「外観」をクリックし、そこからテーマの編集をクリックします。そうするとそのページの右側を見ると「スタイル」を設定している.cssというファイルがあるはずです。そのファイルに

.wp-caption-text{
display: none;
}

という設定をコピペしてcssファイルを更新してください。これは、入力されたキャプションテキストを非表示にする設定です。

 

ではここで再びキャプション入力画面に移行し、「テストテスト」でも「ああああ」でも適当なキャプションを入力して記事を更新してみて下さい。

 

これでテキストを表示することなく、且つ左右のリンクのスペースも取れるはずですよ。

トップページへ戻る

-未分類
-, , , , , , ,

Copyright© IT号外 , 2019 All Rights Reserved Powered by STINGER.

search envelope heart star user close search-plus home clock update edit share-square chevron-left chevron-right leaf exclamation-triangle calendar comment thumb-tack link navicon aside angle-double-up angle-double-down angle-up angle-down star-half status image gallery music video category tag chat quote googleplus facebook instagram twitter rss