カテゴリー別アーカイブ :

カテゴリー： HTML

Wikiのように記事の最後に注釈をつけて、そこへリンクさせる方法

2013年06月10日 Tom

文章を書いた時に、補足となる説明が必要だったとします。こんな風に→（＊注１）

補足説明を文中に書くと、長くなって文章が散漫になってしまったりするかもしれません。また、ドラえもん（＊注２）のように、多くの人が知っているけど、知らない人がいる場合に備えて注釈を入れるなどという場合もあります。

実際に（＊注１）か（＊注２）をクリックすると、この記事の最後の注釈に飛びます。今回は、Wikiのように、記事の最後に注釈をまとめて書いておき、記事中から、そこへリンクを張る方法です。

リンクを張る実例

ページの途中へのリンクの張り方は、以前の記事に詳しく書いています。ですので、理屈の説明は省略します。今回は実例のみの説明です。

参考記事：ページの途中にリンクする

ここでは、すでに本文と、それに対応する注釈を書き上げているものとします。

まず、注釈にidをつけます。

これで、「注１の説明文」には note1 というidが、「注２の説明文」には note2 というidが、それぞれ振られました。

次に、本文中の（＊注１）（＊注２）という部分にリンクのタグを書き加えます。

「＊注１」をクリックすると、 note1 へ飛ぶようにしたいのでリンク先は、先頭に # をつけてから note1 と書きます。同様に「＊注２」をクリックすると、 note2 へ飛ぶように、先頭に # をつけてから note2 と書きます。

これで、「＊注１」をクリックすると「note1」へ移動しますし、「＊注２」をクリックした時には「note2」へ移動するようになりました。

注釈へのリンクを別ウインドウで開く

もし、本文を読んでいる途中で注釈をクリックして、その度に画面が注釈へ移動してしまったら、かえって面倒です。注釈が別ウインドウで開いてくれれば、本文はそのままの位置でいられます。

そのためには、リンクの「aタグを」以下のようにします。

実行例：実際に右のリンクをクリックすると別ウインドウで開きます。 → ＊注１＊注２

別ウインドウで開く事の説明に関しては、次の記事を参照してください。

参考記事：同じページの特定のIDを別窓で開く

＊注１：注１の説明文。ここはダミーの説明文です。ここはダミーの説明文です。ここはダミーの説明文です。ここはダミーの説明文です。ここはダミーの説明文です。ここはダミーの説明文です。ここはダミーの説明文です。ここはダミーの説明文です。ここはダミーの説明文です。ここはダミーの説明文です。

＊注２：注２の説明文。ドラえもん目覚まし時計はいかがですか？

新ブログ「Big Bang」で続きを読む →

カテゴリー： HTML

Internet Archiveという自動保存Web魚拓

2013年03月21日 Tom

これは「HTML」というカテゴリーが適当というわけではないですが、他にいいカテゴリーがないので、ここに入れておきます。内容は簡単な「豆知識」です。

このブログは今年、2013年３月1日に模様替えをしました。テンプレート自体は形になっていますが、古い記事を開くと、記事の部分だけ表示が変だったりします。古い記事は新しいスキンのレイアウトにあっていないんです。今後、古い記事を順番に改訂し、レイアウトを統一しなくてはいけないなと思っています。

で、ですね。古い記事によっては、特にカテゴリーの「ブログカスタマイズ」であったり「スタイルシート」においては、記事の説明と実際の（現在の）このブログのレイアウトと違っていたりして、意味が通じないことがあります。

古いレイアウトを再現して、提示できればいいんですけど、それをやるのは大変だし、どーしましょ？というのが、今回のお題。

「Internet Archive」という自動保存「Web魚拓」

世の中には、探せば便利なものがありまして「 Internet Archive 」というのも、そのひとつです。

便利である半面、人によっては都合が悪い場合もあるかもしれません。というのは消したはずのページが、ここに残っているかもしれないからです。「ウェブ魚拓」というのがありますが、あれの自動保存版といえばわかりやすいでしょうか？それもタイムラインに沿って探せるようになっています。

「Internet Archive」の使い方

「Internet Archive」には膨大な数のサイトが保存されていますが、検索には探したいサイトのURLが必要です。サイト名が分かってもURLが分からなければ探せません。基本的には「ブックマークしてあったページがなくなった。あのページの情報が欲しかったのに！」というような時に力を発揮するのが「Internet Archive」です。ですが、サイト名が分かる場合はGoogleなどで検索すればURLが見つかるかもしれません。

