ライブドアブログでマウスオーバーポップアップを表示できるかテストしてみる ①◎jQueryなどのプログラムを自身のブログ内にアップロードします

[ログイン][マイページ][画像/ファイル][画像/ファイル]
[ファイル管理][フォルダを作る][script]
[script][jqeury.js][jquery-ui.js] にアップロードすると

アドレスは次のようになりました。

  http://snowjobs.blog.jp/script/jquery.js
  http://snowjobs.blog.jp/script/jquery-ui.js

[右クリック][リンクをコピー]で確認できます。
「http://ブログのURL」 に /フォルダ/ファイル名 を付けた
分かりやすいものになるようです。


無料ブログで
階層構造でファイルを管理、アップロードが可能だとは思いませんでした。***③☆☆☆


②◎ブログにプログラムを読み込む設定を記述します
[マイページ][ブログ設定][カスタムJS]
  <script type="text/javascript" src="http://snowjobs.blog.jp/script/jquery.js"></script>
  <script type="text/javascript" src="http://snowjobs.blog.jp/script/jquery-ui.js"></script>
[記入後][保存する]

[記事を書く]に戻りテキスト入力欄の下の[プレビュー]を押した後
プレビュー画面のウインドウに切り替えます

[右クリック][要素の詳細を表示]HTMLの<head>の内容を見ると
一番下の<!-- Add Header Tag // -->部分に読み込まれていることが確認できました。
△MacOSX Safari8.0.5


動作確認
 [画像をクリック]この画像のURLが表示されます
この記事のHTMLタグ編集の入力欄では次のように記載されています。

<span class="normal">△MacOSX Safari8.0.5</span>
<img src="http://snowjobs.blog.jp/content/2015_08_02/image/08021336.jpg" id="img_test">
<script type="text/javascript">
 $(function() {
  $("#img_test").click(function(event){alert( $(this).attr("src") ); });
 });
</script>

補足
上記のタグ付きのHTML文字列は
HTML文字実体参照にエスケープして表示しています。
(javascriptタグ内のプログラムを除く)

 <&lt; >&gt; .....
MacOSXではClipMenuアプリで簡単に変換できます。
ClipMenu0.4.4a12***クリップボードの履歴をペースト
 ①◎タグ付きのHTML文字列をコピーします△履歴メニューに保存されます
 ②◎画面右上のClipMenuボタン①◎のメニュー項目[右クリック]
 ③◎[HTML▷][HTML文字実体参照にエスケープ]ペースト完了

補足
jQueryとjQuery UIは次のようにダウンロードしてください。
 ①◎Download Builder | jQuery UI
 ②◎Version1.11.4 (Stable, for jQuery1.6+)
 ③◎画面の下[Download]解凍します
 Ⓐ[jquery-ui-1.11.4.custom][external][jquery]jquery.js
 Ⓑ[jquery-ui-1.11.4.custom]jquery-ui.js
△この2つをアップロードしてください。