イントロダクション
スタイルシートによってスタイルを適用した文字を、コピーによってブログに張り付けることのできるサービスを作ってみました！スタイル付きテキストを、コピーでブログに張り付けすることのできるサービスを作成しました！
http://upa-pc.blogspot.com/2015/02/css-copy-to-blog.html
そのソースコードをここで公開します。
なお、これは初版(Version1.0)のものであり、今後修正が加わる可能性があります。
ソースコード
<iframe srcdoc='
<form onsubmit="return false;">
<b>表示するテキスト:</b><input type="text" id="input-text" style="width: 500px" /><br />
例）こんにちは！<br /><br />
<b>テキストのスタイルシート(CSS):</b><input type="text" id="input-css" style="width: 500px" /><br />
例）text-shadow: 4px 4px 7px rgba(150, 150, 150, 1);<br /><br />
</form>
<br />
以下のテキストをコピーして、ブログの編集画面に貼り付けてください。<br />
<p>（上手くスタイルが適用されたテキストをコピーできない場合、コピー対象のテキストの上下の 1 行も含めてコピーしてみてください。）</p>
<div id="copy_target">
ここにデータが出力されます。
</div>
<script type="text/javascript">
<!--
(function () {
var id_input_text = "input-text"; // 入力テキストを保持する要素の id
var id_input_css = "input-css"; // 入力テキストを保持する要素の id
var id_output = "copy_target"; // 出力値を保持する要素の id
// 前回検査時の入力値
var input_old_text = "";
var input_old_css = "";
// 定期的に入力を監視し、入力が変化していたら、出力する
setInterval((function () {
var input_text = document.getElementById(id_input_text).value;
var input_css = document.getElementById(id_input_css).value;
if (input_text != input_old_text ||
input_css != input_old_css) {
// データ出力
var obj_output = document.createElement("div");
// 余分なデータがコピーされないように十分な余白をとる
obj_output.appendChild(document.createElement("br"));
obj_output.appendChild(document.createElement("br"));
obj_output.appendChild(document.createElement("br"));
obj_output.appendChild(document.createTextNode("--- ここから ---"));
obj_output.appendChild(document.createElement("br"));
var obj_output_text_with_css = document.createElement("span");
obj_output_text_with_css.setAttribute("style", input_css);
obj_output_text_with_css.appendChild(document.createTextNode(input_text));
obj_output.appendChild(obj_output_text_with_css);
// 余分なデータがコピーされないように十分な余白をとる
obj_output.appendChild(document.createElement("br"));
obj_output.appendChild(document.createTextNode("--- ここまで ---"));
obj_output.appendChild(document.createElement("br"));
obj_output.appendChild(document.createElement("br"));
obj_output.appendChild(document.createElement("br"));
obj_output.appendChild(document.createElement("br"));
// 画面へ出力
var obj_output_target = document.getElementById(id_output);
obj_output_target.innerHTML = "";
obj_output_target.appendChild(obj_output);
input_old_text = input_text;
input_old_css = input_css;
}
}), 500);
})();
//-->
</script>
' width="100%" height="600px" id="iframe-copy_css">
</iframe>
<script type="text/javascript">
<!--
// iframe の srcdoc 非対応ブラウザ用
// javascript で iframe の中身を作成する
(function () {
var iframe = document.getElementById("iframe-copy_css");
// iframe の中身が無ければ、作成する
if (iframe.contentWindow.document.body) {
if (iframe.contentWindow.document.body.innerHTML != "") {
return;
}
}
iframe.contentWindow.document.open();
iframe.contentWindow.document.write("<html><head></head><body>" + iframe.getAttribute("srcdoc") + "</body></html>");
iframe.contentWindow.document.close();
})();
//-->
</script>
動作確認環境
以下のブラウザバージョンで、正常に動作することを確認しました。- Chrome : 40.0.2214.111 m
- Firefox : 35.0.1
- Internet Explorer : 9.0.8112.16421, 11.0.9600.17501
解説
解説は、以下のページにて行っています。ソースコード解説：スタイル付きテキストを、コピーでブログに張り付け
http://upa-pc.blogspot.com/2015/02/explain-css-copy-to-blog-v1.0.html
コメントを投稿 （ここをクリックしてコメント投稿フォームを表示）
コメント投稿機能について