今回は、このブログのURL「https://fanblogs.jp/ayzfqir5/」を例に説明します。

まず、 Internet Archive のページを開きます。サイトの左上は下図のようになっています。

サイトを検索する場合、タブは「Web」のままで、Searchに探したいページのURLを打ち込みます。「All Media Types」はそのままでいいです。そして「GO!」ボタンをクリック。

Internet Archive

下のようなグラフと一緒にカレンダーの一覧が表示されます。このブログを始めたのは2011年の5月ですが、グラフを見ると「Internet Archive」に保存されたのは2011年の末からのようです。

参考記事：ブログ誕生日の調べ方

検索結果

ということで2011年の、このブログを見てみます。グラフは現在（2013年）を指しているので、2011年をクリックします。ちょっとモタつくかもしれませんが、ページのカレンダーが2011年の一覧に変わります。

カレンダー

カレンダーの日付が水色になっているのが、保存されているデータのある日です。それによると、このブログがはじめてアーカイブされたのは2011年12月22日のようです。

その日付をクリックしてみます。出ました。懐かしい画面。当時のレイアウトのこのブログです。

今度は、今年のカレンダーから1月17日を選択。確かに今年1月のレイアウトです。

このようにして「 Internet Archive 」では古いWebページを探して見ることが出来ます。誰でも無料で使えますので、困ったときは利用してみてはいかがでしょう？

新ブログ「Big Bang」で続きを読む →

カテゴリー： HTML

ブログ移転で rel="canonical" は有効か？

2013年03月14日 Tom

そもそもは、このブログで使っているYahoo!JAPANの「カスタムサーチ」がカスタマイズしやすくてオススメだという記事を書こうとしていたわけです。

そうしたらカスタムサーチのページで「内容が重複する複数のURLをまとめるよう、検索エンジンに通知」という記事を見つけました。

サイトには、URLは異なるがウェブページの内容は変わらないというケースがあります。たとえば、URLがトラッキング用のパラメータを含んでいる場合や、URLに含まれるパラメータをもとに閲覧環境によってウェブページの表示を最適化しているような場合です。

例

http://www.example.com/products?trackingid=feed

http://www.example.com/products?sessionid=hgjkeor2

http://www.example.com/products?printable=yes&trackingid=footer

このような場合、検索エンジンのインデックスに個々のURLで登録されると、同じ内容のウェブページが検索結果に表示されたり、同じ内容のウェブページであるにもかかわらず、各URLにクローラーが巡回し、サーバーに負荷をかけてしまう、また、サイト内の巡回が効率的に行われないといった不都合が発生することがあります。このようなことを避けるため、サイト管理者がウェブページのなかで<link>タグを利用して、重複を避けるように検索エンジンに通知する方法が用意されています。

具体的にはヘッダに下の様に書いたとすると
「このページはhttp://www.example.com/と同じ内容です」と宣言したことになるようです。

ということは、ここでひとつの疑問が出てきます。

別のドメインでも canonical は適用できるのだろうか？

その回答はGoogleの「 rel="canonical" 属性について - ウェブマスターツールヘルプ」にありました。

rel="canonical" 属性を使用して、まったく別のドメイン上の URL を指定できるか

リダイレクトは簡単に設定できない場合があります。たとえば、サーバーサイドのリダイレクトを作成できないウェブサーバーを使用しているときに、新しいドメイン名に移行する場合などです。このような場合には、rel="canonical" リンク要素を使用して、このドメインでインデックス登録の対象になる正確な URL を指定できます。rel="canonical" リンク要素は絶対的な指示ではなく、ヒントとしてみなされますが、Google では可能な限りこの要素を追跡します。

つまり、解釈が間違っていなければ「rel="canonical" 属性」は、次のような使い方が出来るということでしょうか？

ブログやサイトを別ドメインに移転した。今までに作ったページも新しいドメインにコピーした。今後は新ドメインで運用するが、これまでの遺産として古いドメインにも記事を残しておきたい。

