net Archive

ブログで記事を書くときなどに有効なFirefoxアドオン、Make Linkをつかってみることにしました。

アドオンのダウンロードは以下よりおこなうことができます。

• Make Link :: Firefox Add-ons

これまで使っていなかったのは、以前記事にしましたが（Custom Editor Buttonで記事作成の効率アップ）、MTの管理画面のボタンでほとんど事足りてしまう状態だったためです。

それで、ここ以外にもブログサービスでやっているんですけど、編集画面では細かくユーザの都合に合わせた機能が提供されていないというのが現実です。

というわけでブログ記事作成効率を図るべくMake Link導入に踏み切ったというわけなのです。

今更なお話ですので、使い方などは「参考リンク」にて参照ページとして示すにとどめておきます。

https:なページを見たときにロケーションバーのBackgroundが黄色になるというスタイルがありました。

以下からダウンロードおよびインストールできます。

• Yellow https location bar

当方、Firefox3を使ってるのですが、https://から始まるページのときロケーションバーに背景色がつかなくなってしまって直感的にわかりにくくなった感がありました。これは割りといいかも。

はてなハイクのモバイル版をFirefoxで見たときに少しだけ見やすくするスタイルを書いてみました。

はてなハイクモバイル版はパソコンのブラウザからでも見ることができるようです。モバイル版を読んだほうが軽かったりすることがあったり、お絵かき投稿とかをしないようならば、モバイル版からでも使えるのでないかと考えています。

• はてなハイクモバイル

書いたスタイルを以下に示します。

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

@-moz-document url-prefix("http://h.hatena.ne.jp/mobile/") {

body { width: 30em!important; }

#index, 
#keyword,
#following,
#album,
#user,
#id
 {
     margin-left: auto!important;
     margin-right: auto!important;
}

.body { width:100%!important; margin-bottom: 1.2em!important; }
.title { margin-bottom :1.2em!important; }
}

Firefoxのアドオン、Stylishで書いたものです。

widthを30emとして、中央寄せになるようにしてみました。Firefoxのサイドバーで読み込ませる場合は、センタリングしないほうが見やすいかもしれません。ついでに、タイトル部分（お題＝キーワード）とエントリの内容にマージンを指定して間をあけるようにしてみました。

なお、この記事執筆時点でのハイクのHTMLソースに基づいて書いてますので、その後の仕様変更等によって使えなくなることがあります。

はてなスターの引用機能についてです。引用したテキストを表示するときに、スター設置ページで背景画像など指定してある場合、そのスタイルが引き継がれているようです。

利用されているかたには説明するまでもないのですが、はてなスターの引用機能とは以下のようなものです。以下この機能のことをこのページでは「スター引用」という記述にて表現させていただきます。

• はてなスターに引用機能を追加しました - はてなスター日記

以前見たもので、どのようなページだったか忘れてしまいましたが、引用タグ（blockquote）に対して引用を明示するための背景画像をスタイルシートで指定されていた場合に、スター引用した部分がそのページでblockquoteに対して指定したスタイルを引き継いでいるようです。実際にどう見えるかは、確認できたページを忘れましたので、自分でサンプルを作成することにしました。以下のような表示になっています。

• サンプル(1)

テキトーに作ったものなので、お粗末なサンプルで申し訳ないですが、blockquote要素に対して、90x90ピクセルの背景画像を指定しています。この画像がスター引用したときに表示するレイヤーにも表示されていることが確認できるかと思います。スタイルの指定によっては、みづらいときもあるのでないでしょうか。

これを閲覧者側で見えなくするには、ブラウザがユーザースタイルシートを利用できるのならば、

blockquote { 
background-image : none !important;
 }

のような指定をすることで、スター引用の部分の画像は表示されなくなります。ただし、元記事の背景画像も消えてしまいます。

ページの製作者側で調整するという方法もあります。blockquoteに対してclassを指定しておけば、はてなスターのほうでは適用されなくなります。

• サンプル(2)

<style type="text/css">
blockquote.hoge {
background-image : url(hogehoge.gif);
background-repead : no-repeat;
}
</style>

<blockquote class="hoge">
<p>
・　・　・
</p>
</blockquote>

ただ思ったのですけれど、はてなスター側で要素を作っているわけですから、元ページのスタイルを引き継がなくてもいいのでないかなぁ、ということです。こちら側が調整してclassを付与するというのは何か手順が逆のような気がしています。

ブログ検索であるキーワードの結果のフィードを配信している場合があります。これについて、特定キーワードのなかから任意の語を除いた結果のフィードについてみていきます。

