アメブロの機能改善「画像の代替テキストが入力しやすくなりました」はFC2ブログでも既にできます

アメーバスタッフ『【PCエディタ・スキン】アクセシビリティに関するアップデート』

いつもアメーバブログをご利用いただきありがとうございます。アメーバブログフロントエンジニアの田中です。 3月19日にアクセシビリティに関するアップデートを行い…

ameblo.jp

スキン(FC2で言うところのテンプレート)の色調整はどうでも良いとして(ごめんなさい)、画像掲載時に適切なalt属性をすぐに適用できるプログラムに改善されたとのこと。実はこの機能は FC2ブログ新投稿画面には既に実装済みの機能 です。認知度が低そうなのでこうして記事にしています (o'ω')ﾉ

アメブロのヘルプは以下のリンク先で。
アメーバ ヘルプ

スクリーンショットを用いた説明になっておりわかりやすいですね。FC2の新投稿画面はまともなヘルプがありません
FC2ブログというサービスはユーザーの努力・開拓心・共益心で進化したサービスなんだろうと思います。その路線は未だ継続中のもよう(笑)
運営から説明が無くともきっとどこかで誰かが書いている。それがFC2ブログ。

alt属性とは

手抜きですみません。以下の記事を参照してください。

alt属性とtitle属性は全然違う

初心者向け PC閲覧推奨 よくある間違いシリーズ (´・ω・｀) 当該記事の主旨は ブログタイトルをテキストから画像へ変更する際の注意についてです。「alt と title を混同していませんか？」 alt, title 共にhtmlで使います。正しい名称は 属性 altタグ、titleタグ、ではありませんぜ旦那 (´・ω・｀) そしてこの2つ、よく混同されて間違った使い方をされることも多いです。...

vanillaice000.blog.fc2.com

画像をp要素にするかfigure要素にするか

画像のマークアップ についてです。 マークアップ = htmlなどによる文書構造の意味付け・定義付け 「日記を書いています」「日々の出来事を楽しく更新しています」という方は無理する必要はありません(と個人的に思う)無理したら楽しいことが楽しくなくなる (´・ω・｀) 例えば「記事内でTOC(table of content, 見出し目次)を利用している」だとか、「検索順位を意識している」といった方はhtmlタグを使いこなしているか...

vanillaice000.blog.fc2.com

FC2ブログ新投稿画面でのalt属性変更

新投稿画面の方です。旧の方はhtmlタグが丸見えですからどうにでもなります。htmlが不可視の新投稿画面だからこそ必要な機能です。

まず掲載したい画像を選びますよね。

ツールの「画像の挿入」をクリックすると別窓でファイルアップロード画面が出てきます。この説明では「この画像で記事を書く」をクリックします。

画像の上で ダブルクリック すると画像情報が出てきます。

「説明」と書いてあるのが alt属性 です。ここを適切な文言に書き換えて 作成 をクリックします。これでalt属性が書き換わります。

何も修正しない状態のalt属性は ファイル名称 がそのままaltとして書き出されます。
例) https://blog-imgs-1xxx.fc2.com/x/y/z/xyz/98u194879.jpg ← alt属性は「98u194879.jpg」
英数字の羅列では意味不明ですから書き換えるとSEOフレンドリーということですね。

これ気づきにくいと思います。エディターでダブルクリックする場面って少ないですよね(上級者は文字列選択でやってるかもしれませんが)
隠すつもりは全く無いのに隠し機能みたいになってる(笑)

サイズ変更は未実装

画像情報には「URL」と「説明」の他に「width(ウィズ)」と「height(ハイト)」が表示されています。これは画像の 実寸 です。

「編集画面」でなく「画像情報」という表現を取ったのは 縦横サイズをここで変更することができないから です。
えぇぇぇ？！って感じですよね。Yahoo!ブログでは縦横いずれかの数値を任意に変更し、もう一方を空欄にしておくと縦横比を保ったままインラインCSS(style属性)によるサイズ変更ができます。つか、フツーそうだろ。フツー (∵`)

これはアレかなぁ… いずれはサイズ変更できるようにするつもりだろうか。してくれないと困るわな。CSSを追加(width, heightプロパティ)するかhtmlを変更(width, height属性)するかのどちらかすぐできそうなもんだけど(CSSの方がベター)

このポップアップからの変更はできない「と思います」にしておこうかな。
というのは、winとmacのChromeで試しました(推奨だから)が他のブラウザでは試していません。OSのバージョンとか関係ないよなぁ。たぶん。だからできないと思うよ？ (´・ｪ・｀)
一応

• 縦横比を計算して正しい値をwidth, height共に指定
• いずれか一方を空欄
• いずれか一方にauto値を指定

これは試しました。でも変わらない(笑)
「HTML表示に切り替えて変えればええやろ」はナシです。新投稿画面は初心者に優しいはずのエディターなのだから、HTML表示を使わせた時点で負けなんですよっ！

まとめ

新投稿画面はβ版ということですから今後の改善に期待、ということで。
今新投稿画面でこの記事を書いていますが、しんどいわ(笑)
Yahoo!ブロガーさんのほとんどが「エディター難しい、使いづらい」と嘆いていらっしゃいますが、私はその逆。新投稿画面しんどい(笑)
(といってもHTML表示の方で書いてますが)
何故かと言うと 背景が黄色いからですよぉぉおおぉう！！！見づらいよぅ (；ωq｀)
(通常モードは白いから大丈夫ですYO)

htmlを書くように(書けるように)なると旧投稿画面がいかに使い勝手が良いかわかると思います。
という流れでおしまい ←