OCテックノート

サイトマップを作成する、のページでも紹介したサイトマップツールですが、リンク切れのチェックにも使えます。
ローカルにあるファイルのリンクチェックはほかのツールでできると思いますが、Web上でできるものは重宝しますよね。 [smile]
まずは、下記のツールをIEで開いてください。

http://www.auditmypc.com/xml-sitemap.asp

立ち上げ方はサイトマップを作成する、編と同じです。
「settings」のタブをクリックし、URLにチェックしたいサイトのURLを入力します。
右下の緑の三角をクリックすると、チェックが始ります。
終了すると、サイトマップの作成とともに、リンク切れのファイルについては赤いマークで「Failed」と出ます。
Failedだけ閲覧したい場合は、「Row Filter」というボタンをクリックしまず右下の「Enabled」をチェックします。そして、「Status」を「Failed」に合わせます。
すると、リンクが失敗したものだけ抽出してくれます。
「In-l」という列が、リンク元なのでその列のプラスマークのアイコンをクリックするとどこのファイルからリンクが失敗しているか教えてくれます。

便利です！

2018年6月22日

リンク先を動的に書き換える

Javascript

タグのリンク先を、Javascriptで動的に書き換えるスクリプトサンプルです。

 //例　リンク先をtest.htmlからtest2.htmlに書き換え
 <a href="test.html" id="test_target">テスト</a>
 
 <script>
 
    var testTarget=document.getElementById('test_target');
    testTarget.href="test2.html";
      
 </script>

リンク先は、test2.htmlになっています。

idの後のイコールが抜けてるスクリプトサンプルとして致命的なミスなぜ気付かないのか — oioi {2014-05-02 (金) 11:07:55}
ご指摘有難うございます！申し訳ありません、書き換えました。 — 中の人 {2014-05-02 (金) 20:02:16}

2018年6月22日

リモートアシスタンス利用方法

遠隔地の誰かに Windows を操作してサポートしてもらう「リモートアシスタンス」機能は、次のように使うことができます。
サポートが必要なユーザーが、次の手順でサポートしてくれる人を招待します。

1,[スタート]－[すべてのプログラム]－[リモートアシスタンス] をクリックします。
2,「[→]友人を招待する」をクリックします。
3,招待の送信手段を (1)Windows Messenger で送信 (2)メールに添付 (3)ファイルに保存から選択します。
4,(e-mail 使う場合) 招待相手のメールアドレスを記入して「[→] この人を招待する」をクリックします。
5,送信者名とメッセージを記入して「続く >」ボタンをクリックします。
6,招待の有効期限とパスワードを設定して「招待を送信」ボタンをクリックします。

招待された側 (こちらも XP を実行している必要があります) は、メールに添付されたファイルをダブルクリックします。
※この時点で双方の PC ともネットワークに接続されている必要があります。

1,招待できない場合、次の設定を確認します。 [スタート]－[コントロールパネル] から「システム」を開きます。

2,[リモート] タブをクリックし、「このコンピュータからリモートアシスタンスの招待を送信することを許可する」にチェックが入っていることを確認します。
(ここの「詳細設定」で招待した相手にデスクトップを操作させるか、見せるだけかを設定できます。)

※
メールソフトウェアとして Outlook Express などの MAPI クライアントが正しくセットアップされていない場合、直接メールで招待を送ることができません。
この場合、一旦招待をファイルとして保管し、お使いのメールソフトで添付ファイルとして送信してください。
FrontPage

2018年6月22日

リダイレクト　Javascriptとmetaタグどちらが早い

Webサイト作成 TIPS

Web上で、あるURLにアクセスがあったとき、他のURLに転送させることを「リダイレクト」とか「HTTPリダイレクト」とか呼びますが、すぐ転送したいとき。Javascript とmetaタグに記載する二つの方法のどちらが早いか比較してみたときの話です。
ちなみに、.htaccessを使ってリダイレクトする方法もありますが、それだとディレクトリ単位になってしまうので、あまりよろしくない場合の話です。

結論から言うと、比べるとJavascriptでやった方が早いですね。
以下、使ったスクリプトです。
両方とも、HTMLの～　タグの間に書いてください。

＜meta＞タグ使用例（http://www.onlineconsultant.jp/はジャンプしたいURLに変えてください。

 <meta http-equiv="Refresh" content="0;URL=http://www.onlineconsultant.jp/">

javascript使用例

 <SCRIPT type="text/javascript">
 <!--
 setTimeout("link()", 0);
 function link(){
 location.href='http://www.onlineconsultant.jp/';
 }
 -->
 </SCRIPT>

