Recent Entries

スポンサーサイト

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

Operaを最新版にアップグレードしましょう!

Webブラウザ『Opera』の最新版Opera9.61が公開されました。
Opera9.6で見つかった3件の脆弱性が修正されましたので、お使いの方はぜひOpera9.61にアップグレードをしましょう!

見つかった脆弱性は下記の3点です。

  1. 「履歴検索」機能
  2. 「早送り」機能
  3. 「ニュースフィード」機能

詳しくは下記サイトへ。
ITpro - Webブラウザー「Opera」の最新版が公開、3件の脆弱性を修正

私は、今回のようなマイナーなアップグレードの時はOperaを上書きインストールで済ませちゃいます。どちらかと言えばいつでもクリーンインストールするのが最良の方法なんでしょうが、結構面倒なので・・・。
(Opera9.6 → Opera9.61 のような小数点第2位の変更など。)

Operaをクリーンインストールしたい方はこちらを参考にしてくだい。
Webブラウザ『Opera9.6』をクリーンインストールしよう!

では、早速、Opera9.61のセットアップファイル(Opera_9.61_int_Setup.exe)をダウンロードします。

down.png ダウンロードはこちらから。
Opera - Web ブラウザ Opera のダウンロード

Opera_9.61_int_Setup.exe

ダウンロードしたファイル(Opera_9.61_int_Setup.exe)をダブルクリックするとセットアップウィザードが始まりますので、指示に従って進めていきます。

opera9.61の上書きインストール

アップグレードを選択して[次へ]をクリックします。
あとは、そのままの流れで進めばOKです

今までOperaにため込んだブックマークやパスワードなどの情報はそのまま引き継がれますのでとっても簡単で良いですねv(´∀`*v)

とにかくソフトウェアは出来るだけ最新の物を使うようにしましょうね!
使い勝手の変更だけなら別にすぐにアップデートしなくても良いですが、重要なセキュリティに関する修正が含まれている事が多いですからね。

とくにWebブラウザはインターネットを閲覧するソフトウェアですから、必ずアップグレードを行いましょー!自分の身は自分で守るのですぅ( ´Д`)ノ

Operaのスタイルメニューを上手に使ってみよう!

CSS(Cascading Style Sheets)をちょこっと変更しました。
フォントだけですけどね。文字のズレがでたので面倒でした・・・

フォントは基本を『メイリオ』にして、サイドバーのタイトルなどは『Georgia』に決定しました。いつでも簡単に直せるので、とりあえずコレでいってみます
これからもどうぞよろしく

さて、ここからが本題です。
CSSでフォントを設定する時は、対象となる場所のclass属性やid属性が分からないといけません。
でも、ブログの中にはたくさんのclass属性やid属性があるので探すのが結構だったりします。

ソース(HTML)を見ればどこにどんなclass属性やid属性を設定してるかがすぐわかりますが、Operaのスタイルメニューを使うとさらに簡単に確認する事ができます。

Operaのスタイルメニュー

Operaのスタイルメニューで、『クラスとID』を選択すると通常のサイト上にclass属性やid属性を付けてくれるので、視覚的にマークされている場所を特定する事ができます。

Operaを使えばクラスとIDが簡単にわかるのよ。
(クリックすると拡大します。)


この画像を見て頂ければ一目瞭然ですよね
これで、表示中のページ内に設定されてるclass属性とid属性が全て確認できます。
CSSでちょこっとフォントなどを変更する時には大変有効な方法です。

色分けによって、何となくそのclass属性やid属性が置かれている立場が確認できるようになっています。
また、class属性やid属性の文字列はコピー可能です。

では、Operaのユーザーモードからッスタイルメニューの『クラスとID』を使う方法の説明です。

  1. Operaを起動し、class属性やid属性を確認したいWebサイトを開きます。
  2. Operaのメニュー「表示」をクリックします。
  3. スタイル」を選択するとスタイルのリストが出てくるので『クラスとID』をクリックします。
    (『クラスとID』にチェックが付きます。)
  4. 以上で完了です。
    Webサイト上に『クラスとID』が付いたのを確認しましょう。

どうですか、とても簡単だと思いません?
このお手軽感がとても気に入ってます。
ただ、この方法だとclass属性やid属性の範囲がわかりませんから、軽い気持ちで使ってくださいね。
※この設定はWebサイトを移動しても継続されるので、解除する時は「クラスとID」をもう一度クリックしましょう。

クラスとID』についてはこれで終了です。

Operaのスタイルメニューは他にも面白いものがたくさんあるので紹介します。
(スライルメニューとは「メニュー」-「表示」-「スタイル」にあるリスト。)

Alt デバッガ
『表示されている画像の ALT 属性が無効か、失われています。』と表示され、alt属性がない画像のみを表示します。
画像には代替手段を提供するのがアクセシビリティ上好ましいので、そのチェックを行う際に便利ですね。
無料アクセシビリティチェック
あなたのサイトのWebアクセシビリティを無料でチェック! - Health is better than wealth
アウトライン
ブロック要素を枠線で囲って表示してくれます。
レイアウトの確認などに良いかも。

