乱雑モックアップ » opera http://blog.sakurachiro.com らんざつ[乱雑] （名・形動）[文]ナリ 入り乱れていること。乱れていて秩序がないこと。また、そのさま。 Mon, 06 Feb 2012 11:08:54 +0000 ja hourly 1 http://wordpress.org/?v=3.2.1 operaの「ページのソースを表示」のハイライトが、ちっともハイライトじゃないのでどうにかしたい http://blog.sakurachiro.com/2011/05/source-opera-extensions/ http://blog.sakurachiro.com/2011/05/source-opera-extensions/#comments Tue, 10 May 2011 08:16:14 +0000 まこと http://blog.sakurachiro.com/?p=2473 [image]デフォルトのハイライト
デフォルトのハイライトだと
どこがハイライトされてるのかさっぱりわからんです。

opera:configの中にそれらしいのが見当たらないので途方に暮れていたけど
エクステンションでいいのがあった。
operaのエクステンションって使った事なかったけど簡単ですねぇ。

Source – Opera extensions

ctrl+F9でソース表示
[image]エクステンション source を使って表示

メニュー – エクステンション – 拡張機能の管理から設定を変える事で行数も表示でけた。
[image]設定

よかったよかった。

ついでにいれた画像を拡大するヤツもなんかいい感じ
Image Preview Popup – Opera extensions

]]> http://blog.sakurachiro.com/2011/05/source-opera-extensions/feed/ 0 Operaのパスワードマネージャー(認証管理)の使い方をいまさら知った。 http://blog.sakurachiro.com/2010/06/opera-password-manager/ http://blog.sakurachiro.com/2010/06/opera-password-manager/#comments Wed, 30 Jun 2010 08:53:14 +0000 まこと http://blog.sakurachiro.com/?p=1939 Operaってば、「パスワードを保存しますか?」と聞いてくるくせに、
次にそのページに行っても補完する素振りすら全く見せないから困るなぁと思っていんだけど、ちがうんです。
Ctrl + Enter で記憶させたパスワードを入力してくれるんです、しらんかった。

http://help.opera.com/Windows/9.22/ja/wand.html

Opera が前回入力したフォームフィールドを認識した場合、認証管理機能を使ってフィールドに情報を入力することもできます。認証管理ボタンをクリックするか Ctrl+Enter をクリックしてください。

目印は黄色の枠

パスワードを保存していないページの input (入力欄)は黒
[image]パスワードを保存していない場合の画面表示
パスワードが保存されているページの input (入力欄)は黄色
[image]パスワードが記憶されているページは入力欄の枠が黄色になる
Ctrl + Enter を押すと認証管理の窓が立ち上がって複数アカウントでも簡単に入力できる。
[image]Ctrl + Enterで開く画面

はぁだいぶ使いやすくなった。

]]> http://blog.sakurachiro.com/2010/06/opera-password-manager/feed/ 1 jQueryでアンカーリンクをスムーズスクロールの練習 http://blog.sakurachiro.com/2010/06/jquery-smooth-scroll/ http://blog.sakurachiro.com/2010/06/jquery-smooth-scroll/#comments Mon, 07 Jun 2010 15:28:50 +0000 まこと http://blog.sakurachiro.com/?p=1820 要素を動かすのは前回の(フローティングメニュー作成)でなんとなくわかったけど
全体をスクロールさせる方法はさっぱりなので調べた。

$(function(){
  $('a[href*=#]').click(function() {
    var $target=$(this.hash);
    var targetY=$target.offset().top;
    $('html').animate({scrollTop: targetY},2000);return false;
  });
});


