Canva画像とはてな記法と代替テキストの関係(Markdownの場合)

altが付く!

このブログで使わせてもらっているプラットフォーム、はてなブログ。すごく楽で、Markdownで記事が書けていい感じにサクサクHTMLを出力できるので選択している。

昨今のお気に入りは編集画面から直接Canvaでアイキャッチ画像の作成ができるところ。今回は軽めにその話題を。

最近のお気に入り便利機能

ブログには、アイキャッチ(見出し)画像は用意したほうが見栄えがいい。

記事の内容を視覚的にイメージでざっくり伝えられるし、視覚から雰囲気を拾う人もいるし(私がそう)。

これまではずっとFlickrなどでクリエイティブ・コモンズで公開されている写真を借りたり、自分で適当に撮った写真を見出しに使っていたりしていた。ところがつい最近、友人に「はてなブログでCanvaが使えるよ」と……言われたのか自分で巡り合ったのか忘れてしまったが、ともかくCanvaが使える!ということを知ったため、昨今はそれをずっと使っている。

emiemihuimei.hatenablog.com

上記記事のアイキャッチからずっと、Canvaで作成した画像(写真?)を利用させてもらっている。

Canvaのいいところは、まあいわゆるデザインツールの上澄みがブラウザ上から使えるところではあるが、私の場合は本職として上位機能のあるデザインツールを利用しているため、そのへんは落第点であることは否定できない。

それでもなお選択したい理由は、Canva利用のために「無料」で提供されている写真がなかなかにいいところ。必要があれば加工して、さらに文字が入れられる。なんと便利な。

自分で写真を用意する場合などは、自宅でアイキャッチに足るためのきれいな背景での写真を撮るか、記事(話題)をベースに見合う写真を新たに撮るか、あるいは常日頃から汎用的に利用できる写真を撮りためておくか……ともかく本筋である「文章で書く」以外に時間が取られすぎることがマイナスとなっていた。

その面倒を一手に引き受けてくれるのがCanva、私の認識ではそういう立ち位置だ。

作った画像を記事に埋め込む(初回起動)のも相当楽で、ブログの編集オプション機能にCanva機能を起動するボタンが出てくる。

はてなブログ「編集オプション」にあるCanvaのアイキャッチ画像作成機能起動ボタンのキャプチャ

アイキャッチ画像を作る」ボタンを押せばCanvaがはてなブログ作成画面上で起動し、Canva上での画像作成が終わり「完了」ボタンを押せば画像が差し込まれる。

alt(代替テキスト)付与は自動ではない

ところが1点難があるとすれば、現時点ではCanva画像にalt(代替テキスト)を付与することはできない。できないというか、そのステップがスキップされている。

通常の画像アップの場合には、ダイアログが提示されて*1altを設定することが可能。

通常の画像アップダイアログのキャプチャ

Canvaの画像の場合には速やかに画像が挿入されるため、altがつけられない。

え、困るし……しかも調べてもaltの付与の仕方はインターネット上にはないし……(※わたしの観測範囲内では)

と思っていたら、ふと通常画像の(Markdown記法での)記事内書式を見ると、末尾に:alt=というのがついているのを見つけた。

書式としては

[f:id:~~~~~~:~~~~~~~~~~~~~:plain:alt=ほげほげ]

だ。(上の~~~と書いてある部分は個別の識別子のつく部分のため、伏せている。)

そうだ、はてなブログは「はてな記法」という独自の記法があるのだった。

help.hatenablog.com

Canvaの画像も、同じはてな記法マークアップされている。この記事のアイキャッチを例にすると

[f:id:~~~~~~:~~~~~~~~~~~~~:plain]

となっており……あれ?これCanvaで確かに作った画像だけれども、書式が完全に一緒じゃん……とやっと気づくことに。

つまり末尾に勝手に:alt=ほげほげを入れたらaltが付くということのため、ひとつ前の記事から試してみることに。

Chrome DevTools上にaltが設定されたのが目視できるキャプチャ
コード上できちんとaltが挿入されていることが確認できた

よしよし。

おそらく公式で追加できる機能がつくのは少し先ではないかと思うので、しばらくはこの書式を記憶して、自力で記入をしていこうと思う。

……アイキャッチにalt不在の過去記事への対応もせねば。

わたしのようなウッカリさんに、この記事が役に立つことを祈って。

*1:とはいえ、「画像にalt属性を指定する(上級者向け)」という項目にチェックを入れていないといけないため、デフォルトではなし。