net Archive

はてなスターの位置を固定表示にするユーザースタイルシートを書いてみました。

引用スターとかいうのをやっていて、引用箇所がページ下部とかで、スクロールする必要のあるとき、ふと思いついたというもの。選択箇所を確認しながらスターをというやつですな。必要あるのかどうか微妙ですけど。

以下のようなスタイルシートですが、Firefoxのユーザースタイルシートで個人的使用のものです。ページに埋め込まれますと、たぶん、何かの嫌がらせに。。

h3 .hatena-star-star-container {
    z-index: 9999;
   -moz-opacity:.7;
    padding-left:3px;
    border-right:1px solid #ddd;
    border-left:5px solid pink;
    position:fixed;
    top:100px;
    left:0;
    width:3em;
    max-height:15em;
    overflow:auto; }
h3 .hatena-star-star-container a {
    display:block; }
h3 .hatena-star-inner-count{
    margin:1em!important; }

追記部分等にあたる、id=moreに対し、ユーザースタイルシートで枠線で囲むスタイルを指定して各サイトを閲覧してきました。その結果からわかったことなどをまとめてみます。

前から追記部分に対してスタイルを指定する試みをしていて、「(総集編：2008)使っているStylishユーザスタイルまとめ」にて紹介していました。そのユーザースタイルシートを再掲しておきます。

#more,
#extended
         {
  background-image:none !important;
  border:1px dotted blue !important;
  padding: 3px !important;
}

ブログで記事の『追記』にあたる、idのmoreがどのような箇所で適用されているのか、というのを巡回していたページのなかからまとめておきます。

個人の巡回範囲なので、あまりアテにはならないとは思います。どこのサイトがどのように指定されているといった情報を閲覧のたびに記録していたというわけでもありません。

なお、「追記部分」という記述については、moreといったidが指定されたブロックを指すものとします。Movable Type 4では「続き」というタブのエリアに書かれた情報のことを言ってると思ってください。

more等が指定されているエリアのパターンについて

1. 書き出しがあり、追記部分はその記事の本文となっている
2. 追記部分は、あとから追加したテキストとなっている
3. 「追記」の文字を明記しておいてその段落にidを指定している
4. 追記は書かれていなくて、追記部分の要素は空となっている
5. 追記ではなく、文書の補足情報･ナヴィゲーションの箇所に指定している

1. はよく使われているパターンです。詳しい事情はわかりませんが、アーカイヴ一覧ページなどで、コンパクトに記事を束ねることができるというのが主な目的なようです（と思われます）。記事先頭部に記事をイメージした画像を使われているのもよく見かけます。

2. ですが、文書を書いてあとから追記したものを、moreの箇所に書かれているというケースです。

3. は1. と似ているのですが、続きの位置ここからである、ということが明示されているパターンです。hr要素にidを指定されているものもありました。

• <p id="more">続きの文章</p>

4. は、テンプレートタグの処理的な問題によるもの、といったところでしょうか。適用したユーザースタイルシートでの見え方としては、「青の点線に空白が囲まれているだけ」となります。

例えばMovable Typeですと、追記をあらわすのに、MTEntryMoreというタグがありますが、<mt:if tag="EntryMore"></mt:if>のように、内容の有無で出力の振り分けがなされずに出力されているものと思われます。MTではなく、ブログサーヴィス等でもこのようなページを確認しています。

5. はカテゴリのリンクや、ナヴィゲーションといった情報群のブロックをid=moreとして指定されているというものです。

はてなブックマークでエントリーページのURIが変更とのこと。既に張られていた旧URI からは全てリダイレクトされるようです。

URI変更については、はてなブックマーク日記の記事を参照します。

• エントリーページの URL 変更について - はてなブックマーク日記

「http://」がURIに含まれない形になるということと、rel="canonical"により正規化されたURIを指定、また既存のURIについては永続的にリダイレクトをおこなうようであります。