$('a[href*=#]').click(function() {

#を含むリンクをクリックすると

var $target=$(this.hash);
var targetY=$target.offset().top;

クリックされた要素のハッシュを$targetに入れて
offset().top;で位置を調べてtargetYに入れる

$('html').animate({scrollTop: targetY},2000);return false;

scrollTop(=スクロールの位置)に先程調べたtargetYを入れる、2000ミリ秒で移動完了。

以上のコードでFirefox、Opera、IE8と動いた
さすがjQuery、案外簡単にできちゃうんだなぁと思っていたら
Chromeで動かない、うんともすんとも言わない(safariの確認はしてない)。

$(‘html’).を変更する

$('html,body')

とすると
chromeでも動くようになった、良かった。

だが断るしかし

今度はOperaで上に戻るスクロールが通常のアンカーリンクのように一瞬でページの一番上まで戻り、それからゆるゆるとスクロールしながら画面がチカチカする。

Operaでは、htmlとbody両方の指定が有効になるのがチラつきの原因みたい。とほほ
jQueryでscrollToを使うときの注意点 – NoteBook
$(‘html’)と$(‘body’)のどちらが有効か?の表がある。

しかし、operaでは、両方の指定が有効になり、ちらつきの原因となるので、以下のように指定します。

$($.browser.opera ? document.compatMode == ‘BackCompat’ ? ‘body’ : ‘html’ :’html,body’)
.animate({scrollTop:目標のオフセット値Y,scrollLeft:目標のオフセット値X});

流用させてもらったらこうなった。

$(function(){
  $('a[href*=#]').click(function() {
    var $target=$(this.hash);
    var targetY=$target.offset().top;
    $($.browser.opera ? document.compatMode == 'BackCompat' ? 'body' : 'html' :'html,body').animate({scrollTop: targetY},2000);return false;
  });
});

しかしこの三項演算子が全く解読できない＞＜

今回チェック用のhtmlとcss

<body>
<p><a href="clicktest.html">clicktest</a></p>
<p><a href="#abc">link</a></p>
<p><a href="#def">link</a></p>
<p><a href="#ghi">link</a></p>
<div id="wrap"> wrap内 </div>
<p id="abc">abc</p>
<p id="def">def</p>
<p id="ghi">ghi</p>
<p><a href="#wrap">to wrap</a></p>
</body>
<style type="text/css">
body {
  text-align:center;
}
#wrap {
  height:5000px;
  background-color:#f63;
}
</style>

メモ

$.browser.～
jQuery.browser – jQuery 日本語リファレンス

※jQuery 1.3からはサポート外。jQuery.supportを使って下さい。
navigator.userAgentを元に、ユーザエージェントを識別するためのフラグを連想配列として保持しています。
現時点で有効なフラグは次の通りです。
* safari
* opera
* msie
* mozilla

]]> http://blog.sakurachiro.com/2010/06/jquery-smooth-scroll/feed/ 0 Opera / 全角数字の文字化けがじんわりウザくなった http://blog.sakurachiro.com/2010/06/opera-mojibake/ http://blog.sakurachiro.com/2010/06/opera-mojibake/#comments Tue, 01 Jun 2010 12:57:00 +0000 まこと http://blog.sakurachiro.com/?p=1791 最近たまにOperaを使ってる。
PC版のOperaは癖があるけど軽快、ただ見るだけならchromeより快適かも。
最初からマウスジェスチャーついてるし、閉じたタブをCtrl + Zで開けるし。
それに比べてiPhone版Opera Miniの残念具合はどうしたものか…

話がそれた。
そんなちょっと快適なOperaですが気になる事がありんす。
サイトによっては全角数字がバケるんです。
別にOperaが悪いわけじゃなんだけどね。

全角数字がバケてる

英数なんて全角で使わないけど、サイトによってはゴチャ混ぜになってるのよね。
例えば知恵袋なんてOperaで見ると何書いてあるんだかさっぱり。
どうも原因はLucida Grande。

ちなみに、知恵袋はこんな風なfont指定をしてる

font-family:"MS PGothic","Lucida Grande",sans-serif;

Firefoxだと”MS PGothic”が有効になるけど、Operaは”ＭＳ Ｐゴシック”と書かないと認識しないので次の”Lucida Grande”が適用される。

そして Lucida Grande で全角数字を表示するとバケる。
表示できないからバケる?
詳しい事はわかりませんけど。とにかくバケる。
Lucida Grandeてのはwindows版のsafariをインストールすると付いてきてたみたいだけど今はどこからやってくるんだろう?
Safari.resourcesフォルダの中には無かった。

とりあえずOperaのフォントを変更しても、font-familyが指定してあるページのフォントは変更できないので解決しない。
スタイルが指定されていないページに適用する標準のフォントと色を選択します、ですって

解決策は?

制作側の解決方法は”Lucida Grande”を最初に指定しない。
観覧側の解決方法はいくつか選べて

  1. Lucida Grandeを削除する(windowsに元々あるfontじゃないから無くても平気)
  2. Firefox用のLucida Grandeフォント | pyotr.guru.ru様が配布されてるLucida Grandeと置き換える
  3. ユーザースタイルシートでfont-familyを上書きする

今回は3番の「ユーザースタイルシートでfont-familyを上書きする」をやってみます。

Ctrl + F12 ( [設定] – [設定] ) – [詳細設定タブ] – [コンテンツ] – [スタイルオプション]
Ctrl+F12 ( 設定 - 設定 ) - 詳細設定タブ - コンテンツ
を開くとユーザースタイルシートの保存場所と名前を設定できる。
初期値はuser.cssみたい。

ユーザースタイルシートの参照先ちなみにうちのOperaは10.50 betaが出た時に別フォルダを作ってインストールしたんだけど
そのフォルダのまま勝手にアップデートされてて、中身は10.53なのに紛らわしい事になってる。けどそのまま。

user.cssは存在しなかったので、こんな風に記述して保存

body{
font-family:inherit !important;
}

結果

ユーザースタイルシート適用後

文字化けは治ったけど、font指定を片っ端から上書きしちゃうのは良くないよねぇ…
やっぱり1番か2番が良いのだろうか。

]]> http://blog.sakurachiro.com/2010/06/opera-mojibake/feed/ 0