Home > 2007年10月

2007年10月

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  • Comments (Close): -
  • TrackBack (Close): -

Operaの左クリックでリンクをバックグラウンドのタブに開く方法 (3)

その他のリンク(a要素のtarget属性に"_blank"を付加しても新しいウィンドウに開けないリンク)

その他のリンク(リンクはYahoo!のページを開きます。)

a要素のソース

<a href="#" title="Yahoo!" onclick="javascipt:location.href='http://www.yahoo.com/'">

ここで述べた方法はa要素のtarget属性を利用するので限界があります。上の例のようなリンクではバックグラウンドのタブでは開けない。他にもいろいろあります。

そもそも、

target属性はHTML4 Transitionalで非推奨、HTML4 Strictや、XHTML 1.1では完全に抹消されました

target属性の利便性 (kuruman.org > 駄的HTML改善計画)

ということなのでいつまでこの方法が採れるかは分かりません。target属性の"_blank"を使うのではなく、window.openなどを使えばいいだろうけどそこまでの能力は私にはありません。

ヒント

CSS

実際にa要素のtarget属性に"_blank"が設定されているか分かるCSSファイルを適用しておくと良い。

私の使っている CSSファイル

@charset "utf-8";

a[target="_blank"]::after {
content :url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAALHRFWHRDcmVhdGlvbiBUaW1lAFdlZCAyNSBBdWcgMjAwNCAxMzoxMzo1MyAtMDYwMAxWF1cAAAAHdElNRQfUCBkSDxTa%2BhjhAAAACXBIWXMAAAsSAAALEgHS3X78AAAABGdBTUEAALGPC%2FxhBQAAAFxJREFUeNpjYKAQMGITnMnA8J8YzelA%2FUyUuoCFkA2EXEgdFzQ0NKD6uaGBAZs4kI%2FhIuqGAcwGmB9hfAwX0swF6AAe2tAwwZY%2BaOMC9PiHhQFdYoGoPEBVF1AMABE5HddSGZY7AAAAAElFTkSuQmCC");
}

CSSの適用方法

  1. 設定>詳細設定>コンテンツのサイト>スタイルオプション>表示設定>ユーザースタイルシートにチェックを入れておく。作成者モードでもユーザーモードでもいいが、自分が使用している方に。
  2. Operaのプロファイルフォルダの stylesフォルダの userフォルダに CSS ファイルを入れておく。
  3. 表示メニュー>スタイルからその CSSファイルを選ぶ。
マウスジェスチャー

それと、クリックでバックグラウンドのタブで開くように設定したサイトは当然現在のタブで開く手段が減るので、リンクを現在のタブで開くコマンドをマウスジェスチャーに登録しておくと良い。

私はマウス設定の[Application]に下記のように設定している。

GestureDown=Open link

終わりに

後から読み返すと、「リンクをバックグラウンドのタブで開く」と「新しいウィンドウで開く」が紛らわしくなってしまった。

最後にもう一度要点を簡単に書くと、

  1. リンクを新しいウィンドウで開くようにすること
  2. Operaの設定で「ポップアップをバックグラウンドで開く」にする

この2点です。

特に重要なのは、1.のリンクを新しいウィンドウで開くようにすることです。これさえできれば Operaの左クリックでリンクをバックグラウンドのタブで開けます。

最後の最後にEnterキーでも左クリックと同じようにリンクをバックグラウンドのタブで開けるようになります(なってしまう)。

参考にしたサイト

リンク

Operaの左クリックでリンクをバックグラウンドのタブで開く方法 (2)

a要素のtarget属性がない、またはtarget属性が"_blank"ではないリンクの場合

a要素のtarget属性がないリンク(リンクはFC2ブログのページを開きます。)

a要素のソース

<a href="http://blog.fc2.com/" title="FC2ブログ(blog)">

ここからが本番だ。こういうリンクのサイトが一番多い。大半のサイトではそれでいいし、リンクのサイトがいちいち新しいタブに開くのは私も煩わしいと思うが、検索サイトやソーシャルブックマークのサイトではバックグラウンドのタブで開いてほしいと思う。

この方法では User JavaScriptが必要です。

手順

  1. 始めはa要素のtarget属性が"_blank"の場合と同じ。右クリック>サイト設定の編集を選択する(あるいは、設定>詳細設定>コンテンツのサイト設定の編集を選択する)。サイト設定のダイアログ>一般設定のポップアップの設定を「ポップアップをバックグラウンドで開く」に設定する。
  2. サイト設定の編集>スクリプトの「JavaScriptを有効にする」にチェックする(または、設定>詳細設定>コンテンツの「JavaScriptを有効にする」をチェックする)
  3. サイト設定の編集>スクリプトの「ユーザーJavaScriptファイル」に User JavaScriptを保存するフォルダを指定する(あるいは、設定>詳細設定>コンテンツ>JavaScriptオプションの「ユーザーJavaScriptファイル」にUser JavaScriptを保存するフォルダを指定する)
  4. a要素のtarget属性を"_blank"にするUser JavaScriptをダウンロードしてきて、3.で設定したUser JavaScriptのフォルダに置く

a要素のtarget属性を"_blank"にするUser JavaScriptは探せばいろいろ出てくると思います。

ちなみに私はGreasemonkeyスクリプティング TIPS & SAMPLESAddsTargetblank.user.jsを使ってます。これはGreasemonkeyですが、Operaでも使用可能です。このスクリプトは開いているページとは別のドメインのサイトにだけ"_blank"をつける。利点は、検索サイトなどで次のページに移動したい時に別のタブが開かないですむ。(Fast Foward機能が使えるサイトならば気にしなくてもいいですが。)

