Skip navigation.

Kyu3's My Opera Blog

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

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

,

こんにちは。 :smile:

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

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



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

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

ButtonMakerスクリーンショット(フォト蔵)・・・ButtonMakerの解説画像。
http://photozou.jp/photo/show/124201/10761920

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

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

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

なお、2つほど注意点を。 :wizard:

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

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

a. それぞれが利用しているOperaの外観(スキン)に予め用意されている、ボタンの画像を調べます。
b. 使用したい画像が見つかったら、画像の名称をコピーします。
c.「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

Operaのスキンに用意されているアイコン表示サイトのスクリーンショット(フォト蔵)・・・「S&R:your skin's images」の解説画像。
http://photozou.jp/photo/show/124201/10761922


オリジナルボタン:
<動作内容>
現在表示(アクティブ)されているページの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, 10 & Copy & Cancel
<注意点>
・Opera9.5以前の場合は、上記の文字列を整形し、表示するところまでしかできません。その為自らコピーし、プロンプト(文字列を表示するウインドウ)を閉じる動作をしなければなりません。


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


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


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


<動作内容>
選択範囲のテキストと、選択範囲を含むページのURLおよびタイトルを引用タグ(blockquote)で閉じた状態の文字列を、JavaScriptで以下のように整形し、クリップボードにコピーする。
<blockquote>選択範囲のテキスト<改行>
<改行>
<a href="URL">タイトル</a></blockquote>
<動作例>
このブログの記事の最初の部分を選択した場合
<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"



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

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

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

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

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

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

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

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

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

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

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

ドコモFOMA F906iレビュー

Comments

ryota658cc 21. September 2009, 08:01

一つお聞きしたい。

マイボタンに使うアイコン画像って、
自分のパソコンに入ってる画像はムリですか?

kyu3 21. September 2009, 18:11

ryota658ccさん、こんにちは。:smile:

>マイボタンに使うアイコン画像って、
>自分のパソコンに入ってる画像はムリですか?

結論から言うとできると思います。ただし「スキンの既存のアイコン画像に、置き換えたい画像を上書きする」と言う方法しかないと思うので、ちょっと面倒くさいかもしれません。 (^^;

ちなみに一応以下のサイトに「Operaのスキン作成」に関する記述があるので、参考にしてみて下さい。

Operaのスキン作成ガイド(Opera Wiki)
http://ja.opera-wiki.com/Operaのスキン作成ガイド

Write a comment

You must be logged in to write a comment. If you're not a registered member, please sign up.

November 2009
M T W T F S S
October 2009December 2009
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