画像にcaptionをつけたい

[tsubolabo]

添付画像の数が多い投稿記事では、本文中の説明に対応している画像を明確にするために、画像の至近に「図１　回路構成」などと図番を含んだcaptionを表示する必要を感じます。

discussion #274 によれば、テーブルへのcaptionの付与は可能なようですが、画像へのcaptionの付与には苦労しています。それほど贅沢な要望はなく、単に、画像の左上や左下に接近させて「図１　・・・」などのテキストが表示できさえすれば良いのです。

しかし、現状では、画像の上下に比較的広めのマージンが自動的にとられてしまうため、画像の前後にテキストを書き込んでも、画像との距離が離れすぎて、captionとしてはやや間の抜けた感じになってしまいます。何か良い方法はないでしょうか？

今のところ、苦し紛れの方法として、図番を書き込んだ画像ファイルを作り、それを添付したりしています。これにはかなり手間がかかっています。

なお、紙の論文などのcaptionの位置の基準は、表では上、図では下となっています。しかし、上からスクロールしながら読み進むブラウザ画面上では、図のcaptionも上に置く方が実用的であるようにも感じます。上下どちらに置く場合でも対応できるような方法があると良いのですが・・・。

[tanaka-asami415]

@tsubolabo
ご意見ありがとうございます🙏
過去に同様のご意見をいただいておりまして調査した結果、実装が難しく見送りになっておりました。
他に方法がないか検討いたしますが、直近の開発優先度などから考えると先になってしまいそうです…🙇

[tsubolabo]

@tanaka-asami415

htmlでキャプションを付けれるように検討しております

大いに期待しておりますが、実現できるのはいつ頃になるのでしょうか？
念のため、お願いしたい仕様のレベルと必要性を今一度列挙しておきます。

期待する仕様：

• 何らかの追加記法で、画像の上下のmarginを0にできる。
• その画像の上や下に、密接して文字列を置くことができる。

私個人としては、上記さえ実現できれば、画像とcaptionのセンター揃え などのこれ以上贅沢な機能はなくても構いません。

必要性：

• 今のままでは、画像の上や下に「図・・・」などの文字列を置いても、両者間に空白が空きすぎて、画像とcaption代用の文字列の関連性が認識しずらい状態です。

• 図と文章を同一視野に収めて読む必要がある理数系の記事では、無駄な空白の存在は非常に邪魔になります。文章を画像の左右に回り込ませられないマークダウン記法では、この問題がさらに気になります。画像のサイズを必要最小限に抑えて文章スペースを確保しようとしているのに、画像の上下に望まない無駄なスペースが割かれるのは納得できません。

• 今は仕方なく、画像のイメージ内に直接、「図・・・」を書き込んで対処しています。推敲の過程で図の追加や削除があると、図番を変えるだけのために、多くの画像を前工程から作り直さなければなりません。例えば下記では、10個もある図を何回も書き換えました。

【質点の回転運動】複素数の助けを借りて楽々理解
https://qiita.com/tsubolabo/items/6d1053d6a7a99df92192

なお、上記投稿前に、もう一つの難関として覚悟していた下記の問題については、去年の11/15のQiitaシステムの改善により、全く苦労せずにクリアすることができました。ありがとうございました。

数式のプレビューがおかしい #298
数式に横スクロールバーが表示される #346

[tsubolabo]

訂正です。

全く苦労せずにクリアすることができました。

これは言い過ぎでした。
「数式のプレビューがおかしい #298」 の中の

下付き文字の前の "_" は、そのままでも問題ない部分もあれば、 "_" の代わりに "\_" としないと正常に表示されない部分もあります。しかし、 "\_" でも受け付けないこともあります。

これは未解決のままですが、対応にそれほど苦労はありませんでした。

[tanaka-asami415]

@tsubolabo
詳細をありがとうございます🙏
時期に関しては、直近の開発優先度などから考えると先になってしまいそうです。
はっきりとした時期をお答えできず申し訳ありません。

[tsubolabo]

@tanaka-asami415

　2024-03-09 現在、記事によっては、図の上方のマージンが 0 になっているものがあることに気づきました。しかし、同一の記事でもマージンが 0 の図と、従来どおりのマージン付の図が混在していたりします。この場合、記事中の最初の２～３枚の図だけがマージン 0 になっている傾向が見られます。

　私の要望が実現しつつあるのであれば喜ばしいことですが、投稿者の意思に関係なく、すべての図が無差別にマージンが 0 になってしまう方向で変更になるのでしょうか？　やはり、マージン 0 は、それを指定したときだけにして欲しいと思います。

　今の状態では、記事の文章と図が接近しすぎて見にくくなっている箇所があります。私の記事だけを手直しして済むのであれば良いのですが、他の方にまで手直しをお願いするのは問題です。

