Skip navigation.

Kyu3's My Opera Blog

「Opera pera♪」改め「Kyu3's My Opera Blog」に

Posts tagged with "タブ"

横に置いたタブ幅を狭くする方法

,

Opera10以前ではできなかったと思うのですが・・・Opera10ではタブバーを横に配置した時の幅を、広くする事ができます。:smile:

デフォルト状態↓(※スキンは「Opera standard」。以下全てのスクリーンショットも同じです。)
Operaタブバー横設置
Operaタブバー横設置 posted by (C)kyu3

もっとも広くした状態↓
Operaタブバー横設置:幅極大
Operaタブバー横設置:幅極大 posted by (C)kyu3

ただし普通にやったのでは、デフォルト状態よりも狭くする事はできません。しかしあるやり方で行うと、狭くできます。今回はそのやり方について、記事にしようと思います。

・・・と大げさに書きましたが、やり方は非常に簡単です♪:wizard:
タブバーの設定でタブサムネイルを"有効"にして、自身の好みの大きさ(サムネイルをオフにした状態)を想像しながら幅を調節します。調節できたら、またタブサムネイルを"無効"にするだけです。

デフォルト状態からタブサムネイルを有効にした時↓
Operaタブバー横設置:タブサムネイル
Operaタブバー横設置:タブサムネイル posted by (C)kyu3

デフォルト状態から狭くした状態↓
Operaタブバー横設置:タブサムネイル・幅小
Operaタブバー横設置:タブサムネイル・幅小 posted by (C)kyu3

1つ上のタブサムネイル有効状態からタブサムネイルを"無効"にした状態↓
Operaタブバー横設置:幅小
Operaタブバー横設置:幅小 posted by (C)kyu3

デフォルト状態↓
Operaタブバー横設置
Operaタブバー横設置 posted by (C)kyu3

わざわざタブサムネイルに切り替えてやるのは少し面倒臭いですが、「Opera9以前でタブバーを横に設置したいけど、タブバーの幅が広過ぎる」と思って止めていた方は、一度試してみてはいかがでしょう?:D

ちなみに「Opera Standard」スキンでは、最大で以下の状態まで幅を狭くする事ができます。

上記のやり方でもっともタブ幅を狭くした状態↓
Operaタブバー横設置:幅極小
Operaタブバー横設置:幅極小 posted by (C)kyu3


PS:
タブサムネイルのサムネイルの大きさを変更できるようにしたのは、開発者の方が意図的にした事ですが、タブサムネイルを無効にした状態に戻してタブ幅を狭めるやり方は、おそらく彼ら(開発者)が意図していない事だと思います。でもタブ幅を調節できるのは、とても良い事だと思います。
なので Opera社の方、是非ともタブサムネイル有効でない状態でも、タブ幅を狭くできるようにして欲しいなと思います。:cheers:

追記:
この方法でタブ幅を狭くする際、タブバーの両端にあるボタン設置領域にボタンを配置していると、狭くできない場合があります。その時はボタンを一度ツールバーから削除して、上記の方法でタブバーの幅を狭めた後、再度ボタンを設置してみて下さい。:smile:

スキンを「Midnight Bull」に変更

, ,

Google Chrome風のスキン「Cherry」がイマイチ使いにくかったので、また「c00」を使っていたのですが、また気分転換にスキンを変更する事にしました。今回変更したのは「Midnight Bull」と言うスキンです。

Operaスキン「Midnight Bull」:パネルあり
Operaスキン「Midnight Bull」:パネルあり posted by (C)kyu3

Operaスキン「Midnight Bull」
Operaスキン「Midnight Bull」 posted by (C)kyu3

他のスキンに比べて特に「何が良い」と言うところはないのですが、・・・
主に白と黒を基調にしたボタンアイコンがカッコよくて判別しやすいので、その点が良い点かなと思います。:wizard:

あとこのスキンに変更してから、何となくタブバーを左に設置して使っています。これだとタブの大きさが変わらずにかなりのページ(タブ)が開けますし、左に設置した分WEBページの縦の表示幅が広くなるので、その点も良いなと思っています。:cheers:

Operaスキン「Midnight Bull」:タブバー左
Operaスキン「Midnight Bull」:タブバー左 posted by (C)kyu3


Midnight Bull(Opera Skins)
http://my.opera.com/community/customize/skins/info/?id=8934

Operaタブサムネイル案:Mac OSX・Dock風

, ,

Opera10で追加された「タブサムネイル」機能。良い機能だと思うのですが、どうしても1つ難点が。:worried:
それはWEBページの表示領域が狭くなってしまう事です。

Opera10:タブサムネイル2
Opera10:タブサムネイル2 posted by (C)kyu3

そこで先日Twitterで「タブサムネイルしたタブバーが、Mac OSXのDockみたいに、必要な時に表示されるようになったら良いかも :sherlock: 」とつぶやいたのですが、・・・
そのイメージを、実際Photoshopで作ってみました。以下の画像がそれです。

Operaのタブサムネイル案:Dock化(上・クリア)
Operaのタブサムネイル案:Dock化(上・クリア) posted by (C)kyu3

Operaのタブサムネイル案:Dock化(横・クリア)
Operaのタブサムネイル案:Dock化(横・クリア) posted by (C)kyu3

具体的なアイデアとしては「タブサムネイルを表示する方向のウインドウの一番端の部分(例えば上に表示したいなら、ウインドウの一番上端)にマウスカーソルを持っていくか、あるいはパネルのように表示するためのボタンの役割をする"バー"を設置し、そこをクリックする事で表示される」と言うものです。
あとこうする事で、タブサムネイルでWEB表示領域が狭まらない以外に、もう1つメリットがあります。それはタブバーを表示させなくて済むので、その分WEB表示領域を広くできると言う事です。:wizard:

どうでしょう?Opera社の方、これを見てもし「良いな」と思ったら、搭載を検討して見て下さい。:cheers:

追記:
「タブサムネイルが表示されていない画像もあった方が、この案のイメージがつかみやすいのでは?」と思ったので、タブサムネイルが表示されていない状態のスクリーンショットを追加します。以下の画像がそれです。

Opera10スクリーンショット:アドレスバーのみ
Opera10スクリーンショット:アドレスバーのみ posted by (C)kyu3

Opera 10 betaレビュー - その2:タブバーを下に設置

,

先日ネットサーフィンをしていてフッと思ったのですが・・・
設定をタブサムネイルにして、タブバーを下に設置したら、Mac OSXの"ドッグ"みたいに見えるのではないかと。:wizard:

試しにやってみたのが、下の画像です。

Opera10:タブサムネイル(下) 2
Opera10:タブサムネイル(下) 2 posted by (C)kyu3

どうでしょう?:D

ドッグに似ているかどうかは別にして、・・・上に設置するより使いやすいのではないかと感じました。
と言うのも、Windowsの場合、各ページを切り替える"タブ"とウインドウを切り替える"タスクバー"との距離が近くなるので、「表示される情報を変更するのは"下"、その他の機能を実行するのは"上"」と言う風に機能的な棲み分けができるので、何となく操作しやすいのではないかと。

ちなみに上に置いた状態は、こんな感じです。

Opera10:タブサムネイル2
Opera10:タブサムネイル2 posted by (C)kyu3

・・・とは言え、ただやはり幅を取ってしまい、WEB表示領域が小さく見えてしまうのが少し難点です。:worried:

そこで少し幅を狭めてみました。すると結構良い感じ♪ :smile:

Opera10:タブサムネイル(下) 3
Opera10:タブサムネイル(下) 3 posted by (C)kyu3

これならそんなに表示領域が狭く感じませんし、サムネイルが一部だけですが表示されるので、タブの識別が容易になります。

あとタブバーの設定を「自動改行しない」にして沢山タブを表示すると、サムネイルが少しずつ小さく表示されるのですが・・・ちょうど以下のスクリーンショットくらいのタブの大きさが、結構良いなと思いました♪ :o:


Opera10:タブサムネイル(下) 4
Opera10:タブサムネイル(下) 4 posted by (C)kyu3

