変更履歴と印刷用ページ表示の実装を変更
このブログの変更履歴表示用のページと印刷用ページは，スタイルシートの追加読み込みをすることで作っている。Google の評価方法が変わったので，実装を変更することにした。
このブログでは，変更履歴を表示するボタンと (nlog(n): ブログに変更履歴を残したい)，印刷用にサイドバーやコメント欄を非表示にするボタン (nlog(n): 印刷用ページを作るには) をつけている。
どちらも実装方法は同じで，スタイルシートを追加して読み込むことによって，表示の仕方を変えたり，表示と非表示を切り替えたりしている。更新履歴は，変更部分を ins タグと del タグで囲んでおいて，それを表示したり非表示にしたりしているだけである。ページ右上の「Show History」ボタンをクリックすると切り替えができる (動作確認用: ins で囲んだもの→「挿入」，del で囲んだもの→「削除」)。
これまでの実装では，記事の URL に情報を追加することで，ページのステータスを表現していた。例えば，標準の URL，変更履歴表示用 URL，印刷用 URL はそれぞれ次のようなものとなっていた。
これは上手く働いてくれていた。サイト訪問者のうち，どれだけの人がこの機能に気がつき，使ってくれていたかは不明である。ただひとつ確実に言えるのは，一番この機能を使っていたのは Googlebot だったということである。表示切り替えは，リンクボタンで実装されていたので，Googlebot はそのリンクをひとつづつ丁寧に踏んでくれていたのである。
記事数が1600なのに，インデックスされているページの総数が5000以上というのはどう考えてもおかしい (Google Webmaster Tools による情報)。
かつては，グーグルのロボットがリンクを踏んでも「そんなこともあるだろうね」くらいだったが，最近は状況が違ってきた。Google の表示順位がかなり下がってきてしまったのである。なぜかというと，恐らくではあるが「同じ内容のページが複数あるのはダメよ」という決まりで「コピーページが多いサイトの表示順位は下げますわ」となったからなのである (重複するコンテンツ - ウェブマスター ツール ヘルプ)。ガッツリ下がり始めたのは2012年8月からである (nlog(n): おかげさまで9周年)。それからは，もう転がり落ちるように…せっかくの10周年の報告が，あー(´・ω・｀)ｶﾞｯｶﾘ… なものになってしまった (nlog(n): おかげさまで10周年)。
さすがにこのままでは先行き真っ暗なので，1つのURLで表示の切り替えができるようにしたい。
そこで使ったのは，CssSwitcher である (スタイルシートを切り替えるJavaScript「CssSwitcher」 - シングスブログ)。当サイトは jQuery を使っていないので，この機能だけのために大きい jQuery を読み込む必要はない。そこで JavaScript 版を使わせてもらった。設定をクッキーに保存してくれるという優れもの。
この機能自体は，JavaScript による実装なので，本質的な部分は Movable Type でなくても構築できる。Wordpress でもいいし，ブログでなくてももちろん可能である。
機能としては，ボタンをクリックすると表示が切り替わり，同時にそのボタンも切り替わるという形にしたい。そこで，ボタンはあらかじめ全て読み込んでおいて，スタイルシートで一部を非表示にすることにした。
用意したスタイルシートは，合計で4つ。変更履歴の表示・非表示用，印刷用・通常表示用である。
これらはすべて，デフォルトのスタイルシート styles-site.css の一部で，ボタンの表示と非表示のスタイルが追加されている。
ちょっとややこしいので気をつけなければならないのは，例えば，変更履歴表示用のスタイルシート styles-show-history.css の内容は次の通りになっていて，
#show-history のように「#」がついているのは，タグに id="show-history" 属性がついている要素の表示方法を指定していることを意味している。上の設定では，id が show-history のタグを「display: none;」で非表示にして，逆に hide-history がついているタグを表示している。つまり，履歴表示しているページでは，「履歴表示」ボタンは不要なので消しておき，「履歴非表示」ボタンを表示しているということである。
切り替え用のスタイルシートで，デフォルト用のものを，標準のブログスタイルファイル styles-site.css の後で読み込むようにする。
<$MTBlogURL$> は Movable Type のサイト URL を出力するテンプレートタグ。必要に応じて読み替えを。
cssswitcher.js をダウンロードしてきて (スタイルシートを切り替えるjQuery Plugin「CssSwitcher」アップグレード - シングスブログ)，設置して初期設定。これを header 要素に追加する。
これで準備は完了。
表示切り替えボタンは次の4つ:
これらを次のようにリンクとして設置する。
ボタンアイコンを右寄せしたいので逆順になっているが，これはお好みで。
CssSwitcher.js の導入でページが整理された。後は Googlebot の様子見で。
2014年3月5日追記:
Google のインデックスから，なくなった URL を削除する指定を robots.txt に追加しました。
もしかすると，この記事の変更をするよりも，最初からこの robots.txt 設定をすればいいだけだったかも (泣)。
Master Archive Index
Total Entry Count: 1957