[tsubolabo]

具体例を貼っておきます。下記の記事の中の図の周辺です。

https://qiita.com/tsubolabo/items/6d1053d6a7a99df92192
【質点の回転運動】複素数の助けを借りて楽々理解

マージンが 0 の図

マージンが従来どおり？の図

[tanaka-asami415]

@tsubolabo
本Discussionsについて、その後の改善ができておらず申し訳ないです。まだ特に変更は行っていない状況となります🙏

記事によっては、図の上方のマージンが 0 になっているものがあることに気づきました。しかし、同一の記事でもマージンが 0 の図と、従来どおりのマージン付の図が混在していたりします。

上記お問い合わせについてですが、確認させていただいたところ空行の有り無しによる可能性が高そうです。
一度ご確認いただけますでしょうか🙇

marginがないのときのマークダウンの記述

しかし、扱っている現象の殆どは二次元平面内の運動だけなので、一般のベクトルの代わりに複素数（**図１右**参照）を使用することで、比較的簡単に記述でき理解も容易になります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/932484/e93e079d-3ed3-ef48-34c1-c537f38b570d.png", width="600px">

marginがついているときのマークダウンの記述

周速度の大きさ $|\boldsymbol{v}|$ は $r|\omega|$ となります。(3)式には $i$ が掛かっているので、$\omega$ が正の場合、その向きは $\boldsymbol{r}$ の向き（$e^{i\omega t}$）よりも $\pi/2$ だけ進みます。 $\omega$ が負の場合にはそれがさらに逆向きになるので $\pi/2$ だけ遅れます。このように、機械的に微分するだけで、大きさだけでなく方向まで、迷うことなく求まります。（**図３**参照）

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/932484/f90acce9-c226-72ce-0c95-e59cd316f5e4.png" width="220px">

[tsubolabo]

@tanaka-asami415

再度確認を行ったところ、下記修正を行っておりました。
Table内で画像を使う際に余白が広くなりすぎていたため、imgのmarginを削除いたしました。

やはりそうでしたか。
それでは、今後の状況として想定できる２つのケースに分けて希望を書いてみます。

• ① 現在の仕様（全 img で margin が 0）のまま定着させる場合
• ② マージン 0 はテーブル内だけに適用するように変更する場合

①
　私としては「htmlでキャプションを付けれるようにする」必要はなくなりました。改行なしで画像の上下に文字列を置くだけで、キャプションとして十分に機能します。

　ただし、改行なしの既投稿記事で、文章と画像が接近し過ぎるという副作用は美観的に良くありません。Qiita の品位にも関係します。広くユーザーに、改行の追加を推奨するような告知をした方が良いと思います。

　それであれば、このついでに、水平線の上下の margin も 0 にしては如何でしょうか。現在の margin は少々広すぎるように感じます。margin を広くしたい場合には、改行を追加するだけで済むことです。

②
　この Discussion のタイトル「画像にcaptionをつけたい」は、「画像の上下の margin を 0 にしたい」に読み替えていただいた方がピッタリします。もちろん、html でそれを指定した場合に限っての動作です。

[tanaka-asami415]

@tsubolabo
確認不足でお手数をおかけいたしました🙇

ただし、改行なしの既投稿記事で、文章と画像が接近し過ぎるという副作用は美観的に良くありません。Qiita の品位にも関係します。広くユーザーに、改行の追加を推奨するような告知をした方が良いと思います。

画像個別の対応ではなく行間の見直しとしてまとめ、リリースノートでお知らせを行っておりました🙇

記事ページのデザイン変更をベータ版として公開しました
https://qiita.com/release-notes/2023-09-21

記事ページのデザイン変更を正式にリリースしました
https://qiita.com/release-notes/2023-10-20

私としては「htmlでキャプションを付けれるようにする」必要はなくなりました。改行なしで画像の上下に文字列を置くだけで、キャプションとして十分に機能します。

それはよかったです！ ✨
tsubolabo さんの意見も参考に、「htmlでキャプションを付けれるようにする」ことが引き続き必要かどうかも検討します。
また、今回いただいた新たなリクエストに関しましては、他ユーザ―様からのご意見も参考にさせていただきたいと思います。

tsubolabo さんの元々の問題は解決されたとのことなので、本Discussionsはクローズさせていただいても大丈夫でしょうか？

[tsubolabo]

@tanaka-asami415

画像個別の対応ではなく行間の見直しとしてまとめ、リリースノートでお知らせを行っておりました🙇

　これだけで、図のデフォルトの margin が 0 になったことを察知せよ というのはかなり厳しい要求ですね。しかし、これ以上は何も言いますまい。

本Discussionsはクローズさせていただいても大丈夫でしょうか？

