ページ 内 のリンクでページ 内 に 移 動 の html のページの 追 加 方 法 三 宅 節 雄 Html 文 書 を TeraPad で 開 きます 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> 2 <html lang="ja"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=shift_jis"> 5 <title></title> 6 <meta http-equiv="content-style-type" content="text/css"> 7 <meta http-equiv="content-script-type" content="text/javascript"> 8 <meta http-equiv="x-ua-compatible" content="ie=emulateie7" > 9 <script type="text/javascript" src="smartrollover.js"></script> 10 <style type="text/css"> 11 <!-- 12 body {margin:0px 0px 0px 0px} 13 p {margin:0px; text-align:left; font-size:88%; font-family:"ms 明 朝 ","serif"} 14 div.wordsection1 15 {page:wordsection1} 16.c1 {layout-grid:24px} 17.c2 {margin-left:52px; border:none} 18.c3 {margin-left:356px; border:none} 19.c4 {width:54px; padding:0px 7px 0px 7px} 20.c5 {width:47px; padding:0px 7px 0px 7px} 21.c6 {width:521px; padding:0px 7px 0px 7px} 22.c7 {width:123px; padding:0px 7px 0px 7px} 23.c8 {width:38px; padding:0px 7px 0px 7px} 24.c9 {font-size:114%} 25.c10 {font-size:114%; text-decoration:none} 26.c11 {font-size:114%; color:blue} 27.c12 {font-size:114%} 28.c13 {text-align:center} 29.c14 {text-align:center; line-height:16px} 30.c15 {text-align:right} 31.c16 {text-align:center; line-height:9px} 32.c17 {text-align:center; line-height:20px} 33 --> 34 </style> 35 </head> 36 <body lang="ja"> 37 <div align="center"> 38 <div class="wordsection1 c1"> 39 <div align="center"> 40 <table border="0" cellspacing="0" cellpadding="0" class="c2" summary=" "> 41 <tr> 42 <td valign="top" class="c4"> 43 <p><span class="c9"> </span></p> 44 </td> 45 <td valign="top" class="c5"> 46 <p class="c13"><span class="c9"> </span></p> 47 </td> 48 <td valign="top" class="c6"> 49 <p class="c13"><span class="c9"><img width="344" height="56" src="image/yama-001.png" alt=" 茶 臼 岳 の 雪 景 色 "></span></ 50 <p class="c14"><span class="c9"> </span></p> 51 <p class="c13"><a href="index.html"><span class="c10"><img border="0" width="95" height="20" src="image/yama-002.png" 52 <table border="0" cellspacing="0" cellpadding="0" class="c3" summary=" "> 53 <tr> 54 <td valign="top" class="c7"> 55 <script type="text/javascript"> 56 <!-- 57 bgm_file="yukiyama.mid"; 58 sw_flg=0;// 初 期 状 態 (0= 演 奏 1= 停 止 ) 59 document.write('<script language="javascript" '); 60 document.write('src="bgm_button.js"></script>'); 61 //--> 62 </script> 63 </td> 64 </tr> 65 </table> 66 <p class="c15"></p> 67 </td>
68 <td valign="top" class="c8"> 69 <p class="c13"><a name="マーク0"><span class="c9">⓪</span></a></p> 70 </td> 71 </tr> 72 <tr> 73 <td valign="top" class="c4"> 74 <p class="c13"><a href="#マーク3"><span class="c9"> 前 へ</span></a></p> 75 </td> 76 <td valign="top" class="c5"> 77 <p class="c13"><a href="#マーク0"><span class="c9">top</span></a></p> 78 </td> 79 <td valign="top" class="c6"> 80 <p class="c13"><strong><span class="c9">2013/05/17</span></strong></p> 81 </td> 82 <td valign="top" class="c8"> 83 <p class="c13"><a name="マーク4"><span class="c9">4</span></a></p> 84 </td> 85 </tr> 86 <tr> 87 <td valign="top" class="c4"> 88 <p class="c13"><span class="c9"> </span></p> 89 </td> 90 <td valign="top" class="c5"> 91 <p class="c13"><span class="c9"> </span></p> 92 </td> 93 <td valign="top" class="c6"> 94 <p class="c16"> </p> 95 <p class="c17"><strong><span class="c11"> 久 しぶりに 山 がきれいに 見 えました</span></strong></p> 96 <p class="c17"><span class="c9"> 大 倉 山 と 流 石 山 の 雪 もずいぶん 融 けてきましたが </span></p> 97 <p class="c17"><span class="c9"> 昨 年 よりは 多 く 残 っているようです</span></p> 98 <p class="c16"> </p> 99 <p class="c13"><img border="0" width="479" height="359" src="image/yama-003.jpg" alt=""></p> 100 <p class="c13"> </p> 101 <p class="c13"> </p> 102 </td> 103 <td valign="top" class="c8"> 104 <p class="c13"><span class="c9"> </span></p> 105 </td> 106 </tr> 107 <tr> 108 <td valign="top" class="c4"> 109 <p class="c13"><a href="#マーク2"><span class="c9"> 前 へ</span></a></p> 110 </td> 111 <td valign="top" class="c5"> 112 <p class="c13"><a href="#マーク4"><span class="c9"> 次 へ</span></a></p> 113 </td> 114 <td valign="top" class="c6"> 115 <p class="c13"><strong><span class="c9">2013/01/05</span></strong></p> 116 </td> 117 <td valign="top" class="c8"> 118 <p class="c13"><a name="マーク3"><span class="c9">3</span></a></p> 119 </td> 120 </tr> 121 <tr> 122 <td valign="top" class="c4"> 123 <p class="c13"><span class="c9"> </span></p> 124 </td> 125 <td valign="top" class="c5"> 126 <p class="c13"><span class="c9"> </span></p> 127 </td> 128 <td valign="top" class="c6"> 129 <p class="c16"><span class="c9"> </span></p> 130 <p class="c17"><strong><span class="c11"> 非 常 に 天 気 が 良 いです</span></strong></p> 131 <p class="c17"><span class="c9"> 白 さが 映 えます</span></p> 132 <p class="c17"><span class="c11">カーソルを 写 真 に 乗 せると 雲 で 霞 んだ 写 真 になります</span></p> 133 <p class="c16"><span class="c9"> </span></p> 134 <p class="c13"><img border="0" width="480" height="360" src="image/yama-004_off.jpg" alt=""></p> 135 <p class="c13"><span class="c9"> </span></p> 136 <p class="c13"><span class="c9"> </span></p> 137 </td> 138 <td valign="top" class="c8"> 139 <p class="c13"><span class="c9"> </span></p> 140 </td> 141 </tr> 142 <tr> 143 <td valign="top" class="c4">
144 <p class="c13"><a href="#マーク1"><span class="c9"> 前 へ</span></a></p> 145 </td> 146 <td valign="top" class="c5"> 147 <p class="c13"><a href="#マーク3"><span class="c9"> 次 へ</span></a></p> 148 </td> 149 <td valign="top" class="c6"> 150 <p class="c13"><strong><span class="c9">2012/11/05</span></strong></p> 151 </td> 152 <td valign="top" class="c8"> 153 <p class="c13"><a name="マーク2"><span class="c9">2</span></a><span class="c9"><a href="ターゲット1" target="_self"> 154 </td> 155 </tr> 156 <tr> 157 <td valign="top" class="c4"> 158 <p class="c13"><span class="c9"> </span></p> 159 </td> 160 <td valign="top" class="c5"> 161 <p class="c13"><span class="c9"> </span></p> 162 </td> 163 <td valign="top" class="c6"> 164 <p class="c16"><strong><span class="c11"> </span></strong></p> 165 <p class="c17"><strong><span class="c11">10</span></strong><strong><span class="c11"> 月 25 日 に 茶 臼 岳 に 初 冠 雪 が 有 りま 166 <p class="c17"><span class="c9">11</span><span class="c9"> 月 4 日 西 那 須 野 からも 雪 が 見 えました</span></p> 167 <p class="c17"><span class="c9">いよいよ 山 ではまた 冬 の 訪 れです</span></p> 168 <p class="c16"><span class="c12"> </span></p> 169 <p class="c13"><span class="c12"><img border="0" width="480" height="360" src="image/yama-005.jpg" alt=""></span></p> 170 <p class="c13"><span class="c9"> </span></p> 171 <p class="c13"><span class="c9"> </span></p> 172 </td> 173 <td valign="top" class="c8"> 174 <p class="c13"><span class="c9"> </span></p> 175 </td> 176 </tr> 177 <tr> 178 <td valign="top" class="c4"> 179 <p class="c13"><span class="c9"> </span></p> 180 </td> 181 <td valign="top" class="c5"> 182 <p class="c13"><a href="#マーク2"><span class="c9"> 次 へ</span></a></p> 183 </td> 184 <td valign="top" class="c6"> 185 <p class="c13"><strong><span class="c9">ご 参 考 </span></strong></p> 186 </td> 187 <td valign="top" class="c8"> 188 <p class="c13"><a name="マーク1"><span class="c9">1</span></a><span class="c9"><a href="ターゲット1" target="_self"> 189 </td> 190 </tr> 191 <tr> 192 <td valign="top" class="c4"> 193 <p class="c13"><span class="c9"> </span></p> 194 </td> 195 <td valign="top" class="c5"> 196 <p class="c13"><span class="c9"> </span></p> 197 </td> 198 <td valign="top" class="c6"> 199 <p class="c16"><strong><span class="c11"> </span></strong></p> 200 <p class="c17"><strong><span class="c11">カシミール3d により 作 成 した 展 望 図 です</span></strong></p> 201 <p class="c17"><span class="c12"> 東 北 新 幹 線 の 那 須 塩 原 市 内 の 蛇 尾 川 橋 梁 付 近 からの 景 色 です </span></p> 202 <p class="c17"><span class="c12">( 自 宅 から3.2km で 私 の 散 歩 コースの 折 り 返 し 地 点 です )</span></p> 203 <p class="c17"><span class="c12"> </span></p> 204 <p class="c13"><span class="c12"><img border="0" width="480" height="360" src="image/yama-006.png" alt=""></span></p 205 <p class="c13"><span class="c9"> </span></p> 206 <p class="c13"><span class="c9"> </span></p> 207 </td> 208 <td valign="top" class="c8"> 209 <p class="c13"><span class="c9"> </span></p> 210 </td> 211 </tr> 212 </table> 213 </div> 214 </div> 215 </div> 216 </body> 217 </html>
html 文 書 を TeraPad で 開 いてみると 上 記 の 表 示 の 様 に 行 の 開 始 位 置 がずれていますが これは 命 令 文 の 開 始 と 終 了 がセットになっており 36 行 目 の<body >と 216 行 目 の</body>がセットでその 内 側 の 命 令 は 4 文 字 後 ろにズレて 37 行 目 の<div >と 215 行 目 の</div>がセットになっています こんな 感 じで 写 真 を 1 枚 表 示 するためには 72 行 ~106 行 107 行 ~141 行 142 行 ~176 行 177 行 ~ 221 行 になっています コメント 行 とか 写 真 の 下 の 改 行 が 異 なれば 当 然 行 数 が 変 わりますが html 分 を 見 ると お 判 りのように<tr >と</tr>のセットが 2 つで 各 セットは 表 の 1 行 分 になっており 2 行 で 写 真 1 枚 分 のデータです 従 って 写 真 1 枚 分 を 追 加 するには 72 行 ~106 行 をコピーして 71 行 目 の 最 後 で 一 度 改 行 して そこに 張 り 付 けてやればよいという 事 になります 以 下 が 張 り 付 けた 後 にデータを 修 正 した 結 果 です 72 <tr> 73 <td valign="top" class="c4"> 74 <p class="c13"><a href="#マーク 4"><span class="c9"> 前 へ</span></a></p> 75 </td> 76 <td valign="top" class="c5"> 77 <p class="c13"><a href="#マーク 0"><span class="c9">top</span></a></p> 78 </td> 79 <td valign="top" class="c6"> 80 <p class="c13"><strong><span class="c9">2013/05/23</span></strong></p> 81 </td> 82 <td valign="top" class="c8"> 83 <p class="c13"><a name="マーク5"><span class="c9">5</span></a></p> 84 </td> 85 </tr> 86 <tr> 87 <td valign="top" class="c4"> 88 <p class="c13"><span class="c9"> </span></p> 89 </td> 90 <td valign="top" class="c5"> コピーして 追 加 した 行 91 <p class="c13"><span class="c9"> </span></p> 92 </td> 93 <td valign="top" class="c6"> 94 <p class="c16"> </p> 95 <p class="c17"><strong><span class="c11"> 昨 日 も 今 日 も 最 高 気 温 は 25 を 超 えました</span></strong></p> 96 <p class="c17"><span class="c9">5 月 としては 記 録 的 な 暑 さだそうです</span></p> 97 <p class="c17"><span class="c9"> 雪 はあっという 間 に 溶 けてしまいました</span></p> 98 <p class="c16"> </p> 99 <p class="c13"><img border="0" width="479" height="359" src="image/yama-007.jpg" alt=""></p> 100 <p class="c13"> </p> 101 <p class="c13"> </p> 102 </td> 103 <td valign="top" class="c8"> 104 <p class="c13"><span class="c9"> </span></p> 105 </td> 106 </tr> 107 108 <tr> 109 <td valign="top" class="c4"> 110 <p class="c13"><a href="#マーク 3"><span class="c9"> 前 へ</span></a></p> 111 </td> 112 <td valign="top" class="c5"> 113 <p class="c13"><a href="#マーク 5"><span class="c9"> 次 へ</span></a></p> 114 </td> 116 <td valign="top" class="c6"> 117 <p class="c13"><strong><span class="c9">2013/05/17</span></strong></p> 118 </td> 119 <td valign="top" class="c8"> 120 <p class="c13"><a name="マーク 4"><span class="c9">4</span></a></p> 121 </td> 122 </tr>
張 り 付 けた 後 に 以 下 の 行 を 下 記 の 様 に 上 記 で 赤 に 表 示 した 様 に 編 集 します 74 行 目 マーク 3 をマーク 4 に 数 字 を 1 つ 大 きく 80 行 目 次 へ Top と 記 載 した 行 のコメント 2013/05/17 を 新 しいコメントに 83 行 目 マーク 4 をマーク 5 に 4を5に 95~97 行 目 新 しい 写 真 のコメントに 99 行 目 新 しい 写 真 に 対 して Image/yama-003.jpg を Image/yama-007.jpg に 変 更 し 新 しい 写 真 の 名 前 も yama-007.jpg にする 次 回 からは 7 を 8 8 を 9 にと 1 大 きくする 113 行 目 マーク 0 をマーク 5 に Top を 次 へに 変 更 し 上 書 き 保 存 する 以 上 でやっと 完 成 ですが 結 構 面 倒 です 正 規 の 手 法 としては Word 文 書 そのものを 改 定 し ぽいっと HTML で 変 換 後 BGM rollover を 毎 回 設 定 し 直 します 写 真 の 番 号 も 変 わるので Image フォルダーも 古 い 方 は 削 除 します 1. Word 文 書 をダブルクリックで 開 き 2. 表 の 2 行 目 で 右 クリックし 挿 入 上 に 行 を 挿 入 を 2 回 実 施 する 3. 新 しい 2 行 目 に 前 へ Top コメント( 日 付?) 5を 記 入 する ( 次 回 は6です ) 4. 新 しい 2 行 目 の 前 へ を 反 転 させ 挿 入 ハイパーリンクでマーク 4 へリンク 続 けて Top を 反 転 させ 挿 入 ハイパーリンクでマーク 0 へリンク 5. 5を 反 転 させ 挿 入 ブックマークからマーク 5 を 作 成 する 6. 新 しい 3 行 目 に コメント 写 真 を 入 れる 7. 新 しい 4 行 目 の Top を 次 へ に 変 えると 共 に 次 へ を 反 転 させクリックしハイパーリンクの 編 集 でリンク 先 をマーク 5 にする 8. ぽいっと HTML へドラッグ&ドロップで HTML 文 書 を 作 成 する 9. IE7 互 換 設 定 BGM およびロールオーバーを 適 用 する