【shutto小技】一括で画像のalt属性をテキストに置換えるJavaScript

このページに記載されている「CSS」「JavaScript」等は、あくまでも記述例となっております。ご利用するPCサイトによって変更しないといけない場合があります。
そのため、このまま使用しサイトに異常が出た場合は、サポートは対象外となりますので、予めご了承の上ご利用いただけますようお願いいたします。

平素より、shuttoをご利用いただき、ありがとうございます。
shutto小技 Topicsは長いかな…と思いましたので、shutto小技に変更してみました。

今回は、shutto変換時に使用すると便利な追加JavaScriptをご紹介いたします。

■一括で画像のalt属性をテキストに置換えるJavaScript

shuttoには、画像のalt属性をテキスト表示する機能（PDF）がございますが、画像を個別にドラッグ＆ドロップをして設定する必要があり、divやtableなどの大きい要素でドラッグ＆ドロップし変換を行いたい時に、使用できない場合があるかと思います。

そんな時は、JavaScript追加機能（PDF）を使用し、要素の中の画像を一括でテキストに置換えることができます。

１．「変換完了時に実行されるコード」に下記コードを追加する

(function($) {
 $('.imgToAlt img[alt]').each(function(i, image) {
   $(image).replaceWith(document.createTextNode(image.alt));
 });

})(Zepto);

２．alt属性をテキスト表示させたい要素の「編集メニュー > HTML属性 > class」に「imgToAlt」を追加する

３．保存して、プレビューで確認します。
※編集画面上では、画像のままですが、変換後にJSが実行されますのでプレビュー画面及び本番環境ではテキストで表示されます

(function($) {
 $('.imgToAlt input[type="image"]').each(function(i, image) {
   $(image).attr('type', 'submit');
 });
})(Zepto);

★補足★

shuttoでは、jQueryの代替ライブラリZeptoを使用することができます。

・Zeptoとは？
jQueryと互換性があり、jQueryで使用されている多くのAPIを使用することができます。
一部、使用できないAPIもございますので、詳しくはZeptoの公式サイトをご参照ください。

Zeptoを使用する際は、下記のように囲ってご使用ください。

(function($) {

// この中に処理を書く

})(Zepto);