ということから、Movable Typeでの「↑B」ボタン設置のリンクについてはこれまでどおりで問題はなさそうです。

で、もしこの変更にあわせた形とするのですと、以下のような感じになるかと。テスト用の簡素なものですから運用レヴェルのものではないです。

<ul>
<mt:Entries lastn="5">
<li><MTEntryTitle>
<a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink regex_replace="/http:///",""$>" rel="nofollow">
<img src="←「↑B」画像までのパス→" width="16" height="12" alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" />
</a>
</li>
</mt:Entries>
</ul>

例のごとく（？）でregex_replaceによる置換です。スラッシュが続いてヘンテコな感じですが期待どおり（何？）な結果がでます。いちおう、nofollowつきで。

んー、あまりスッキリしないですね。リダイレクトしてくれるというのですから、こちらがわざわざ合わせる必要もないのですけれども。

追記：2013/02/24 http スキームを取り除くグローバルモディファイアをつくりました。

以下のようにつかいます

 <a href="http://b.hatena.ne.jp/entry/<$mt:EntryPermalink RemovehttpScheme="1"$>">

• markdiarycom / mt-plugin-RemovehttpScheme -- Bitbucket

このブログでプラグインによってページ分割されたページのパラメタが付いているページについて、NOINEXとしたその後の状況についてです。

先月エントリしました、「今月のいらんことしい(2009年6月)」にて触れていました、「カテゴリアーカイブでパラメタ（page=）の付くページはNOINDEXとしてみた」についてですが、その後の経過をみてみました。

確認の方法ですが、Google Analyticsにて、先月（自2009年6月1日,至2009年6月30日）の範囲で「閲覧開始ページ」の情報から、「page=」が含まれるページというフィルタをかけることで確認をおこなっています。

Analyticsのグラフでみたところでは、パラメタによってメタタグ挿入の振り分けを実施したあとから、「page=」の付いているページの数値が減少していることが、ぱっと見ただけで確認できました。

と、言葉だけで示してもピンとこないので、いちおう参考としてグラフを作ってみました。

先述したフィルタ済みの結果をエクスポートして、Excelにて取り込み、「日付」とパラメタ付きページの「閲覧開始数」のデータを基としたグラフです。

補足およびコメント

ExcelへはAnalyticsから、エクスポートの機能で「CSV形式（Excel）」を選び、出力されたファイルからデータはそのままでグラフ作成をおこないました。

考えついた当初は、パラメタのないページは検索結果にインデックスしておき、パラメタ付きのページをインデックスさせないことでタイトルが同じで内容の異なるものがインデックスされないようにするということを目的としていました。

重複するコンテンツの対処としては、rel="canonical"というのがあるのですが、アーカイブページについては目的が異なるような気がしましたために使わないでいます。

全体のアクセスからみていきますと、アーカイブページから（当サイトに）入るケースは減少傾向となりましたが、個別ページはアクセス数はそれなりにあるようでして、全体としては、極端な変化がみられないという感じでした。

microformatsのrel="tag"の記述について、nofollowも指定したいときの書き方とかのメモです。

先日、WolaWolaさまのページをブックマークしたときにつけたコメントの内容に関しまして（はてなブックマーク - Recent（最近の）言わんといて！ - WolaWola）、元記事に追記がありまして、コメントの内容について,自分で言っておきながらなんですが、妥当かどうか自信がないのでといいますか、突っ込みいれた責任上、メモとしてエントリしておきます。

指摘箇所ですが、タグのリンクについているrel属性のところでrel="nofollow,noindex,TAG"というのを、rel="nofollow tag"にせよ、とそういうことです。いいたかったことを二点にわけますと、一点目が「attributeの値に複数書くときの方法についてとmicrofomatsの件で」と、二点目が「noindexはどうなの？」となります。

rel属性の値に複数指定するとき

