Markdownで画像にタイトルを付与する方法@はてなblog

はてなblogでテーブル使いたい時のみ利用している

Markdown記法でずっと気になっていた事があったんです。

 

テーブル内に画像を置くケースが多くて

アップロードした画像を置いただけの状態では

マウスオーバーで何の役にも立たないテキストが表示される。

 

テーブルは最大限コンパクトにしたいので

マウスオーバーした時、任意のテキストを表示させたい。

今やっとできたのがコチラ。

これならばテーブルの外側に相当量の情報を置けます!

 

Markdown記法にて

画像の代替テキストとタイトルの設定はこのようになります。

![代替テキスト](画像のURL"画像のタイトル")

 

この通りに書いてるつもりが、想定したようにならなかったのです。

テーブル作っただけの状態はこんな感じ

過去に、画像をリンクにしようとして挫折したこともあり。

どうもこの[ ]内の出来上がりがいつもオカシイ。

 

やっと気づいたよ。

そもそも全くURLに見えないじゃないですか。これって。

 

画像のURLとして指定するべき場所を探します。

アップロード済画像を見たまま編集で貼っていく。

 

html編集にタブ切り替えすると

これですね!!!画像のURLとして指定するのはこのラインの部分。

 

Markdownのテーブルへ反映させます

![代替テキスト(alt)] は不要なので空白。

 画像のURLはhtml編集から拾ってくる。fotolife...フォトライフから拾っても〇かな。

  "タイトル(title)"に任意の文字。

  

ハイ完成!

テーブルの大きさに対する情報量がバーンと上がりました。

URLでつまづいていただけだったみたい。

 

この記事は見たまま編集にて

いちばん上の画像のみtitle設定し、他のalt/titleを空白にしてみました。

 

テーブルが横に長くなりすぎたり・・・で

今まで諦めてきた項目が結構あったので。この新技で改造してみようかな。