Googleのブログ検索では、検索結果をAtomフィードまたはRSSフィードにて配信しているようです。

さてここでは、Googleブログ検索を例としてみることにします。おことわりとして、以下は検索クエリ実行の具体例としてあげているものであり、検索の結果にあがっているサイトなどについてを言及する目的とは異なります。

例えばですが、「links」というキーワードをブログ検索を利用して検索し、その結果のフィードをリーダーに登録するということをやったとします。

• ブログ検索結果- links

links for XXXX というタイトルのページがいくつか結果に出ると思います。これは、del.icio.usのdaily blog postingといって、del.ici.usブックマークしたページをブログに自動投稿する機能によるものです。

人のブックマークしたリンクのページには興味が無く、単にlinksというキーワードの情報だけが欲しいときには以下のような検索語にすることでlinks forの記事が結果から除外されることとなります。

• links -"links for"

上の検索結果のAtomフィードは以下のようになっています

• links -"links for" - Google Blog Search

しかしながら、この方法は万能ではないようです。というのも、記事タイトルなどにlinks forを含んだdaily blog posting以外のブログ記事がブログ検索の結果にあがったときに取りこぼすことがあるからです。

（daily blog postingには年号が記載されているので、2008という語も追加して除外することで回避できることと思われます）

もちろん、除外処理をおこなわなければ、取りこぼしはないのですが、自分にとっては興味のない情報もフィードに入ってきます。どちらを取るかというのはキーワードによって見極める必要はありそうです。もっとも情報を受け流すだけで済むような話ではありますが。

余談：Googleブログサーチの結果のフィードをBloglinesにいれてるのですが、時々[ ! ]（エラー）がでることがあるようです。アクセス制限にでもかかってるのでしょうか？？ちなみにエラー番号は、53でした。

Firefoxにおいて、Safariでテキストを選択したときのスタイルのようにするためのユーザスタイルがありました。

事のいきさつ

たまにFirefoxでwebページを見たときに、文字選択して反転になったときのスタイルを変えているサイトに遭遇します。

このようなサイトは、スタイルシートで、::selection擬似要素が使われているようなのですけど。よくわからないのが、background-color: #fffなページで特定の背景色で指定されてあるよような例です。ワタくシとしては、::selection擬似要素を用いるのは、ページ背景が濃い目のデザインなので文字選択したときがブラウザのデフォルトカラーだとみにくいのを調整するものだとばかり思ってたのです。

そんなことから、「このサイトは、選択時はこの色にしてもらったほうがいいです」、というような特段な理由でもないのならば、特に指定することも無いのではないかなと思いました。

かといってそのサイトの文字選択の色が気にくわないという理由だけで、スタイルを無効にして閲覧するのもなんですので、ユーザスタイルで何とかしようということにしました。

VFox Selection (Safari Style)のインストール

自分で書く気がなかったので、userstyles.orgで探しましたら、「VFox Selection (Safari Style)」というものがありました。

名称のとおりに、Safariブラウザで文字選択したときのようなスタイルにするというものです。

Firefoxへのインストールには、FirefoxのアドオンのStylishもしくは、Greasemonkeyが必要となります。

ワタくシは、Stylishのほうでインストールしました。

選択するとこのような状態になります。

Stylishでのインストールですと、Install optionsのstylishのほうのボタンを押せばインストールが始まります。

なお、デフォルトのままですとすべてにおいて適用になります。ウェブページのみに適用したい場合は、編集画面から、@namespace url(http://www.w3.org/1999/xhtml);を先頭に追記します。

対決形式で２つのサイトをXHTML的にValidかどうか診断してくれて投票もできるサイト、XHTML Challengeについてです

百式経由で

• XHTML的にどちらのサイトが正しいかを判定してくれる『XHTML Challenge』

XHTML的にどちらが正しいか、勝負だ！という人のためのサイトをご紹介。
XHTML Challengeでは、二つのサイトのどちらがマークアップやらバリデーションやらでより正しいかを判定してくれる。

また、ホームページを作る人のネタ帳 にて、いくつかの対決がピックアップされてます。

• 『firefox vs IE』『MacOS X vs Windows Vista』などのxhtml対決という発想

対決云云というよりは、そのアイデアというか発想のほうを買いたいという感じのサイトではあります。
＃サムネイルを見ただけでVote出来ちゃいそうなシステムなのは結局何がしたいのかな？とは思いましたけど。

検索フォームがありましてそこから気になるサイトを探すこともできるようです。やってみたら、Wordpress vs. Movabletype.comというのを見つけました。

MT負けてますた。＞＜