これは、以前調べた記憶があって、rel="nofollow"をrel="tag"につけたいときどうしたらいいのよ、ということで調べていたら海外のサイトだったかでスペース区切りにされていたようなので自分のところはそのように書いたと、そう記憶してます。

複数書く（＊Link types）場合の方法ですが、確か仕様書だったかにあるという発言をされていたかたをTwitterかWassr経由で知ったのですが、そのソースも忘れてしまったので、自分で検索してあたってみたのが以下のページになります。

• Links in HTML documents（Attribute definitions）

上記ページにThe value of this attribute is a space-separated list of link types.とありますので、Link Typeをスペースで区切ることになっているようです。

あと、microformatsのrel-tagについては以下を

• rel="tag" · Microformats Wiki

「TAG」という記述に関してですが、「microformatsに従うならば」、という文言をたぶんブックマークコメントにつけておけばよかったのかなと。この点は説明足らずで申し訳ないと思ってます。

Firefoxのアドオン、Operatorによりますれば、大文字でTAGと書いて仕舞うとタグ空間として抽出されないようです。自分のところで、Firebugを使ってtagとあるのをTAGに書き換えたところ、そのタグでは、Operatorで抽出できませんでした。ですが、Operatorはmicrofomatsの仕様ドラフトに忠実なために厳密な部分があります。そのため「microformatsに従う」という但し書がブクマコメントには必要であったということです。

noindexのことと、タグアーカイブページの検索エンジン対策について

nofollowは検索エンジン向けの記述でありますが（此の件はコチラが説明するよりは他のページの解説とかGoogleのウェブマスター向けのヘルプページとかをあたったほうが確実と思います。）、noindexはリンクを張っているページから記述されても（rel="noindex"）値を評価されないのでないかと思うのですがどうなのでしょう。

ページにリンクがあるとして、クローラーがそのリンクを辿る行動をするのがfollow。これをやらないで欲しいと伝えるのがnofollowですよね。これはメタ要素に書いていたことですけど、これを簡単に指示できるようにしましょう、としたのが（その経緯とかはここでは割愛）、rel="nofollow"。それで、noindexはインデックスされたくないページに書くと。そのあたりの件でブクマコメントには、noindexを記述しないでおいたのです。今思えば「自分ならばこのように書くかな」、程度なコメントなのかも。

タグアーカイブの検索エンジン対策

ここからは本題と逸れてしまいますが、タグアーカイブページをインデックスされないようにすることのお話です。

こちらで前から対策とかをやってはいるのですが、100パーセントは無理でないかなという感じがします。といいますのも、クローラーの中に行儀のよくないのがいるようなので......。

で、当方がおこなっているのは、robots.txtへの記述と、metaタグでのnoindexとかです。

Movable Type 4.2xのデフォルトのタグクラウドをみますと、javascript:void(0)でonclickイベントにてページ移動をさせています。こう書くことでrel=nofollowを書くまでも無く検索エンジンのクローラーはこのリンクが辿れないというわけです。

ただしこれだと先述のOperatorではInvalidです。rel-tagを採用していて、かつタグアーカイブページ（実態はタグ検索結果ページですが）microformatsに対応したURIにして使っていてこれでは本末転倒といったところ。

この辺の話になってくると、サイト運営者の方針でしょうから、外野があれこれいうこともないのですが、折角microformats取り入れているならば活用できる方法で記述されてはどうかなというのがワタくシの意見だと、つまるところはそういうことでした。

Twitterの背景画像をメイン領域で透かして見えるようにするためのユーザースタイルの例です。

自分はクライアントやモバイル版経由の投稿が主なのユーザースタイルとか適用してもあまり恩恵は得られないわけですが。。ま、なんというか自己満の世界とでもいいましょうか。

コードは以下です。透過は「-moz-opacity」(*１)で。リンクカラーとかを指定してある場合を考慮してないので透過の割合はヒトによって違ってくるかも。マウスオーバー時の背景色は継承させないやりかたがよくわからなくて、濃い目の色に上書きさせることで対処してます。

