FirefoxでOperaのようなlink要素を表示させる「Mozeraナビ=叢ナビ」

のりさん(朝顔日記)よりコメントを頂き、その結果「山岸さんのlink要素とCSSのみでナビゲーションを作るをユーザスタイルに入れればいいんじゃ?」みたいなことになったので、教えていただいたStylishというプラグインを用いてFirefoxのグローバルなスタイルを書いてみた。オレ的にこれはもう「©山岸和利」ブランドです。心の中で「叢ナビ」と呼ぶことにしました。ありがとうございます。以下はOpera風にlink要素を表示させる「叢ナビ」です。

link {
display:none;
}

head {
font-size:12px;
}

body {
padding-bottom:3em  !important;
}

link[rel="help"],
link[rel="up"],
link[rel="contents"],
link[rev="made"],
link[rel="start"],
link[rel="next"],
link[rel="prev"],
link[rel="help"],
link[rel="copyright"],
link[rel="glossary"],
link[rel="index"],
link[rel="search"],
link[rel="last"],
link[rel="first"]
 {
display:inline !important;
font-size:1em !important;
text-decoration:none !important;
color:#000 !important;
padding:5px !important;
border:solid 1px transparent !important;
border:solid 1px transparent !important;
}

link:hover {
border:outset 1px ThreeDFace !important;
}

link:active {
border:inset 1px ThreeDFace !important;

}

html:not(:empty) head {
	background-color:ThreeDFace !important;
	width:100% !important;
	position: fixed !important;
	bottom: 0 !important;
	left: 0 !important;
	display: block !important;
z-index:65535 !important;
padding:6px 10px !important;
border-top:outset 2px ButtonShadow !important;
border-bottom:outset 2px ButtonShadow !important;
line-height:1em !important;
white-space:nowrap;
outline:solid 1px ThreeDShadow;
text-align:left;
}

link[rel="author"]::after {
	content:"作成者";
}


link[rel="last"]::after {
	content:"最後";
}

link[rel="end"]::after {
	content:"最後";
}

link[rel="home"]::after {
	content:"ホーム";
}

link[rel="help"]::after {
	content:"ヘルプ";
}


link[rel="search"]::after {
	content:"検索";
}

link[rel="copyright"]::after {
	content:"著作権";
}

link[rel="index"]::after {
	content:"索引";
}

link[rel="glossary"]::after {
	content:"用語集";
}

link[rel="up"]::after {
	content:"親階層";
}


link[rel="help"]::after {
	content:"ヘルプ";

}


link[rel="contents"]::after {
	content:"目次";

}


link[rev="made"]::after {
	content:"@";

}

link[rel="start"]::after {
	content:"最初";

}

link[rel="next"]::after {
	content:"次へ";

}

link[rel="prev"]::after {
	content:"前へ";

}

おそらく無駄が多いです。簡略化できる部分がありますが、勝手にやっちゃって下さい。chapterやsectionはあえて入れてません。基本的にOperaとの擬似互換を想定してますので。それと、連絡先の@マークのみiCabを模倣しました。また、例えば、The Web KANZAKIでは最後の文書は「end」になってますが、Operaは「end」は無視して「last」を「最後の文書」と識別するくさいので両方を「最後」としてみました。真相は知りません。しかも調べません。というか明らかにパパッとでっちあげた部分が多々ありますので万が一使用した際に「なんじゃこりゃあ」という状況になったら適宜修正してください。上のものはOperaとは違い画面下にメニューっぽく表示されるようにしてます。その方があたりさわりが無いような気がしたので。ほんでlink要素がなかったら妙なバーが出るけど仕様です。ついでにactive時にrelativeの1px/1pxずらしをかましたんですが、マウスでクリックした際にジャンプしない不具合が出たのでこれはやめました。あと、単純にoutsetとinsetでマウスhover時のアニメーション(?)を再現してます。手抜きです。リアルさを求めるのであればキチっとsolidなborder-colorを調整してやってください。

てなわけで、これでlink要素のみのサイトもある程度は移動ビリティが向上すると思う。サイト内でナビゲーションをfixedしてたりする場合は重なったりして面倒なので例えばbody:hover時のみ表示さるとか、特定エリア:hoverで表示させるとか、オリジナルのようにサイドバー風にするとかやればいいと思います。

あと、最初はuserContent.cssを上書するだけでグローバルなブラウザデフォルトスタイルとして上記のスタイルが反映されるとオレは思っておったんですが、保存する場所が全然違っていたようです。しかしですよ、インストールした「Mozilla Firefox」フォルダの中の「defaults」フォルダの中の「profile」フォルダの中の「chrome」の中にある「userContent-example.css」を開いて読むと

このファイルを編集して、profile-directory/chrome/userContent.cssとしてコピーしてください。

と書いてあり、普通の人間なら「同じ階層にコピーしてuserContent-example.cssの“-example”を削除すればいいのかな」と思うと思いませんか。これものりさんに教わったことですがプロファイル - Mozilla Firefox まとめサイトに詳細が記載されているようです。でも、これ見てもよくわかりませんでした。%APPDATA%\Mozilla\Firefox\Profiles\(英数字の羅列).(プロファイル名)\と書いてありますが、そもそもXPなオレの環境では「Mozilla」フォルダなんて無くて、見本CSSに書いてあるディレクトリと全然違うので、何が何だかわからずに勧められたStylishを使いました。断然これです。んもう、クソ便利です。鬼ありがとうございましたーッ。

おまけ:記念撮影スクリーンショット

あと、こんだけlink要素叫びながらも自サイトでは対してlink要素を記述していないことが発覚。いやお恥ずかしい限り。


書いた人:l-_-l
このページのURL:http://ima.pandach.com/cgi-bin/mt/2006/09/firefoxoperalink.php

« 99 »