しかし、そうすると後から作った新しいサイトがコピーサイトとして検索エンジンに低く扱われる可能性がある。そうならないために、今までの（古い）サイトのHTMLに「rel="canonical" 属性」でコピー済みの新しいサイトの記事を指定しておく。そうすることで検索エンジンには、新サイトを優先するよう指定する。

そうすると「Google では可能な限りこの要素を追跡」してくれるのでしょうか？実は最近、この条件に合致した移転ブログがあります。

パート派遣主婦のぐーたら子育て生活（長いので以下「パー活」と省略表記）

「パー活」は最近、独自ドメインを取って「ココロデザイン」というサイトに移転しました。その移転の際のリポートを「技術のタマゴ」というブログに書いています。が、自分は読んでいないのでよくわかりません。ただ、noindexがどうだとか、いろいろやっていたみたいなので参考になるかもしれない。

ということで「技術のタマゴ」を開いたら、こんな記述が見つかりました。

※rel="canonical"で重複記事の中で、新記事を一番だと主張する
　という案もありましたが、同一ドメイン間じゃないと
　使えないということで、却下になりました。

おかしい。Googleのページには、こう書いてあります。「リダイレクトを作成できないウェブサーバーを使用しているときに、新しいドメイン名に移行する場合などです。このような場合には、rel="canonical" リンク要素を使用して、このドメインでインデックス登録の対象になる正確な URL を指定できます」

そうであるなら「同一ドメイン間じゃないと使えない」というのは間違いじゃないでしょうか？

しかし、rel="canonical" で新サイトを指定できるとしても、ブログで実際にどうやればいいのかという問題があります。すべての記事のヘッダにrel="canonical"属性で、新しいURLを書き込まないといけませんが、多くの無料ブログのテンプレートでは１記事ごとに違うURLを指定する事は出来ません。

ファンブログハックの記事から

ファンブログハックに「「タイトルタグの重複」をjavascriptで回避する(ファンブログ、FC2) 」という記事があります。JavaScriptを使ってHTMLに書いてあるのと違うタイトルに書きかえたところ、Googleには書きかえたタイトルが反映されたという内容です。

実はこのブログは今月１日に新しいスキンに変えているんですが、「 site:fanblogs.jp/ayzfqir5 」をググるとおもしろい結果が出ます。このブログのスキンには、タイトルにページ番号やカテゴリー名を表示させる機能がありません。なので、JavaScriptで書き加えているんですが、スキンを変えて数日で、検索結果に反映されるようになりました。ファンブログハックの記事の通りです。

検索結果にはJavaScriptで修正したタイトルが表示されている

ヘッダにrel="canonical" 属性を追加するスクリプト

ということは、JavaScriptで、ヘッダにrel="canonical" 属性を追加すれば、検索に反映されるのではないだろうか？つまり、新しいサイトを優先して表示してくれるのではないだろうか？と仮定できるのです。もし、それが出来るなら「パー活」にnoindexを指定する必要はなくなります。

とは言ったものの、ページ数がたくさんある時は大変です。ちなみにページが数ページしかない時には、下のようなスクリプトで実現できると思います。

前提条件として、古い記事のURLはすべて「https://fanblogs.jp/parthaken/archive/ xxx /0」というフォーマットになっているものとします。URLの中のxxxは数字です。この数字ごとに新しいURLをヘッダに書き加えます。新しいサイトでは、記事の内容ごとに違うブログに分けていたとしても大丈夫です。

<script type="text/javascript"><!--
var urls={
	"001":"http:\/\/hoge.example.com/page_001.php",
	"002":"http:\/\/moge.example.com/page_002.php",
	"003":"http:\/\/kome.example.com/page_003.php"
};