例によってFirefoxアドオン、Stylish向けのスタイルシートです。（確認環境は、Stylish1.0.1・Mozilla Firefox 3.0.10です）

twitter背景透過

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("twitter.com") {
#content{ -moz-opacity: .8; }
ol.statuses li:hover,
ol.statuses li.hover{
            background:#E3E3E3 none!important; }
}

Stylish向けのユーザースタイルシート。Analyticsでオンマウスの行をハイライトするというものです。

例によってFirefoxアドオン、Stylishで使用するスタイルシートを書いてみました。

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("https://www.google.com/analytics/reporting/") {

tbody[id^=f_tbody] tr:hover td {
font-weight:bold;
background-color:#D8E4F8 !important; }

}

tr要素にhoverというのは、前からあるテクニックらしくて、IEだとうまく動かないらしいですね。

あと、グラフのある場所がうまいこと表示できてなくて、それほど支障がないので保留状態です。

FIrefoxでスポイトやカラーピッカー機能を使えるColorZillaには、「WebPage DOM Color Analyzer」という機能があります。

ColorZillaの機能については、dncl / デンクラ様にてまとめられています。

• dncl : web用素材サイト デンクラ | スポイト機能だけじゃない"ColorZilla" : Firefoxアドオン（cocoa-project.com）

WebPage DOM Color Analyzerをトップページでためしてみました。メニューから、「WebPage DOM Color Analyzer」を選択します。

以下のようにページで使用されているカラーがひとまとめに表示されます。

ColorZilla（colorzilla.com）のPalette Viewerにパーマリンクを生成することができるそうです。（＃やってみたけど長いので......つhttp://tinyurl.com/cu4wp5）

アドオンは以下のページから。

• ColorZilla :: Firefox Add-ons

カテゴリアーカイブページのようにブログの記事が並んでいるページで、記事の先頭の1行目だけが表示になるようにこのブログ用のユーザースタイルシートを書きました。

前にどこかで書いたと思うのですが、このブログでは先頭一行がブログの概要となるようにしています。

アーカイブページやブログトップなどエントリが並んでいるページでは、記事本文（EntryBodyに該当）が表示されていますが、これを概要だけ表示にするために書いたスタイルシートが以下です。使う場面とかは、ちょっと微妙です。 アーカイブページで記事を流し読みしたいようなときとか(？)

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain(markdiary.com) {

body.double div.textBody :not(:first-child) {
display:none !important; }
}

気づいた点などは以下です

• 厳密には先頭の一行目というわけでないような。見た目がそんな感じなので「先頭一行目」という表現にしてます。
• 全てのページを確認したというわけでもないので、もしかしたら挙動の怪しいものがあるかもしれません。
• Firefox3.0.6 ＋ Stylish 0.5.9にて確認しています。
• VicunaテンプレートではtextBodyの部分は共通なので、ウチとこ以外でもできるかも。
• あと記事先頭行に常にテーマ画像のようなものを入れてるサイトだと画像しかでなくて面白くないかも。

CSS3関連で幾つか読み漁ってみました。（←最近はまってるらしい......）

• CSS 3のセレクタ解説：：root、：not、：empty、：target - builder by ZDNet Japan
• CSS セレクタに関するおさらい 3 | WWW WATCH
• CSSセレクタまとめ1 | CSS-EBLOG
• Selectors W3C Working Draft 15 December 2005
• 実践Web Standards Designのススメ：第6回　CSS3のセレクタを使用してみよう｜gihyo.jp ... 技術評論社
• CSS3 の否定疑似クラスの使いどころ - lucky bag

以下はおまけです。ブクマ登録ボタンを消しやすいようにbookmarkButtonというclassつけときました。

/* =========  Omake

div#main{
background: url(http://www.markdiary.com/csstemplate/img/markdiary.png) no-repeat scroll 0 10em !important;}
.reaction,
.bookmarkButton {
display:none !important;}

*/