このページに記載されている「CSS」「JavaScript」等は、あくまでも記述例となっております。ご利用するPCサイトによって変更しないといけない場合があります。
そのため、このまま使用しサイトに異常が出た場合は、サポートは対象外となりますので、予めご了承の上ご利用いただけますようお願いいたします。
平素より、shuttoをご利用いただき、ありがとうございます。
shutto小技 Topicsは長いかな…と思いましたので、shutto小技に変更してみました。
今回は、shutto変換時に使用すると便利な追加JavaScriptをご紹介いたします。
■一括で画像のalt属性をテキストに置換えるJavaScript
shuttoには、画像のalt属性をテキスト表示する機能(PDF)がございますが、画像を個別にドラッグ&ドロップをして設定する必要があり、divやtableなどの大きい要素でドラッグ&ドロップし変換を行いたい時に、使用できない場合があるかと思います。
そんな時は、JavaScript追加機能(PDF)を使用し、要素の中の画像を一括でテキストに置換えることができます。
1.「変換完了時に実行されるコード」に下記コードを追加する
(function($) { $('.imgToAlt img[alt]').each(function(i, image) { $(image).replaceWith(document.createTextNode(image.alt)); }); })(Zepto);
2.alt属性をテキスト表示させたい要素の「編集メニュー > HTML属性 > class」に「imgToAlt」を追加する
3.保存して、プレビューで確認します。
※編集画面上では、画像のままですが、変換後にJSが実行されますのでプレビュー画面及び本番環境ではテキストで表示されます
(function($) { $('.imgToAlt input[type="image"]').each(function(i, image) { $(image).attr('type', 'submit'); }); })(Zepto);
「一括で画像のalt属性をテキストに置換える」の1.に書くコードを上記に変更するとサブミットボタンの画像をvalueの文字列に変更することができます。
★補足★
shuttoでは、jQueryの代替ライブラリZeptoを使用することができます。
・Zeptoとは?
jQueryと互換性があり、jQueryで使用されている多くのAPIを使用することができます。
一部、使用できないAPIもございますので、詳しくはZeptoの公式サイトをご参照ください。
Zeptoを使用する際は、下記のように囲ってご使用ください。
(function($) { // この中に処理を書く })(Zepto);