var key=window.location.href.match(/\/archive\/([0-9]+)\//);

if(key){
	document.write('\<link rel="canonical" href="'+urls[key[1]]+'" /\>');
}
//-->
</script>

これをheadタグの中で、一番最初のscriptタグの直前に書けばうまくいくと思います。古い記事のURLがhttps://fanblogs.jp/parthaken/archive/001/0なら「http://hoge.example.com/page_001.php」というように、それぞれの新URLをヘッダに追記します。

しかし、記事が何百ページもあったら上のやり方では無理があります。

新ブログ「Big Bang」で続きを読む →

カテゴリー： HTML

別窓が開くリンクと開かないリンク

2013年01月11日 Tom

リンクをクリックすると別の窓が開いて新しいページを表示する場合と、同じ窓で、開いていたページを消して新しいページに変わる場合があります。

ここをクリックすると、別窓で開きます。ここをクリックすると、このページを消して新しいページに変わります。

どこを変えると、別窓で開いたり、同じ窓で開いたり切り替えられるのでしょうか。

ファンブログのリンク

ファンブログの編集画面でリンクを張る方法は、ここに書いてあります。「リンクを貼る」

これで、自動でHTMLに書き換えてくれます。

ただし、このやり方だと「リンク先に指定したページが新しいウィンドウで表示されます」と、説明に書いてあります。

新しいウインドウではなく、同じウインドウで新しいページに切り替えたい

新しいウインドウで開く場合は、上のままでOKです。以下は、同じウインドウで新しいページに切り替えたい場合の説明です。

先ほどの「リンクを貼る」では自動で、どのようなHTMLに書き換えているのでしょうか？
それは下のとおりです。

<a href=" リンク先URL " target="_blank" >ここをクリックすると、別窓で開きます。</a>

この中の、 target="_blank" という部分が別の窓で開け！という命令です。
ですから、この赤文字部分を削除すれば、同じ窓でページが変わります。

ただ、そうするのなら自分でリンク部分のHTMLを書く必要があります。自動でリンクを貼れば、必ず新しいウインドウでページが表示されます。（ファンブログの場合）

同じ窓で、新しいページに変わるリンクの書き方

<a href=" リンク先URL ">ここをクリックすると、このページを消して新しいページに変わります。</a>

<a href=" http:// "> と </a> のタグは半角で書きます。

新ブログ「Big Bang」で続きを読む →

カテゴリー： HTML

ブログ誕生日の調べ方

2012年12月28日 Tom

適当なカテゴリーがないから「HTML」に入れてますが、RSSに関する記事です。

自分がブログをいつはじめたのか？覚えていればいいですが、忘れてしまったとしても、RSSを見れば調べることが出来ます。

まず、HTMLのヘッダを見て、次の場所を探します。

<link rel="alternate" type=" application/rss+xml 
" title="RSS" href=" RSSのURL 
">

目印は type="application/rss+xml" です。このタグの中の href で指定されたURLをコピーします。
このURLがブログのRSSのアドレスです。

このブログを書いているファンブログだと、RSSのアドレスは
自分のブログのURLの末尾に index1_0.rdf を追加したものになります。

このブログのRSSは https://fanblogs.jp/ayzfqir5/ index1_0.rdf です。

コピーしたURLをブラウザのアドレスバーに貼り付けてEnterを押します。すると、次のような画面が開かれます。

RSS

表示されているのはRSSですが、ブログ誕生日を見るには、このRSSのソースを見ます。

Google chromeやfirefoxだと、RSSの画面上でマウスを右クリックすれば「ソースを表示」という項目があるのでクリックします。それ以外のブラウザのソースの開き方は調べてください。

ソースの最初は次のようになっています。

<?xml version="1.0" encoding="UTF-8"?>

<rdf:RDF
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns="http://purl.org/rss/1.0/">

  <channel rdf:about="https://fanblogs.jp/ayzfqir5/">
    <title>ここにブログの名前を入れます</title>
    <link>https://fanblogs.jp/ayzfqir5/</link>
    <description>HTML、CSS、JavaScript、スパムと悪徳商材の対策</description>
    <dc:language>ja</dc:language>
    <dc:creator>Tom</dc:creator> <dc:date>2011-05-19T23:31:35+09:00</dc:date>

この中の <dc:date>2011-05-19T23:31:35+09:00</dc:date> がブログ誕生日のデータです。

このブログは、 2011年05月19日の23時31分35秒に誕生しました。+09:00というのはグリニッジ標準時で9時間の時差があるという表示です。

新ブログ「Big Bang」で続きを読む →

カテゴリー： HTML

どうでもいいコメントフォームを作る

2012年12月19日 Tom

このブログのサイドバーに「どうでもいいコメント用フォーム」を作りました。記事とは関係ないコメント用です。「お問い合わせフォーム」みたいな使い方も出来るでしょうが、このブログではジョークソフトの感覚で設置しています。

以下は、その設置方法です。

ご自由にコピペしていただいて構いませんが、厳密に考えて作っていませんのでトラブルがあっても当方は責任を持ちません。お使いの際は、それをご了承ください。

クッキーや入力チェックはありません。追記：ファンブログのみ、ログイン中のクッキーを有効にしました。

サポートはしません。質問には答えませんので、見てわからなければ設置はあきらめてください。

送信先ページを作る

まず、フォームに入力されたコメントが送られる先、言い換えると、書き込まれたコメントの表示先となるページを作ります。

これは普通にブログの記事をひとつ作るだけです。記事のタイトルも文面も、ご自由に作ってください。

ページが出来たら、ブラウザでそのページを開きます。そして、表示されたページのソースを見ます。

ソースを見るには、Google chromeやfirefoxなら右クリックして、「ページのソースを表示」を選択します。その他のブラウザの場合は、、、、調べてください。

ページのソースの中に下の箇所があります。ブログだと通常は送信フォームは一つしかないと思いますので、ページ検索すればすぐに見つかると思います。

nameの値 WriteCommentForm はファンブログの場合です。

< form method="post" name="WriteCommentForm" action =" URL ">

form タグの中にある action に書いてある URL をコピーします。このURLが送信先のURL です。

あとは、サイドバーに送信フォームを作り、送信先に先ほどの送信先のURL を指定するだけです。

以下は、このブログを書いているファンブログの場合ですが、その他のブログでも { と } で括ったファンブログの独自タグを削除して、すべてのname属性の値を正しく書き換えれば使えると思います。青字部分は、お好みで書き直してください。

{ と } で括ったファンブログの独自タグは、送信後、エラーがあった場合にそこにエラーが書き込まれるもので、ファンブログのみで有効です。

ここに表示ページのURL と書いてある場所には、コメントを送信するために作った記事のURL を書き込みます。

スタイルシートはご自分のブログに合わせて作ってください。

フォームのソース

ファンブログで、上に出てきた name="WriteCommentForm" をつけるとクッキーが反映されません。

<h3> どうでもいいコメントはこちらへお願いします 
</h3>
<form method="post" action=" ここに 送信先のURL 
を記入 
">
<table border="0" cellspacing="0" cellpadding="0">
<tr align="left" valign="top" height="25">
<td class="text" width="50" nowrap align="right">名前:</td>
<td class="text"> <input name="author" value="{$CommentValueAuthor$}" /> <br /> {$CommentErrMsgAuthor$} </td>
</tr>
<tr align="left" valign="top" height="25">
<td class="text" nowrap align="right">Email:</td>
<td class="text"> <input name="email" value="{$CommentValueEmail$}" /> <br /> {$CommentErrMsgEmail$} </td>
</tr>
<tr align="left" valign="top" height="25">
<td class="text" nowrap align="right">URL:</td>
<td class="text"> <input name="url" value="{$CommentValueUrl$}" /> <br /> {$CommentErrMsgUrl$} </td>
</tr>
</table>
<textarea name="comment" rows="10" style="width:100%;"></textarea><br />
{$CommentErrMsgComment$}
<p style="text-align:right;"><input type="submit" name="post" value="送信する" /></p>
</form>
<p style="margin-top:1em;"><a href=" ここに表示ページのURL 
"> どうでもいいコメント一覧を見る！ 
</a></p>

ファンブログ用の追記

ファンブログのみ、クッキーを有効にしました。
下のコードを上のフォームの直後に追加すれば、ログイン中は自動で名前やURLが入力されるようになります。

<script type="text/javascript">
<!--
(function(){
	var gCommentInCookie=new Cookie(document,'blog.comment.preferences.in');

	if(gCommentInCookie.load()){
		var loginFlag=false;

		for(var i=0;i<gCommentSaveCookieNames.length;i++){
			var name=gCommentSaveCookieNames[i];
			var input=document.getElementsByName(name);
			var cookie=gCommentInCookie[name];

			if(!input.length||'string'!=typeof cookie){continue;}

			var obj=document.createElement("span");
			obj.setAttribute('style','font-size:80%');
			obj.appendChild(document.createTextNode(cookie));

			input=input[input.length-1];
			input.value=cookie;

			input.parentNode.insertBefore(obj,input);
			input.style.display='none';
			loginFlag=true;
		}
	}
})();
// -->
</script>

新ブログ「Big Bang」で続きを読む →

カテゴリー： HTML