PCサイトをドラッグ&ドロップでスマホ対応!

  • ログイン
  • ユーザ登録

【shutto小技】変換元PCページのhtmlを書き換えるJavaScript

2013年8月21日 | 森下 奈緒

シェアする

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

HTML構造を利用して変換を行っている際にPCページのhtmlの変更したい…という時に追加するJavaScriptをご紹介します。

例えば、下記のようなhtmlを書き換えたい…

[html]
<div class="box">
<span>りんご</span>
</div>
[/html]

そんな場合は、下記JavaScriptを編集画面の「ページ」の編集メニュー内の「変換前に実行されるコード」に下記を記入します。

[html]
(function($) {
$(‘div.box’).each(function(i, div) {
div.innerHTML = ‘<p>みかん</p>’;
});
})(Zepto);
[/html]

すると…。下記のようにhtmlが変更されます。

[html]
<div class="box">
<p>みかん</p>
</div>
[/html]

※編集画面ではJSが実行されませんので、プレビューページでご確認ください。

変換元PCページ挿入されている余計なスペース( )を削除したい場合には下記のように使用します。

■例
[html]
<div class="box">
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;みかん</p>
</div>
[/html]

「変換前に実行されるコード」に下記を記入。

[html]
(function($) {
$(‘div.box p’).each(function(i, p) {
p.innerHTML = p.innerHTML.replace(/&nbsp;/g, ”);
});
})(Zepto);
[/html]

余計なスペースが削除されました。

[html]
<div class="box">
<p>みかん</p>
</div>
[/html]

スマホ向け表示
株式会社イー・エージェンシー

〒100-0006 東京都千代田区有楽町1-9-4 蚕糸会館4階