注意することは、a要素のtarget属性が"_blank"の場合と同じく、target 属性を全て無効にするような User JavaScript が、リンクをバックグラウンドで開きたいサイトで実行されないように設定する。User JavaScript ファイルに「@exclude 除外するサイト」を書き加える。

リンク

Operaの左クリックでリンクをバックグラウンドのタブで開く方法 (1)

初めに

検索サイトやソーシャルブックマークのサイトなどでは、リンクをクリックしたときバックグラウンドのタブで開いてほしい。

Operaでリンクをバックグラウンドで開く方法はいろいろある。

  • センタークリック(マウスの中クリック)で開く
  • Ctrl+Shift+ 左クリック
  • Ctrl+Shift+Enterキー
  • 右クリックのメニューからバックグラウンドのタブで開く
  • そのほか、マウスジェスチャーやほかのキーにも設定できる

リンクをバックグラウンドで開く方法は十分すぎるほどある。一番楽なのはセンタークリックなのだが、検索サイトなどでセンタークリックを連発する場面になると不快になる。

そういうわけで左クリックでもリンクをバックグラウンドで開けないものだろうかと探した。

しかしなかなか見つからなかった。掲示板とかでそういう質問を見かけたことはあったが、誰も答えていなかった。こんなことは簡単すぎて答える気も起きないような質問なのか、それともこれぐらい自分でできなければOperaを使いこなせないということだろうか。

途中であきらめかけたこともあったが何とかできるようになったので、ここでマウスの左クリックでリンクをバックグラウンドのタブで開く方法を紹介したいと思う。

リンクの種類によって3つに分かれる

a要素のtarget属性が"_blank"のリンクの場合

a要素のtarget属性が"_blank"のリンク(リンクはFC2ブログのページを開きます。)

a要素のソース

 <a href="http://blog.fc2.com/" title="FC2ブログ(blog)" target="blank">

これが一番簡単だ。Operaの設定だけで(外部のファイルなしで)バックグラウンドのタブに開くことができる。

しかし、残念ながらこういうリンクのサイトは少ない。私がよく利用していて、a要素のtarget属性が"_blank"なのはlivedoor クリップぐらいだ。

手順

右クリック>サイト設定の編集を選択する。サイト設定のダイアログ>一般設定のポップアップの設定を「ポップアップをバックグラウンドで開く」に設定して終わり。

そうすることによってリンクをクリックして開いた新しいタブがアクティブから、バックグラウンドに変わる。

それから、ポップアップの設定は設定>詳細設定>コンテンツのサイト設定の編集からでも行える。しかし、設定>一般設定からポップアップの設定を行えばすべてのサイトで適用されて楽なようだが、危ないサイトに行ったときに痛い目に合うかもしれないので、セキュリティを考えたらお薦めできない。

注意することは、target 属性を全て無効にするような User JavaScript を使っている人は、特定のサイトで実行されないよう下記のように設定してくれ。@excludeの後に除外するサイト、つまりバックグラウンドのタブで開きたいサイトを書く。

// ==UserScript==
// @include *
// @exclude http://clip.livedoor.com/*
// ==/UserScript==

有名どころのサイトの状況

Continue reading

User JavaScriptの練習 - XPathの一歩の続き

Karafuto Blog User JavaScriptの練習 - XPathの一歩の続きです。

Opera User JavaScriptの練習です。

サイトにアクセスキーがあったらその要素の前にアクセスキーを示す要素を挿入する

アクセスキーのラベルのような感じで表示する。

// ==UserScript==
// @include *
// @exclude 
// ==/UserScript==

document.addEventListener('load', function() {
    var list = document.evaluate(
    '//*[@accesskey]',
    document,
    null,
    XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
    null);

    for (var i = 0; i < list.snapshotLength; i++) {
        var elm = list.snapshotItem(i);
        var span= document.createElement('span');
        span.style.cssText = 'padding: 0 2px;' + 'margin: 0;' + 'background-color: yellow;' +
            'color: black;' + 'font: 12px sans-serif;' + 'border: 1px solid gray;';

        // アクセスキー属性の値を取り出す
        var key = elm.getAttribute( 'accesskey');
        // アクセスキーの値のテキストノードを作成
        var txt = document.createTextNode( key);
        span.appendChild(txt);
        elm.parentNode.insertBefore( span, elm )
    }
}, false);

XPathで accesskey属性を持つすべての要素を見つける。

結果の型に UNORDERED_NODE_SNAPSHOT_TYPEを指定すると、snapshotItem(itemNumber) メソッドによって XPath式にマッチした要素にアクセスできる。

cssTextでスタイルを span要素にまとめて設定。

getAttributeNode()でaccesskey属性の値をとる。

アクセスキーのラベルを表示するスクリプトの例

sharpgreenテンプレートの画像をリサイクル

  • 2007-10-28 (Sun)
  • blog

FC2ブログ公式テンプレートの sharpgreenの一番下で使用されているナビ用の gradation.jpgを h4要素に再利用してみた

.content h4 {
  font-size : 110%;
  margin : 2em 0 0.5em ;
  padding : 0.2em 1em ;
  background:transparent url(http://blog117.fc2.com/template/sharpgreen/image/gradation.jpg) repeat-x scroll left bottom;
  border:1px solid #EFEFEF;
}

h5要素のスタイルもついでに少し変えた

.content h5 {
  font-size : 100%;
  margin : 1.5em 0 0.5em ;
  padding : 0 0 0 0.2em ;
  border-bottom : 2px solid #EFEFEF;
}

Home > 2007年10月

おまかせリンク(R)
全記事表示リンク
Search
Meta
Feeds

Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。