FC2写真ブロガーさんに提案（ポップアップ表示した画像にキャプションを表示する方法）

FC2ブログのフォトブロガーさんへ

FC2ブログを利用している写真（フォト）ブロガーさんに、特に今回のWebテクニックを紹介したいんですよ～ 😄

難しい理屈は後回し。
「写真をもっと丁寧に扱いたい」「ブログの完成度をもう一段上げたい」
そんな方にこそ読んでほしい内容です。

• 写真表示のHTMLコードの alt="代替テキスト" はなぜ大切なのか
  
  例：<img src="画像URL" width="画像横サイズ" height="画像縦サイズ" alt="代替テキスト">
• FC2ブログでよくある alt の問題
• alt は「説明文」ではなく「伝達文」
• 良い alt ／ 悪い alt の具体例
• Luminousで alt をキャプション表示する方法
• このコードで何ができるのか

この記事では、おおよそこんなことを表現してみます。

画像の alt="代替テキスト" はなぜ大切なのか

alt 属性 は、画像が表示されないときの「予備」ではありません。
本来は、画像が目視出来ない（視覚障害者など）人に向けて、その画像が何を伝えているかを言葉で補う為のものなんです。

例えば……

• 通信環境が悪く画像が読み込めない（表示されない）場合
• スクリーンリーダーを使う視覚障害者の方
• 検索エンジンが画像の内容を理解するとき

こうした場面で、alt="代替テキスト" の中身がそのまま「代替テキスト＝画像の代わり」になります。

写真ブログにおいて alt は、写真に言葉を与える重要な役目 を担っていると言っても過言ではないのです。

FC2ブログでよくある alt の問題

FC2ブログでは、画像をアップロードすると自動的に、画像表示用HTMLコードに alt 属性 が設定されます。
しかしその内容は、多くの場合、例えばアップロードしたままの RED19428C003_TP_V.jpgのような、画像ファイル名そのままで設定されてしまうのです 😰

これはブログ主が悪いわけではなく、FC2ブログシステムの仕様によるものです。
ただし、このままでは本来の alt 属性としての役割は果たしていません。
ただ、これもFC2ブログには画像のアップロード時に alt="代替テキスト" の代替テキスト部分に「ブログ主が記述した代替テキスト文」が代入される方法もあって、大抵の写真ブロガーさんはその方法を見落としていることも確かなんです。
でも、それではいけません。

せっかく記事で表現したい画像を掲示しても、その画像のアピール度は半減してしまいます。
それ程に alt="代替テキスト" の記述はとても大切だと言うことなんです。

そして、FC2ブログの場合には「代替テキスト」の入力方法はいろいろとあるんです。

【ファイルアップロード時】に代替テキスト入力

【見たまま編集】欄で画像をダブルクリックして代替テキスト入力

その結果が、下図スクショのピンク色のアンダーライン箇所の……

alt="ファイルアップロード時に代替テキストを入力する解説"

のように代替テキストが挿入されるのです。

これらの方法で代替テキストの入力チャンスを逃したとしても、「HTML編集」欄でもそれは編集出来ますから、極端なことを言えば、記事更新した後からでも幾らでも編集することが出来ると言うことです 😀

「ファイルアップロード」の時に、空白を入れることでも alt="代替テキスト" は alt="" のように空にすることも出来るんです。

この方法はご存知ない方の方が多いかもしれません。

alt は「説明文」ではなく「伝達文」

alt というと「画像の説明を書く場所」と思われがちですが、それは少し視点を変える必要があります。
alt とは、「この画像を目視で見えない人に、何を一番伝えたいか」 を書く場所なんです。
視覚障害のある方は「スクリーンリーダー」と言う方法でブログを読みますが、 alt="代替テキスト" の代替テキストはスリクーンリーダーは読み上げてくれるのですよ。 ですから、訳の解らない画像ファイル名で読み上げられたら、視覚障害者さんはどんな様子の写真なのか全く理解出来ませんよね 😨

こんな、閲覧者ファーストも考えられないブログ主で良いのでしょうか？

代替テキストは被写体の固有名詞を羅列するのではなく、写真を見たときに感じた情景の「核心」を短い言葉で表現するのが理想です。
検索ヒット率アップなどを画策し、キーワードをごちゃごちゃたくさん埋め込むことは邪道で、デメリットとなってしまいます（笑）

悪い alt ／ 良い alt の具体例

先ずは悪い例から見て見ましょう。

悪い例

悪い例は先述したように、アップロードした画像のファイル名のまま alt="RED19428C003_TP_V.jpg" が格好の悪い例です（笑）

これでは閲覧者もGoogle巡回ロボットにも、検索ロボットにも画像で表現したいことが何も伝わりません。
これでは、せっかく掲示した画像の魅力や掲示した意味を何も伝えられない酷い状態です 😰

参考に、微妙な例はこういうのです alt="夕焼けの写真"
まぁ、これは間違いではありませんが、少し言葉足らずであり情報が足りません。

良い例（画像の情景が浮かぶ alt文）

alt="海に沈む夕日を、堤防の上から眺める夏の終わり"
この代替テキスト文で、写真の雰囲気や温度感まで想像できますよね。 これが alt="代替テキスト" を正しく記述することの魅力なんです。

FC2写真ブロガーさん達が、画像表現をだいぶ損している核心部分がこれなんです。

写真ブロガーさんにとって alt="代替テキスト" は、写真作品に添える短いキャプション原稿 と言える程に重要な部分なんです。
要は、記事の一部分そのものなんですから、疎かにしては多大な損失となってしまいます。

「そんなん、いちいち書くなんて面倒じゃん」と解釈するのは大誤りであることに気が付きましょう。

画像拡大スクリプト Luminousで alt文 をキャプション表示する方法