なんのブラウザを使ったときに、どれくらい速くなったかというデータが無いとせっかくの情報も、価値が半減 — 通りすがり {2012-03-16 (金) 05:48:47}
SEO的な関連として、javascriptだとbotが拾わなさそうな気がするけど一応メタタグにも入れるほうがいいんじゃないかな？ — {2013-12-23 (月) 09:36:48}
各検索エンジンの推奨方法は.htaccessですね。 — {2014-01-28 (火) 13:13:58}
google botはajaxや複雑なJSも余裕で実行していきますし、全く問題無いですね — {2014-01-29 (水) 08:31:45}
Location ヘッダー以外の方法をリダイレクトって呼ぶのはどうなのかね — {2014-12-09 (火) 21:49:52}
setTimeoutに文字列使うのが非推奨なのでsetTimeout(function() {location.href=”URL”;}, 0);とかの方がいいかもしれませんね — {2014-12-31 (水) 18:24:31}
setTimeout を使う必要性が判りません。即時関数ではだめなのですか？ — {2016-04-07 (木) 11:44:31}
リファラとかGetパラメータなどがちゃんと取れないはずなのでJSでのページ遷移は気持ち悪いです(Webマーケティングに興味のない方はいいかもしれませんが — hoge {2016-09-07 (水) 09:55:26}
javaはjimdoで使えるからいいと思います。 — ウォーター {2017-09-12 (火) 21:14:01}

2018年6月22日

リストのマーカーの画像　位置調整

Webサイト作成トラブル
 css

さて、前回リストのCSSのブラウザ間の違いについて述べてみました。
リストのCSS　ブラウザ間の違い
リストのCSS　ブラウザ間の違い2

今回は、悩ましい！リストのマーカー（箇条書きの頭につく黒い点などのこと）の画像の位置調整についてまとめてみます。

まず、画像をリストのマーカーに画像を指定してみます。

 list-style-image:url(画像へのリンク)

でマーカーに画像が指定できます。
やってみましょう。

 <style type="text/css">
 <!--
 ul {
 	padding-left: 10px;
 	margin-left: 10px;
 	list-style-image:url(images/yaji_red.gif)
 }
 
 -->
 </style>
 </head>
 
 <body> 
 リストだよー。
 <table><tr>
 <td style="width:70px; background-color:#FFCC33">
 <ul class="test1">
 <li>ナルト
 	<ul>
     <li>ナルト連弾</li>
    <li>ナルトキック</li>
     </ul>
 </li>
 <li>さすけ</li>
 <li>さくら</li>
 </ul>
 </td>
 </tr></table>
 </body>
 </html>

Firefoxのスクリーンショットです。（IE6でもほぼ同じ）

ネストされているリスト（子供のリスト：ナルト連弾やナルトキックの部分）のマーカーを、できれば文章の縦位置の真ん中に持ってきたいとします。

残念ながら、これを指定する方法はないようです。 [sad]
divで背景に画像を設定して、padding や背景位置の指定でなんとかするようにはいかないのです。
listタグのマーカーの位置を変更するために設けられているプロパティはlist-style-position にて、outsideかinsideを指定するしかありません。
参考：リストのCSS　ブラウザ間の違い2

heightやvertical-alignを仕込んでみても、縦に長い画像をマーカーに仕込んでみても無駄です。
縦に長い画像を仕込んだ場合、マーカーの画像が終わったところからリストのコンテンツが始まります。

横方向に動かすことは、小細工でできます。
何かというと、たとえばタグなどを仕込み、そのタグの配置を指定します。
ただし、縦方向には効きません。
縦方向にマーカーを動かすことはどうやらできないようです。
コンテンツの場所を変更しても、マーカーが一緒にくっついてくるからです。
横方向に、マーカーとコンテンツを離すことができるだけです。

 <style type="text/css">
 <!--
 ul {
 	padding-left: 10px;
 	margin-left: 10px;
 	list-style-image:url(images/yaji_red.gif)
 }
 
 a{
 	display:block;
 	padding-top:20px;
 	margin-top:20px;
 	paddhing-bottom:20px;
 	margin-bottom:20px;
 	
 	padding-left:20px;
 
 } 
 -->
 </style>
 </head>
 
 <body>
 リストだよー。
 <table><tr>
 <td style="width:70px; background-color:#FFCC33">
 <ul class="test1">
 <li>ナルト 
 	<ul>
     <li><a>ナルト連弾</a></li>
     <li>ナルトキック</li>
     </ul>
 </li>
 <li>さすけ</li>
 <li>さくら</li>
 </ul>
 </td>
 </tr></table>
 </body>
 </html>

上記HTMLでナルト連弾とかいてあるところにタグを仕込み、タグに上下・左のマージンやパディングを指定したところ。

マーカーは縦方向にコンテンツをずらしてもくっついてきます。
横方向にだけ、マーカーからコンテンツを離すことができます。