opera_outline.png
アクセシビリティレイアウト
スタイルシートを適用していないようなデザインのWebサイトになります。
見やすさは抜群ですが、味気ないページになりますよね・・・。
ギットギトで見づらいサイトなどに利用するとよいかも。
インライン構造
マークアップされたインライン要素を表示します。
strong(強調)、em(強調)、cite(引用)、code(コード)など。
(インライン要素についてはこちらへ。W3G - インライン要素)
クラスと ID
class属性とid属性を表示します。
class属性、id属性というのは赤い部分の事です。
≪ class属性≫
<p class="papepo">

≪ id属性 ≫
<div id="papepo">
フォームを無効にする
フォーム要素が非表示になります。
当ブログでいうとサイドバーの「Site Search」がそれにあたります。
ブロック構造
ブロック要素を表示します。
div(ブロック)、p(段落)、h1,h2...(見出し)、ol、ul(リスト)など。
改行を無効にする
ページ内の改行(
など)が無くなりとても見づらい文章に・・。
使い道は各自考えましょう。
高コントラスト表示(黒/白)
背景色が白色、文字色が黒色のとてもシンプルで見やすいページになります。これは基本中の基本ですね。
文章に色がたくさん使われていて見づらいページなどで使うと便利です。
高コントラスト表示(白/黒)
背景色が黒色、文字色が白色のまあまあ見やすいページになります。この状態がそうです。
高コントラスト表示はどちらも見やすいですね。
背景色と文字色のコントラストの差が文章の読みやすさに大きく影響するのがわかります。
表示位置の変更を無効にする
JavaScriptで非表示にしてある見えない部分がとっているスペースが強制的に表示されます。説明しずらいですねー(;゚Д゚)
(当ブログのSidebarTabで確認してみてください)
表組みの固定レイアウト
いまいちよくわかりませんが、読んだままだと思います。
table要素を固定しちゃうのかな。幅とか高さとか・・・。
とにかく表組みがズレたりします。
表組みの構造
table要素のタグを表示してくれます。
表組みマニアには堪らない機能です、たぶん。
表組みを無効にする
tableタグで組まれていた表が壊れます。
tableタグでレイアウトされたWebサイトで行うと・・・。
結構面白いかも'`ァ,、ァ(*´Д`*)'`ァ,、ァ
浮動表示を無効にする
floatプロパティを使って横に並べているレイアウトが崩れます。
ブログの場合は、大体サイドバーをfloatプロパティでサイドにもってきているので、浮動表示を無効にするとサイドバーがメインコンテンツ(本文)の下まで落っこちてしまいます。
上記の「表組みを無効にする」と一緒に使えば、ほぼ全てのWebサイトでレイアウトをブチ壊せます。
まぁ、意味無いけどね(ノД`)
参考サイト : W3G - float
目次
現在、表示しているサイトの目次を表示します。
目次とっても見出しタグを基準に並べているだけなので、マークアップがしっかり出来ていないとダメです。
本文は表示されません。

Operaの目次モード

≪ 見出しタグがリンクになっている場合 ≫
リンクをクリックするとちゃんとジャンプしますが、表示されるのはやっぱりその開いたページの見出しだけ・・・。
さぁ、あなたなら何に使いますか?

これがOperaのスタイルメニューです。
気になったスタイルメニューがあったら使ってみてください。

Operaの作成者モードとユーザーモード

Operaは『作成者モード』と『ユーザーモード』の切り替えができるようになってます。
■作成者モードとは、オリジナルのCSSを適用するモードです。
■ユーザーモードとは、自分で設定したCSSでWebサイトを見れるモードです。

「文字が小さくて見にくい」とか「リンクの色が紛らわしい」など、表示スタイル上の問題を簡単に解決してくれる優れた機能です。
でも、CSSファイルを作るのにちょっとした知識が必要です。

メニュー「表示」-「スタイル」-「表示モードの編集」をクリックします。
スタイルオプション」が開くので、表示設定タブをクリックします。
一番下の「ユーザースタイルシート」というところの[選択]ボタンを押して、自分で作ったCSSファイルの保存場所を指定します。

初期設定のままなら、「C:\Program Files\Opera\Styles」フォルダにCSSファイルを放り込むだけでもOKです。その際はCSSファイルの名前を「user.css」にしなくてはいけませんよ。
※うまくいかなかった場合は、[選択]ボタンで再選択してみましょう。

ユーザースタイルシートの設定が終わったら、Operaを起動して「表示」-「スタイル」と進み「ユーザーモード」をクリックすると自分のCSSファイルの設定がWebサイトに適用されます。

ちなみにCSSファイルの作り方は簡単です。
メモ帳にプロパティなどダラダラ書いて「名前を付けて保存」を選択し、「*.txt」を消して拡張子を「.css」に変更して保存すればCSSファイルになります。
(ファイル名.css)

我が国 日本をイメージして作りました。
パイパー手抜きです。こんなの公開していいのかしら・・・。
ユーザースタイルシートを設定する練習用に使ってねヽ|・∀・|ノ

リンク上で右クリックして、(user.css)を保存してください。
IE : 対象をファイルに保存
Firefox、Google Chrome : 名前を付けてリンク先を保存
Opera : リンク先のコンテンツを保存
Safari : リンク先のファイルをダウンロード、などなど。

ユーザースタイルシートを使ってインターネットをもっと快適に
サイトオーナー側からしたらちょっと残念な感じですけどね(#)Д`;;)

Operaは楽しいので色々といじくってみてくださいね
今日はここまでナリ~ヾ(o゚ω゚o)ノ

Opera