ここからがこの記事の本題です。 先述した alt="代替テキスト" の説明は前置きでした。
但し、以下で紹介するWebテクニックは、FC2ブログの「アルバム機能」では利用出来ないことを前置きしておきます。

すでにFC2ブログで、画像拡大スクリプト Luminous を導入してあって、拡大出来る画像をクリックすると、記事欄上にそのままポップアップ表示出来るWebテクニックをご利用中の方向けに、alt="代替テキスト" をポップアップ拡大時の画像直下にキャプションとして表示する方法 を紹介します。

以下のコードを、既存の Luminous のHTMLコード（<script>）直下にコピペしてください（ブログテンプレートのHTML編集での操作です）

<script>
// これまでの動作（過去記事対応）を維持しつつ、キャプション表示機能を追加
new LuminousGallery(
  document.querySelectorAll('.luminous, a[href$="jpg"], a[href$="png"], a[href$="jpeg"], a[href$="rdf"]'),
  {},
  {
    caption: function (trigger) {
      // 1. リンク内の img タグの alt を取得
      const img = trigger.querySelector('img');
      if (img && img.getAttribute('alt')) {
        return img.getAttribute('alt');
      }
      // 2. alt が無い場合は a タグの title を使用（過去記事用）
      return trigger.getAttribute('title') || "";
    }
  }
);
</script>

上記JSを追記することで、class="luminous" を付与していない過去記事画像の aタグリンク 画像もポップアップ表示出来るようにもなりますし、キャプション表示も出来るようになります。

キャプション表示する為の CSS

下記のCSSを、ブログテンプレートの「CSS編集」欄の最下部にコピペします。

/* ================================
   Luminous キャプション表示 安定版
================================ */

.lum-lightbox-caption {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.lum-lightbox-inner img {
  display: block;
  margin: 0 auto;
}

.lum-lightbox-inner {
  padding-bottom: 0 !important;
}

/* スマホ画面表示調整 */
@media (max-width: 768px) {
  .lum-lightbox-caption {
    font-size: 13px;
    padding: 8px 10px;
  }
}

/* iOS ／ タッチ端末対策 */
@media (hover: none) and (pointer: coarse) {
  .lum-lightbox-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
  }

  .lum-lightbox-caption {
    position: static !important;
    width: 100%;
    box-sizing: border-box;
  }
}

これらのコードで何が出来るのか

上記の設定のポイントは次の通りです。

• alt="代替テキスト" が書いてあれば、自動でキャプションに表示する
• 過去記事（title 属性のみ）も壊さない
• パソコン画面 / スマホ画面両対応でキャプションを安定表示

つまりは、alt="代替テキスト" をちゃんと書くだけで、記事本文・アクセシビリティ・キャプション表示まで一気に改善 する。
という、とてもコスパの良いWebテクニックと言うことなんです 😍

写真に言葉（代替テキスト文）を添えることで、記事に表示した画像作品は、より深く閲覧者さんや巡回ロボットや検索ロボットに正確に伝わることになります。

alt="代替テキスト" ぜひ今日から、今まで以上に意識してみてください。

キャプション表示の実例

それでは、実際に、画像拡大スクリプト luminous によって、記事欄上にポップアップ拡大表示した画像の直下に「キャプション」が表示されることを見てください（スマホ画面も同様に表示）

上記画像の alt文には alt"秀麗なダイヤモンド富士" と設定してあります。

下記画像の alt文は画像アップロード時に、自動的に alt="代替テキスト" に挿入された画像ファイル名のままの alt="RED19428C003_TP_V-2-comp.jpg" となっております（笑）

こちらの画像の代替テキスト alt="RED19428C003_TP_V-2-comp.jpg" 文ではいけませんね（笑）

筆者の iPhone 13 で表示した画像とキャプション表示は下図の様になります。

代替テキストを書く必要がない場合もある

そうそう、ブログ記事に貼る画像には、記事本文とは直接関わらなくて、単に記事スペースに間を持たせる為の装飾画像だったりすることもありますよね。
画像表示のHTMLコードには、そう言った単なる装飾画像であっても alt="代替テキスト" のHTMLコードは引っ付いてくるんです（笑）

<img src="画像URL" width="画像横幅" height="画像縦幅" alt="代替テキスト">

こんな具合なんですが、HTMLの基本は、画像表示コード <img …… には何でもかんでもこの alt="代替テキスト" が引っ付いて来てしまうので、意味を持たない・持たせない画像の場合には、単に alt="" のように、中身を空にしたり alt のみの記述で、代替テキスト は未記入でも良いんです。 画像のファイル名 alt="画像ファイル名" のままにしておくことは避けましょう。
つまりは「たくさん画像を貼ってあるから、全部に代替テキストを設定するにはしんどい」場合には、適時に「未記入」にすることでも良いんです（笑）
FC2ブログでしたら、HTML編集欄でそのように編集すれば良いのです。

但し alt そのものまで「面倒だから消してしまえ」では、HTML標準チェッカー Nu Html Checker などではエラーとなってしまうので、絶対的に注意が必要です。

まとめ

先述もしたんですが「代替テキスト をいちいち書くなんて面倒じゃん ☹️」と、 alt="代替テキスト"のHTML的意味を知っている人でも、そう言い張って、結局は「画像アップロードしたままの画像ファイル名のまま」になってしまっていると、その報いはブログ主さん自身に来てしまうのですよ（笑）
閲覧者さんや巡回ロボットや検索ロボットは何も損しません（爆）

上記画像の alt="秀麗なダイヤモンド富士" のように、あなたの画像にもキチンと代替テキスト文が設定されたら、Google検索などでもヒットして、検索結果欄にあなたのその画像も表示されるかもしれませんよ～ 😍

---