マイボタン

メニュー関連のボタンを左上に移動

先日メインメニューブックマークメニューをボタン化し、アドレスバーに設置したのですが、長年の癖で、どうもそれらのボタンを押す際、元々メニューがあった位置にマウスを動かそうとしてしまったり、マウスを動かさないまでも目線がそちらに向いてしまったりと、どうもこの位置に馴染めず・・・(^^;

そのため、メインメニューのボタンをウインドウ左上端に、ブックマークメニューのボタンを、元々ブックマークメニューがあった場所であるその右横に設定したら、以前とほぼ変わらない使い勝手を実現できました。

ちなみに以下のスクリーンショットの大きい方は、設置場所移動後のそれぞれのボタンの動作時を撮影したものです。小さい方は、それ以前の場所で動作させている時の画像です
なお移動させるにあたって、メインメニューの方は、Operaの「O」の字をモチーフにしたロゴ(「Opera_logo」)に、ブックマークメニューの方は、文字列でそのまま「ブックマーク」と表示するように変更しました。

Operaオリジナルボタン:メニュー・ポップアップ
Operaオリジナルボタン:メニュー・ポップアップ posted by (C)kyu3

Operaオリジナルボタン:メニュー・プルダウン
Operaオリジナルボタン:メニュー・プルダウン posted by (C)kyu3

Operaオリジナルボタン:ブックマークメニュー・ポップアップ
Operaオリジナルボタン:ブックマークメニュー・ポップアップ posted by (C)kyu3

Operaオリジナルボタン:ブックマークメニュー・プルダウン
Operaオリジナルボタン:ブックマークメニュー・プルダウン posted by (C)kyu3

それとこのように設置してみて、思わぬ効果がありました。
見て分かる通り、私はステータスバーをウインドウの最上部に設定しています。ステータスバーにはOperaリンクの同期の状態や、マウスオーバーしたリンクのアドレスなどが表示されますが、左上にメニュー関連のボタンを移動させるまでは、それらが一番左上端に表示されていました。それがどうも私には、何となく「見にくいなぁ・・・」と感じていました。
どうして見にくいのか、何に違和感を感じているのか分からなかったのですが、どうやらそれは私にとって左上端に表示されている事が見づらかったようで・・・。それがメニュー関連のボタンを左上端に移動させた事で、少し右側に移動したので、解消されました。

以下のスクリーンショットの大きい方は、ステータスバーにマウスオーバーしたリンクを表示させた時を撮影したものです。小さい方は、ボタン移動前の時のステータスバーにリンクが表示された時の画像です。

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

Operaオリジナルボタン:ブックマークメニュー・プルダウン
Operaオリジナルボタン:ブックマークメニュー・プルダウン posted by (C)kyu3

ブックマークメニューを表示するオリジナルボタンを作成

ウインドウ内の表示領域を広くする為に、メインメニューの表示・非表示が選択でき、かつメインメニューをプルダウンで表示・選択できるオリジナルボタンを作成し、しばらくメインメニューを表示しない状態で、Operaで作業していました。しかしどうも、普段頻繁に利用するブックマークメニューを表示する際、1回余分にクリックせねばならない事が、少し煩わしく感じられました。
その時フッと、Opera Wikiに個々のメニューだけをプルダウンで表示するボタンが公開されていたのを思い出しました。

ドラッグアンドドロップで追加できるカスタムボタン集(Opera Wiki)
http://operawiki.info/CustomButtonsJA

そこでそれを利用して、普通にクリックした際はブックマークメニューをプルダウンで表示し、長押しクリックをした場合にはブックマークウインドウを表示するオリジナルボタンを、作成しました。

以下の画像は、上記のオリジナルボタン動作時を撮影したスクリーンショットです。

Operaオリジナルボタン:ブックマークメニュー・プルダウン
Operaオリジナルボタン:ブックマークメニュー・プルダウン posted by (C)kyu3

Opera9.6 ブックマークウインドウ スクリーンショット
Opera9.6 ブックマークウインドウ スクリーンショット posted by (C)kyu3

これでブックマークメニューにこれまで通りアクセスできるようになったので、上記の不満は解消されました。

クリックして追加↓
ブックマーク

アクションコマンド↓
Show hidden popup menu,"Browser bookmarks menu"

なお、オリジナルボタンの作成方法やアイコンの追加方法は、以下のページにまとめてあります。

Operaデスクトップ版のオリジナルボタンの作り方 : Kyu3's BLOG
http://kyu3.blog.jp/2008-06-22_7426241.html

メインメニューを表示するオリジナルボタンを作成

昨日『Opera Browser Wiki(略して『Opera Wiki』)』と言うOperaのカスタマイズ情報が豊富なサイトの、"カスタマイズボタン"のページを見ていたら、メインメニュー(ウインドウ最上部の『ファイル』・『編集』などの部分)を非表示に出来るボタンと、メインメニューをプルダウン形式で表示できるボタンが、公開されていました。

ドラッグアンドドロップで追加できるカスタムボタン集(Opera Wiki)
http://operawiki.info/CustomButtonsJA

現在利用しているWin 98の低スペック環境は、決して表示領域が狭い訳ではない(使っているディスプレイは、"1024 x 768"です)のですが、いつも「もう少し広くなったらなぁ・・・」と思っていました。
そこで上記の2つのボタンを参考に、クリックするとメインメニューをプルダウンで選択でき、かつ長押しクリックでメインメニューの表示・非表示を切り替えられるボタンを、作成しました。

以下は、その動作時を撮影したスクリーンショットです。
(今回はあえてアイコンを使わず、「メニュー」と言うボタン名をそのまま表示する方式にしました。)

Operaオリジナルボタン:メニュー・プルダウン
Operaオリジナルボタン:メニュー・プルダウン posted by (C)kyu3

Operaオリジナルボタン:メニュー表示・非表示
Operaオリジナルボタン:メニュー表示・非表示 posted by (C)kyu3

これでウインドウ内の表示領域が縦に広がり、前より快適にネットサーフィンが出来るようになりました。
最近ネットブックなど、小さなディスプレイのノートPCを買われる方が増えていますが、そう言う人にお薦めのボタンです。

クリックして追加↓
メニュー

アクションコマンド↓
Show popup menu, "Browser Menu Bar", , ,  + Enable menu bar | Disable menu bar

なお、オリジナルボタンの作成方法やアイコンの追加方法は、以下のページにまとめてあります。

Operaデスクトップ版のオリジナルボタンの作り方 : Kyu3's BLOG
http://kyu3.blog.jp/2008-06-22_7426241.html

Operaデスクトップ版のオリジナルボタンの作り方

Operaアドレスバー部分表示
Operaアドレスバー部分表示 posted by (C)kyu3

My Operaの日本語フォーラムで色々と教えてもらって作った、Operaデスクトップの"オリジナルボタン"(正式名称は「マイボタン」)の情報と、その作成方法について、公開することにしました。もし気に入ったら、使ってみて下さい♪
(※以下で紹介しているボタンは、Windows 98 および Windows Vista の Opera9.5 で動作確認をしています。)

目次:
  1. 作成方法と手順
  2. オリジナルボタン
  3. 編集後記


Ⅰ. 作成方法と手順:

まずオリジナルボタンの作成方法ですが、私はいつも「Button Maker」と言うサイトを使っています。

Button Maker
http://opera.higeorange.com/customize/button_maker.html

ButtonMakerの解説画像↓
(※下の画像をクリックすると、拡大表示されます。)
ButtonMakerスクリーンショット
ButtonMakerスクリーンショット posted by (C)kyu3

なので、こちらのサイトを使ったやり方について、説明します。

  1. 「アクション」のところに、"アクションコマンド"をペーストします。
  2. 「ボタンに表示される文字」のところに、適当な文字列を入力します。
  3. 「ボタンに表示される文字」の下の「ボタンを作る」ボタンを押します。
  4. 「ボタンに表示される文字」で入力した文字列を使ったボタンが表示されるので、それをクリックします。
  5. 「次の機能のボタンを新しく追加します・・・(中略)・・・続行しますか?」と言う"確認ウインドウ"が表示されるので、「OK」を選択します。

これで、「外観の設定」の「ボタン」>「マイボタン」のところに、オリジナルアイコンが追加されます。あとはアドレスバーやパーソナルバーに追加して、使用してください。なお、2つほど注意点を。

まず「2」で入力する文字列についてですが、これはOperaの「外観の設定」の「ボタン」>「マイボタン」にオリジナルボタンが追加された際、ボタンの名称として表示されます。
またアドレスバーやパーソナルバーに追加した際、ボタンにマウスを重ねると表示される文字列ともなります。

次に上記の方法でオリジナルボタンを作成した場合、ボタンは"アイコン"ではなく、「2」で入力した"文字列"で表示されます。その為、見た目的にも良くなく、また長い文字列を入力した場合、バーのかなりの空間を占めてしまいます。そこで"文字列"ではなく、他のボタンと同様に"アイコン"で表示させるためには、以下の方法を利用してください。

  1. それぞれが利用しているOperaの外観(スキン)に予め用意されている、ボタンの画像を調べます。
  2. 使用したい画像が見つかったら、画像の名称をコピーします。
  3. 1」で入力する"アクションコマンド"の1番最後のところに、「,,,,"○○○"」(○のところに画像の名称)を追加します。
(例.アクションコマンドが「Copy document address」で画像の名称が「Newsfeed Unread」の場合、「Copy document address,,,,"Newsfeed Unread"」)


あとは上記の作成方法のところで示した通り、順に進めて下さい。そうすると、"アイコン"を使ったオリジナルボタンが作成できます。

なお、「a」の『それぞれが利用しているOperaの外観(スキン)に予め用意されている、ボタンの画像』の名称を調べる方法についてですが、下記の「S&R:your skin's images」のページを表示させると、用意されている画像の一覧が表示されます。

S&R:your skin's images
http://home.wanadoo.nl/sipke.reina/opera/images.html

「S&R:your skin's images」の解説画像↓
(※下の画像をクリックすると、拡大表示されます。)
S&R:your skin's imagesスクリーンショット
S&R:your skin's imagesスクリーンショット posted by (C)kyu3


II. オリジナルボタン:

<動作内容>
現在表示(アクティブ)されているページのURLとタイトルを取得して、JavaScriptで以下のように整形し、クリップボードにコピーする。
<a href="URL">タイトル</a>
<動作例>
Opera公式サイトの日本語トップページの場合
<a href="http://jp.opera.com/">Opera ブラウザ: すべてのデバイスに最良のブラウザを</a>
<アクションコマンド>
Go to page, "javascript:window.prompt('','<a href=\x22'+location.href+'\x22>'+document.title+'</a>');" & Delay, 200 & Copy & Cancel & Delay, 200 & Back
<注意点>
・Opera9.5以前の場合は、上記の文字列を整形し、表示するところまでしかできません。その為自らコピーし、プロンプト(文字列を表示するウインドウ)を閉じる動作をしなければなりません。


<動作内容>
現在表示(アクティブ)されているページのURLとタイトルを取得して、JavaScriptで以下のように整形し、クリップボードにコピーする。
タイトル<改行>
URL
<動作例>
Opera公式サイトの日本語トップページの場合
Opera ブラウザ: すべてのデバイスに最良のブラウザを
h ttp://jp.opera.com/
<アクションコマンド>
Go to page, "javascript:window.prompt('',document.title+'\n'+location.href);" & Delay, 200 & Copy & Cancel & Delay, 200 & Back
<注意点>
・Opera9.5以前の場合は、上記の文字列を整形し、表示するところまでしかできません。その為自らコピーし、プロンプト(文字列を表示するウインドウ)を閉じる動作をしなければなりません。


<動作内容>
現在表示(アクティブ)されているページのURLを取得して、JavaScriptで以下のように整形し、クリップボードにコピーする。
<a href="URL"></a>
<動作例>
Opera公式サイトの日本語トップページの場合
<a href="http://jp.opera.com/"></a>
<アクションコマンド>
Go to page, "javascript:window.prompt('','<a href=\x22'+location.href+'\x22>'+'</a>');" & Delay, 200 & Copy & Cancel & Delay, 200 & Back
<注意点>
・Opera9.5以前の場合は、上記の文字列を整形し、表示するところまでしかできません。その為自らコピーし、プロンプト(文字列を表示するウインドウ)を閉じる動作をしなければなりません。


<動作内容>
現在表示(アクティブ)されているページのURLを、クリッピボードにコピーする。
<動作例>
Opera公式サイトの日本語トップページの場合
http://jp.opera.com/
<リンクをクリックして追加>
URLコピー
<アクションコマンド>
Copy document address



<動作内容>
ディスクキャッシュを削除する。
<リンクをクリックして追加>
クリアキャッシュ
<アクションコマンド>
Clear disk cache



<動作内容>
選択範囲のテキストと、選択範囲を含むページのURLおよびタイトルを引用タグ(blockquote)で閉じた状態の文字列を、JavaScriptで以下のように整形し、クリップボードにコピーする。
<blockquote>選択範囲のテキスト<改行>
<改行>
<a href="URL">タイトル</a></blockquote>
<動作例>
このブログの記事の最初の部分を選択した場合(※このブログ記事は、過去に「My Opera」に書いていた記事を移行したものです。そのため以下の URL は、My Operaの URL になっています。)
<blockquote>こんにちは。  My Operaの日本語フォーラムで色々と教えてもらって作った、Operaデスクトップの"オリジナルボタン"の情報とその作成方法について、公開することにしました。  もし気に入ったら、使ってみて下さい♪(※以下で紹介しているオリジナルボタンは、Windows98およびVistaのOpera9.5で動作確認をしています。)

<a href="http://my.opera.com/kyu3/blog/2008/06/22/opera-2">Operaデスクトップ版のオリジナルボタン - Opera pera♪ - by kyu3</a></blockquote>
<アクションコマンド>
Go to page, "javascript:window.prompt('','<blockquote>'+window.getSelection()+'\n\n'+ '<a href=\x22'+location.href+'\x22>'+document.title+'</a>'+'</blockquote>');" & Delay, 10 & Copy & Cancel
<注意点>
・選択されるのはあくまで"テキストのみ"なので、テキスト内に含まれる「改行」や「リンク」、「画像」等は、クリップボードにコピーされません。
・Opera9.5以前の場合は、上記の文字列を整形し、表示するところまでしかできません。その為自らコピーし、プロンプト(文字列を表示するウインドウ)を閉じる動作をしなければなりません。


<動作内容>
クリックするとウインドウメニューの「左右に並べて表示」を、長押しクリックすると「全て最大化」を実行する。
<リンクをクリックして追加>
並べて表示
<アクションコマンド>
Tile vertically + Maximize all
<注意点>
・このアクションコマンドにアイコンを追加する場合は、「Tile vertically」の直後にアイコン名を追加して下さい。
例:アイコン「Tile vertically」を追加する場合
Tile vertically,,,,"Tile Vertically" + Maximize all



<動作内容>
クリックすると「画像非表示」、長押しクリックすると「画像再表示」を実行する。
<リンクをクリックして追加>
画像表示・非表示
<アクションコマンド>
Disable display images + Enable display images
<注意点>
・このアクションコマンドにアイコンを追加する場合は、「Disable display images」の直後にアイコン名を追加して下さい。
例:アイコン「Attachment Images」を追加する場合
Disable display images,,,,"Attachment Images" + Enable display images



<動作内容>
クリックするとメインメニュー(ファイル・編集・表示・・・)の項目をポップアップメニューで表示します。そして長押しクリックするとメインメニューが表示されている場合は非表示に、非表示の場合は表示します。
<リンクをクリックして追加>
メニュー
<アクションコマンド>
Show popup menu, "Browser Menu Bar", , ,  + Enable menu bar | Disable menu bar
<注意点>
・このアクションコマンドにアイコンを追加する場合は、「Show popup menu, "Browser Menu Bar"」の直後にアイコン名を追加して下さい。
例:アイコン「Opera Logo」を追加する場合
Show popup menu, "Browser Menu Bar", , , "Opera Logo" + Enable menu bar | Disable menu bar
<動作内容>
クリックすると、メインメニューのブックマークの項目をプルダウン形式で表示します。そして長押しクリックすると、ブックマークウインドウを表示します。
<リンクをクリックして追加>
ブックマーク
<アクションコマンド>
Show hidden popup menu,"Browser bookmarks menu" + Manage,"Bookmarks"
<注意点>
・このアクションコマンドにアイコンを追加する場合は、「Show hidden popup menu,"Browser bookmarks menu"」の直後にアイコン名を追加して下さい。
例:アイコン「Panel Bookmarks」を追加する場合
Show hidden popup menu,"Browser bookmarks menu",,,"Panel Bookmarks" + Manage,"Bookmarks"



<動作内容>
クリックすると、メインメニューのブックマークの項目をプルダウン形式で表示します。
<リンクをクリックして追加>
ブックマーク<アクションコマンド>
Show hidden popup menu,"Browser bookmarks menu"




III. 編集後記:

最後になりましたが、こちらの内容を読んで「自分もオリジナルボタンを作ってみたい!」と思う人も、いるかと思います。その際役立つサイトを、以下に紹介しておきます。

Opera All Action in Japanese(Opera-PukiwikiPlus!)・・・Operaの"アクションコマンド"の一覧とそれぞれの動作について、日本語で解説されているページ。
http://www.opera-wiki.com/index.php?Opera%20All%20Action%20in%20Japanese


追記:
上記のリンクとページタイトルを使ったボタンの作り方を教えてくれたedvakfさんのブログにも、他にボタンのソースとなる"アクティブコマンド"が公開されています。もし良かったら、そちらも見てみて下さい。

JavaScript+内部アクションでopera_exのようなことができないものか - by edvakf in hatena
http://d.hatena.ne.jp/edvakf/20071225/1198560414


追記:
新たに「引用」に関するアクションコマンドを追加しました。


追記:
上記のButtonMaker作者さんのサイト「Opera IRC+」には、たくさんのオリジナルボタンが公開されています。各ボタンはクリックすると、追加する事ができます。
また追加時に表示されるウインドウには、そのボタンのアクションコマンドが表示されます。それも参考になると思うので、興味のある方は、一度見てみて下さい。

Special Buttons(Opera IRC+)
http://opera.higeorange.com/customize/button.html


追記:
新たにURLをリンクタグで閉じるアクションコマンドを追加しました。


追記:
新たにウインドウを並べて表示するアクションコマンドと、画像の表示・非表示を切り替えるアクションコマンドを追加しました。


追記:
新たにメインメニューをプルダウン形式で表示したり、メインメニューの表示・非表示を切り替えるアクションコマンドを追加しました。
(このアクションコマンドで作成したボタンに関する記事は、こちら。)


追記:
新たにメインメニューのブックマークをプルダウン形式で表示したり、ブックマークウインドウを表示するアクションコマンドを追加しました。
(このアクションコマンドで作成したボタンに関する記事は、こちら。)


追記:
Operaのカスタマイズ情報が豊富なサイト「Opera Browser Wiki(略して「Opera Wiki」)」にも、たくさんのオリジナルボタンが公開されています。各ボタンはクリックすると、追加する事ができます。
また追加時に表示されるウインドウには、そのボタンのアクションコマンドが表示されます。それも参考になると思うので、興味のある方は、一度見てみて下さい。

ドラッグアンドドロップで追加できるカスタムボタン集(Opera Browser Wiki)
http://operawiki.info/CustomButtonsJA


追記:
JavaScriptを用いないもののみ、クリックでボタンが追加できるリンクを追加しました。


追記(2013/11/27):
このブログ記事は、Opera社の WEBサービス「My Opera」で公開していたブログ記事を、移行したものです。移行に際し、いくつか本文を修正 & 追記、そして画像を追加しました。
カテゴリー
記事検索
管理者のプロフィール
Twitterアイコン名前(ハンドルネーム)
「Kyu3」

プロフィール(Profile)
ギャラリー
  • 様々な場所から見た岐阜城
  • 様々な場所から見た岐阜城
  • 様々な場所から見た岐阜城
  • 様々な場所から見た岐阜城
  • 様々な場所から見た岐阜城
  • 様々な場所から見た岐阜城
  • 様々な場所から見た岐阜城
  • 様々な場所から見た岐阜城
  • 様々な場所から見た岐阜城
  • 様々な場所から見た岐阜城
  • 様々な場所から見た岐阜城
  • 様々な場所から見た岐阜城
  • 様々な場所から見た岐阜城
  • 様々な場所から見た岐阜城
  • 様々な場所から見た岐阜城
  • 様々な場所から見た岐阜城
  • 様々な場所から見た岐阜城
  • 様々な場所から見た岐阜城