読者です 読者をやめる 読者になる 読者になる

Maishin

ADHDワーキングマザーの子育て自分育て

はてなブログアプリのMarkdown記法で画像のalt属性を変更する方法

はてなブログカスタマイズ

altがついてるよ!

こんにちは!くずなつ です 。

私ははてなブログアプリでMarkdown記法を使ってブログ記事を書いています。

画像の説明文にあたるalt属性が適当なのが気になっていたのですが、はてなブログアプリでは変更できずモヤモヤしていました。

いろいろ試していたらアプリ上で変更できたので方法をまとめます。

はてなブログアプリで画像のalt属性を変更する方法

普通に画像をアップロードするとalt属性が適当すぎる

はてなブログアプリから画像をアップロードしてalt属性をポップアップ表示したスクリーンショットがこれです。

f:id:kuzunatsu:20160827095016p:plain

何ですかこれ……アップロードした日付と時間に意味はないので、どうせなら説明を表示させたいところです。

本来のMarkdown記法ではalt属性の指定ができる

はてなブログアプリのMarkdown記法の編集モードでは、アップロードした画像はこんな感じで表示されます。

[f:id:kuzunatsu:20160827095016p:image]

これははてなブログ独自の仕様で、本来のMarkdown記法では画像のリンクの仕方は別に定義されています。これ。

![alt属性](URL)

つまり、リンクする画像のURLがわかればalt属性を変更できますね。

はてなフォトライフ画像の直リンクURLの入手法

アプリから画像をアップロードすると、はてなフォトライフという別サービスにアップロードされます。このURLを入手する方法です。

アプリで画像をアップロード

アプリから、使いたい画像を普通にアップロードします。

ファイル名の入手

はてなブログでMarkdown記法に設定しているときに画像をアップロードしたときの表示の意味はこうです。

[f:id:はてなID:日付・時間j:image]
例: [f:id:kuzunatsu:20160827095016p:image]

この中の日付・時間、例では20160827095016が画像のファイル名(拡張子を除く)です。日付・時間のあとのpは必要ありません。

画像フルパスの入手

はてなフォトライフにアップロードしたブログ用の画像は、こんなURLになっています。

https://cdn-ak.f.st-hatena.com/images/fotolife/はてなIDの最初の1文字/はてなID/ファイル名の最初の8桁(日付)/ファイル名.jpg
例: https://cdn-ak.f.st-hatena.com/images/fotolife/k/kuzunatsu/20160827/20160827095016.jpg

先ほどのファイル名とはてなIDを入れれば、画像の直リンクURLが完成します。

このURLはスマホに単語登録するか、はてなブログアプリの下書きにテンプレートとして残しておくと便利です。

alt属性の指定

本来のMarkdown記法で画像をリンクし、alt属性を指定します。

![alt属性](URL)

を埋めるとこうなります。

![alt属性変更!](https://cdn-ak.f.st-hatena.com/images/fotolife/k/kuzunatsu/20160827/20160827082448.jpg)

表示は……うまくスクリーンショットが取れなかったので、下の例は画像リンクを間違えてあります。画像の替わりにalt属性が表示されます。

alt属性変更!

できました!

この方法のデメリット

普通にアップロードしたときのように「画像をクリックして拡大」ができなくなります。これははてなブログ独自のおまけ機能ですね。

まとめ

  1. はてなブログのalt属性はアプリで変更できる
  2. 本来のMarkdown記法で画像リンクとalt属性を指定する
  3. 画像フルパスの入手はひと手間かかる

公式であった方が良い機能だと思います。

それでは!