【wordpress/coccon】画像にリンクを貼るとできる隙間をなくしてみた【弊害あり】
ワードプレス/コクーン リンク画像にできる余白問題
cocoonに特化した現象ではないのかもしれませんが。
それと頻度が高い問題ではないと思いますが、個人的に悩まされたので忘れないようにメモ。
またこのやり方で他に影響があるかどうかなどは、検証しきれていませんのでとりあえず見た目が解決するという例になります
なのでご利用は自己責任でお願いします!
あとテキストのリンクの表示に弊害ありますw
画像にリンクをはると見えない隙間ができる?
吹き出しの画像の下にわかりやすいように別の画像を配置してます
画像の設定で枠線は「なし」になっています。
なので画像と画像がぴったり並んでいる状態なのがわかります。
ですが吹き出しにリンクを貼ると今までなかった隙間ができてしまいます。
茶色い画像には何もしていませんが、隙間が発生しています
どうやら画像にリンクを貼ると見えない枠? がついているようなんです。
些細なこととはいえ、レイアウトに拘っていると気になるケースがあるんですね。
それでいろいろ調べて、見つけたものを片っ端から試してみたんですが、なかなか効果が見られない!!
どうやらいろいろ複雑みたい??
リンクを貼った画像の余白をなくすCSS
中でもなんだか強力そうな命令で消すことができました! 重要重要重要!!
.entry-content a,
.entry-content p a img { display: block !important; margin: 0 !important; padding: 0 !important; border: none !important;}
弊害
こちらリンクに対する全体的な命令なので、テキストに貼ったリンクにも適応されてしまいます。
段落で書いたテキスト
リンクを貼るとその下に空白ができました
あれ? そもそもリンク貼った時ってどんな挙動してるんだっけ?
ってこんがらがりますね
テキストにリンクを貼った初期状態
不思議なんですが、リンクを貼った画像は隙間が消えるのに、同じ命令でテキストには余白ができるんですね。
ここまでくると、リンク画像にできるちょっとの隙間なんてどうでもいいじゃん。
って感じにもなってきますが、グラフィカルなサイトを作りたい時のために記録しておきました!
そんなことしなくてもできるよってご存じの方は教えてください!