Merge pull request #473 from zenn-dev/fix-image-in-link-style

リンクの中に画像があるとき、リンク範囲を画像の大きさに合わせる
zenn-dev · Oct 20, 2023 · fc20e43 · fc20e43
2 parents cbcdf6f + e52bd6e
commit fc20e43
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/packages/zenn-content-css/src/_content.scss b/packages/zenn-content-css/src/_content.scss
@@ -268,6 +268,11 @@ img ~ em {
   color: $c-gray-darker;
   font-size: 0.92em;
 }
+// リンクの中に画像がある場合、リンクの範囲を画像の大きさと合わせる
+a:has(img) {
+  display: table;
+  margin: 0 auto;
+}
 details {
   font-size: 0.95em;
   margin: 1rem 0;

diff --git a/packages/zenn-content-css/test.html b/packages/zenn-content-css/test.html
@@ -12,7 +12,6 @@
       max-width: 700px;
       margin: 1.5rem auto;
     }
-
   </style>
 </head>
 
@@ -284,6 +283,17 @@ <h3 id="画像の横幅を指定する">画像の横幅を指定する</h3>
         loading="lazy" /><br />
       画像の表示が大きすぎる場合は、URLの後に半角スペースを空けて<code>=○○x</code>と記述すると、画像の幅を指定できます。
     </p>
+    <h3 id="画像をリンクにする">画像をリンクにする</h3>
+    <div class="highlight">
+      <pre class="highlight plaintext"><code>[![altテキスト](https://画像のURL =250x)](https://zenn.dev)</code></pre>
+    </div>
+    <p>
+      <a href="https://zenn.dev">
+        <img src="https://storage.googleapis.com/zenn-user-upload/gxnwu3br83nsbqs873uibiy6fd43" width="250"
+          alt="altテキスト" loading="lazy" />
+      </a>
+      直後にテキストがある場合もスタイルの影響は受けません。
+    </p>
     <h2 id="テーブル">テーブル</h2>
     <div class="highlight">
       <pre class="highlight plaintext"><code>| Head | Head | Head |