　表示用の Filter の既定の設定が「All」であるのならともかく、「Openのみ」になっている状態でクローズすると、議論の内容が視界から直ちに消えてしまいます。しかし、議論に直接参加している当事者以外にも、成り行きを注視している人もたくさん居ます。

　時々、傍聴者への周知の期間も置かず、参加当事者間の了解だけでクローズされてしまって困惑することがあります。このテーマに限らず、全ケースについて、問題が解決されたと判断できてから、１カ月後に何もコメントが付かないことを確認してからクローズするようにしては如何でしょうか？

[tanaka-asami415]

@tsubolabo

これだけで、図のデフォルトの margin が 0 になったことを察知せよ というのはかなり厳しい要求ですね。

貴重なご意見として今後の参考にさせていただきます🙏

このテーマに限らず、全ケースについて、問題が解決されたと判断できてから、１カ月後に何もコメントが付かないことを確認してからクローズするようにしては如何でしょうか？

以前こちらでも #472 (reply in thread) 回答させていただいたのですが、クローズのタイミングは管理上の都合と、運営の他にDiscussionsを立てた方ご自身でもクローズしていただけるものなので、現状のままとさせてください 🙏

本Discussionsについては、できるだけtsubolaboさんの希望に沿うよう通常より長めに期間をおいてクローズさせていただきます！

[tsubolabo]

@tanaka-asami415

以前こちらでも #472 (reply in thread) 回答させていただいた

それは承知のうえでの再度の提案でした。

「運営の他にDiscussionsを立てた方ご自身でもクローズしていただける」ので、運営側もクローズのタイミングは自由である・・・　という論理がどうにも腑に落ちなかったからです。

スレ立て者の事情により、自身で即座にクローズしたくなる恥ずかしいテーマもあるでしょう。
（例えば、無知による私の過去の質問『記事への「いいね」は取り消すことができますか？#337』のようなもの。しかし、これでも自身ではクローズしていません）

そのようなもののクローズはスレ立て者の自由に任せるにしても、普通は、自身でクローズする必要を感じることは少ないでしょう。それゆえ、運営側の意思によるクローズのタイミングは、それなりに筋が通ったものにしておくべきではないでしょうか？

以上は、私の単なる個人的な感想です。運営殿からのコメントは不要です。

[daddygongon]

えっと，通りすがりのものですが，議論が違うところに行っているようなので差し出がましいとは思いますが，
「単に、画像の左上や左下に接近させて「図１　・・・」などのテキストが表示できさえすれば良い」
のでしたら，Tableにしてはどうですか？　

図１　今日の内容
https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151211/d3c84ba7-983a-3671-2ca1-2969eac7f519.jpeg

https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151211/72624277-79b8-0b8a-9609-097ededf020c.jpeg
図２　Wordのイメージ

[tsubolabo]

@daddygongon 様

「単に、画像の左上や左下に接近させて「図１　・・・」などのテキストが表示できさえすれば良い」のでしたら，Tableにしてはどうですか？　

　ご提案ありがとうございます。２年近く前の要望なので、Qiita の仕様が変わってしまった現在から見ると、確かに

議論が違うところに行っている

ように見えると思います。もともとは画像の上下のマージンが大きすぎたのが問題でした。「キャプションをつけるためにマージンを小さくして欲しい」という当時の私の要望には、開発優先度の点から難色を示されていたにも関わらず、いつの間にか、

再度確認を行ったところ、下記修正を行っておりました。Table内で画像を使う際に余白が広くなりすぎていたため、imgのmarginを削除いたしました。（Qiitaの回答より）

ということで、どこからの要望によるものかは分かりませんが、スンナリとマージンが無くなってしまったようです。私としては渡りに船なのでこれで満足です。

　話がややこしくなったのは、「imgのmarginを削除」という情報を Qiita 内で十分に共有せずに、私の markdown 記法に問題があるように回答されたのが発端です。

　ということで、貴ご提案は、マージンが無くなった現在になってやっと可能になった方法です。マージンが付いた状態でテーブルにすれば、ますますスペースファクタが下がるだけです。私の最新の記事では、テーブルを使うまでもなく、画像の直前にテキストを書くだけで、キャプションとして十分に機能しています（印刷論文ではないので、キャプションは画像の下ではなく上にある方がスクロールとの相性が良くて見やすい）。

（注：この Discussion のページでは、貴テーブルの中には、画像ではなく画像のURLしか表示されていません。本来の Qiita のページ内では画像が表示されるものとしてコメントしました。）

　なお、「クローズ」の件については、

議論が違うところに行っている

のはその通りですが、これは、Qiita から問われたことに対して、分かり易い理由を付けて長々と回答したためです。

数式のことも少し書いてありますね。これは確かに、

議論が違うところに行っている