(あとデフォルトのスキンは普通のタブでも、少し幅が長過ぎるように思います。タブサムネイルも同様で、少し幅や高さ長過ぎるように思うので、変更した方が良いと思います。:wizard:

ちなみにタブサムネイルは、タブバーの設定を「自動改行」にしていると、設定(表示)できません。


それとタブバーを下に設置して気付いたのですが・・・
今回のデフォルト・スキン、タブバーを下に設置した状態でも、アクティブな(現在表示されている)タブの境目が綺麗に表示されます。これも結構良い感じ♪ :yes:

Opera10:タブバー下(部分拡大)
Opera10:タブバー下(部分拡大) posted by (C)kyu3

Opera10:タブバー(下)
Opera10:タブバー(下) posted by (C)kyu3

調べてみたら他のスキンでも、上記のようになるスキンがいくつかあるようです。
ただ横に設置した状態だと綺麗に表示されないので、できたら横に設置した時も横に合わせた表示状態で表示されると良います。:wizard:
例えば以前私が日本語フォーラムで提案した以下の画像のようなタブ表示ができたら、ネットブックなどディスプレイが小さいノートPCで、とても有用なのではないかと思うので。

ネットブック向けOpera案:スタートバー非表示
ネットブック向けOpera案:スタートバー非表示 posted by (C)kyu3


Opera 10 beta(Opera公式サイト)
http://www.opera.com/browser/next/

Opera 10 betaレビュー(Opera pera)
http://my.opera.com/kyu3/blog/2009/06/25/opera-10-beta

Opera 10 betaレビュー

, ,

Opera Uniteを試す為にOpera 10 betaをダウンロードしたのですが、ついでにOpera 10のレビューも書こうと思います。:smile:


1.表示速度について

最初に「これは良いぞ♪」と感じたのが、Opera 10のWEBページ表示速度でした。"9"より数段早くなった感じ。:yes:
特にすごいのが「Gmail」。最初に表示されるまでの時間や各メールボックスの切り替えが数段早くなっただけでなく、動作も"9"よりも安定している感じがしました。:love:

"9"の表示速度に特に不満がある訳ではないのですが、Gmailに関して言えば、表示されるまでに少し時間がかかり過ぎるような気がします。またメールボックスの切り替えも、少し不安定な感じがします。そのため現在は、「簡易HTML」の方で使用しています。
しかし"10"のこの速度や動作の安定性を体感すると、「これなら標準HTMLで使用しても良いなぁ」と思いました。:D


2.スピードダイヤルについて

今回スピードダイヤルには、2つの機能が追加されました。1つは「スピードダイヤルに登録できるウェブサイトの数を増やせる機能(最大25個)」、もう1つは「背景画像を追加できる機能」です。

まずは"登録できるウェブサイト数を増やせる機能"について。

これは結構多くの人に知られている事だと思いますが、"9"でも「speeddial.ini」ファイルをカスタマイズする事で、登録できるウェブサイトの数を簡単に増やす事ができます(※ただしOpera Linkで同期できるのは"9個"までです)。
しかしテキストエディタを使わねばならず、初心者の人には少し取っ付きにくい状況でした。

それがスピードダイヤルの右クリック・メニューから変更(増やす)事ができるようになったので、おそらく非常に多くの人が今後スピードダイヤルを増やして使う事でしょう。

増やせる数は、"2x2"の"4個"~最大で"5x5"の"25個"まで増やす事ができます。ちなみに以下のスクリーンショットのような"4x3"と言うような、立て横数が違う設定も用意されています。:wizard:

Opera10β:スピードダイヤル
Opera10β:スピードダイヤル posted by (C)kyu3

次に2つ目の"背景画像"ですが、これも登録数を増やすのと同じ方法(スピードダイヤルの右クリック・メニューで表示されるダイアログ)で、設定する事ができます。
ちなみに上記のスクリーンショットで用いているのは、以下のページで公開されていた、葛飾北斎の『富嶽三十六景』です。

File:The Great Wave off Kanagawa.jpg(Wikimedia Commons)
http://commons.wikimedia.org/wiki/File:The_Great_Wave_off_Kanagawa.jpg

この背景画像を変更できる機能は、確か以前日本語フォーラムで要望として書いていたので、それが実現されてとても良かったなと思います。:cheers:


3.タブサムネイル

似たような機能は、既にMac OSX用ブラウザ「OmniWeb」などに搭載されていますが、タブバーとアドレスバーの境目を下に下げて表示されるのは、たぶんOperaだけではないかと。このエフェクトは、結構良い感じ♪
(※ただしタブバーを横に設置した時は、機能しませんでした。ちょっと残念。)

Opera10:タブサムネイル2
Opera10:タブサムネイル2 posted by (C)kyu3

どのタブがどのサイトかを見分ける意味での視認性は、普通のタブよりはるかに高いので、その点では便利な機能ではあると思いますが・・・ただその分幅があるので、ノートPCなどの小さいディスプレイで使うのはあまりお薦めできませんが、非常に大きなディスプレイのPCや、Wiiなどを大画面テレビに繋いで使う時などには、逆に重宝するのではないかと思います。:wizard:


4.メニューバーの非表示機能

私は既にカスタム・ボタンを作って、メニューバーを非表示にしているのですが、それがファイルメニューの「Show Menu Bar」をクリックする事で、簡単に実行できるようになりました。:D
以下の画像は、メニューバーを非表示にした時のスクリーンショットです。

ちなみに非表示にした際に現れる左上のメニューボタン(下の画像)を押すと、全てのメニューがまとめられた形で表示されます。
(これも私がやっているのと同じです。:D

Opera10:メニューバー非表示
Opera10:メニューバー非表示 posted by (C)kyu3

Opera10:メニューバー非表示_2
Opera10:メニューバー非表示_2 posted by (C)kyu3

ちなみにメニューバーをもう1度表示するには、非常にした時と同じように、「Show Menu Bar」をクリックするだけです。


5.Opera Linkメニューの移動

あと細かい事ですが、・・・"9"では「ファイル」メニューにあったOpera Linkの"ON/OFF"を切り替えるメニューが、「ツール」メニューに移動されました。

Opera10β版:Opera Linkメニューの移動
Opera10β版:Opera Linkメニューの移動 posted by (C)kyu3

何となく"9"までの「ファイル」メニューでは違和感があったので、変更されてとても嬉しいなと思います。
(ちなみにこの事も、以前日本語フォーラムで提案しました:D


最後にOpera 10 beta全般に関して、少し書こうと思います。

今回のOpera 10は、自分が要望していた機能が沢山搭載されました。しかも表示スピードが早くなり、安定度も増したので、自分にとってはとても満足感の高いアップグレードだと思いました。
正規版が出るのが、とても楽しみです。:love:

ちなみに上記で紹介した以外にも、"10"では様々な機能(例えば「Opera Turbo」とか)が追加されています。おそらく正規版は近日出るのではないかと思いますが、もし今回のレビューを見て興味を持たれたのであれば、beta版を試してみてはいかがでしょう?
(※注:ただしbeta版は正規版と異なり、正常な動作が保障されていません。 )


Opera 10 beta(Opera公式サイト)
http://www.opera.com/browser/next/

"タブをクリックすると最小化"の設定を有効化

,

Opera Wikiの「opera-config設定項目一覧」(設定ファイルエディタに関するページ)の中から"タブ"に関する設定項目を見ていたら、その中に「タブをクリックすると最小化」(Click To Minimize)と言う項目がありました。

opera-config設定項目一覧(Opera Wiki)
http://opera-wiki.com/opera-config設定項目一覧

「最小化?」:confused:
・・・と、最初その意味も分からず、設定ファイルエディタの同項目にチェックを入れてタブをクリックしてみたら、ようやくその意味が分かりました。

この機能、ちょうどWindowsのウインドウに備わっている機能と同じです。ウインドウの場合右上にある「 _ 」ボタンをクリックすると、ウインドウ自体が消え、"タスクバーにしまわれる"(タスクバーにウインドウのタイトルだけが表示される)形になりますが、タブの場合、WEB表示内容が消え、タブだけがちょうどタスクバーに残るウインドウの痕跡のように残される形となります。

以下の画像は、1つのタブだけを表示させいた時にタブをクリックしてページ表示部分を最小化させたところを撮影した、スクリーンショットです。
なお表示されているページは、Opera公式サイトです。

シングルタブでページを最小化
シングルタブでページを最小化 posted by (C)kyu3

Opera公式サイト
http://jp.opera.com/

ちなみにこの機能、"ツール > 設定 > 詳細設定 > タブ > 追加のタブオプション"で、設定する事もできます。


この機能、正直何の為に搭載されたのかよく分からない(使う場面が想像できない)のですが・・・(^^;
私は"タブからタブへの移動機能"として使っています。これがなかなか良い感じ♪ :cheers:
と言うのも、タブを複数表示している時、離れたタブ間の表示の切り替えがとてもスムーズだからです。

例えば同時に4つのタブを表示させていたとします。左から順にそれぞれのタブのページ名を、「A」・「B」・「C」・「D」とします。以下のスクリーンショットで言うと、現在表示されているOpera公式サイトが「A」、その右隣りのタブが「B」。以下「C」・「D」と続きます。

Operaスキン「c00」(アイコンサイズ70%)
Operaスキン「c00」(アイコンサイズ70%) posted by (C)kyu3

"最初「A」(一番左端のタブのページ)を表示している状態で「D」(一番右端)を表示させ、また「A」に戻る"と言った手順を踏みたい場合、この設定を有効にしていないと、以下のようになります。

  1. 「D」のタブまでマウス・カーソルを移動
  2. 「D」のタブをクリック
  3. 「A」のタブまでマウス・カーソルを移動
  4. 「A」のタブをクリック
しかしこの設定(タブをクリックで最小化)を有効にしていると、以下のようにないます。

  1. 「D」のタブまでマウス・カーソルを移動
  2. 「D」のタブをクリック
  3. 「D」のタブを再度クリック
つまりこの設定を有効にしていると、1つ少ない手順で済みます。:wizard:

私はブログを書く際など、複数のページを同時に表示させて作業する事が多いです。そのためタブの切り替えを頻繁に行ないます。なので、ちょっとした事ですが、この機能は手間を減らす事になるので、重宝しています。

ボタンのアイコンサイズを70%に縮小

, ,

私はWindows Vistaと98でOperaを使っているのですが、Vistaの方はデイスプレイが横長で、解像度が"1280 x 800"。それに対し、98の方は"1024 x 768"で、少し画面が小さいです。Vistaを使うまでは特に98の方も解像度に不満はなかったのですが、最近は少し不満に感じるようになりました。:worried:
その事もあって、メインメニューを消したり等々、なるべく表示領域を広げようと試みてきたのですが、・・・

いつ頃からあるのか分からないのですが、先日たまたまスキンを変更していて気づいたのが、「外観の設定」のスキン変更画面の右下にある『アイコンサイズ』と言う部分。これを変更する事でツールバーやパネルのボタンの大きさを変更する事ができるのですが、・・・
それだけでなく、ボタンが小さくなった分、ツールバーの幅も狭くなります。つまりアイコンサイズを小さくする事で、Web表示部分を、わずかですが広くする事ができます。

そこで98の方のOperaのアイコンサイズを、"70%"に設定してみました。
以下はそのスクリーンショットです。

Operaアドレスバー部分表示
Operaアドレスバー部分表示(アイコンサイズ:100%) posted by (C)kyu3

Operaアドレスバー部分表示(アイコンサイズ70%)
Operaアドレスバー部分表示(アイコンサイズ:70%) posted by (C)kyu3

Operaスキン「c00」
Operaスキン「c00」(アイコンサイズ:100%) posted by (C)kyu3

Operaスキン「c00」(アイコンサイズ70%)
Operaスキン「c00」(アイコンサイズ:70%) posted by (C)kyu3

ちなみに、上2つの「アドレスバーの部分表示」のスクリーンショットは、"実寸"です。

まぁ「表示部分が広くなった」とは言え、おそらく数ピクセル程度。下2つのスクリーンショットは実際の大きさより縮小されているので、これで見ると本当によく見ないと分からないくらいですが、・・・(^^;
実際は、結構広くなった感じがしました。:D
「少しでも表示領域を広くしたい」と言う方は、やってみてはいかがでしょう?

PS:
Operaのスキンには、ボタンがかなり小さいものもあります。その中で「Netbook Vertical Tab Var」くらい小さいものの場合は、アイコンサイズを変更しても、ボタンの大きさは変わらないようです。いくつか試してみましたが、変わりませんでした。

Netbook Vertical Tab Var(Opera スキン)
http://my.opera.com/community/customize/skins/info/?id=8543

Operaのボタンの大きさに制限があるのか、それともスキンごとにボタンの大きさの下限が決められているのか、理由は分かりませんが・・・。:confused:

スキンを「Gamma」に変更

, ,

「Dance 'n' shout」と言うスキンをしばらく使っていました。かなり気に入っていたのですが、ちょっと「不満」・・・と言うか、気になることが。:worried:

  • タブやボタン類が大きく、WEBページ表示部分が少し小さくなる。
  • タブの横幅が広いので、すぐ2段目になってしまう。
  • タブとステータスバー、ボタン同士の境界が分かりづらい。
あと抽象的な表現なのですが、「Dance 'n' shout」は豆腐みたいに"柔らかい"感じ。タブ等が少し丸みを帯びている点やタブの大きさが変わったりする点、スキンの表示がちょっと崩れる(具体的にはボタンがデフォルトのものに置き換わってしまう)点などが、私には「柔らかい」と感じられます。

抽象的な例えで言うと、「Dance 'n' shout」が「豆腐」のような"柔らかい四角い塊"なら、今使っている「Gamma」は「プラスチック」のような印象。"硬くて直線的"。「Dance 'n' shout」に比べてタブやボタン類が小さく、タブの横幅が狭いので、WEBページの表示部分は、大きいです。
またタブとステータスバー、そしてステータスバーとメニュー部分の間に境界線があり、はっきりと機能が分かれているので、使いやすいです。


Opera9.5スクリーンショット
Opera9.5スクリーンショット posted by (C)kyu3

Opera9.5スクリーンショット
Opera9.5スクリーンショット posted by (C)kyu3


それとこのスキンで秀逸だと思うのが、タブの変化です。アクティブなタブとマウスオーバーしているタブの上が"青く"なる他、読み込みが完了してまだ表示していないタブは、上が"緑色"になります。
このようなタブの変化は「Dance 'n' shout」にもあるのですが、「Dance 'n' shout」が"タブの大きさの違い"でそれを表現しているのに対し、「Gamma」は"色の違い"で表現されているので、その点判別しやすいなと思います。

あとこのスキンで一番優れいてると感じるのは、タブの移動時の表現です。下記の画像がそのスクリーンショットなのですが、他のどのスキンもだいたいそうだと思うのですが、タブを特定のタブの間に移動させようとした際、そのタブの境界線に黒い直線が表示されるのが普通です。しかしこのスキンでは、タブの境界線の上に"黒い波線"が表示されます。


Opera9.5 タブ スクリーンショット
Opera9.5 タブ スクリーンショット posted by (C)kyu3


私はこの表現は素晴らしいなと思います。:yes:
と言うのも、また抽象的な表現ですが、普通のスキンのように境界線に"黒い線"が表示される場合、私にはタブの移動は、きっちりと本が詰まった本棚の本の間に、無理やりファイルを押しこんでいる印象。ちょっとしたことなのですが、非常に詰らないことをやっている感じです。:frown:
一方「Gamma」のようにタブの境界線の上に"黒い波線"が表示される場合、本棚にちょうど今入れようとしている本(タブ)と同じ幅の空きがあって、そこに本をスポッと入れる印象。またはファイルをドラック&ドロップでフォルダーに移動させているような、非常に楽で合理的な作業をしている印象。:D
何が言いたいかと言うと、「Gamma」のようにタブの境界線の上に"黒い波線"が表示される方が、合理的で分かりやすく、操作の心地良さもあると思います。なので今後はこのような表現を他のスキンでも取り入れられたら良いなと思います。

ただこのスキンも完璧とは言えず・・・。(^^;
ボタンのアイコンが少し個性的で、他と比べてそのアイコンが何を表現しているのか、分かりづらいところがあります。その点が改善されたら、本当に素晴らしいスキンになると思います。

Gamma(Opera Skins)
http://my.opera.com/community/customize/skins/info/?id=8295
December 2009
M T W T F S S
November 2009January 2010
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31