小粋空間: Google Chrome アーカイブ

Top ＞サービス＞ Google ＞ Google Chrome [全て閉じる]

2012年5月18日

Google Chromeで履歴を残さない方法

May 18,2012 12:33 AM
Tag：[GoogleChrome, Secret]
Permalink

Google Chromeに履歴を残さない方法を紹介します。

このエントリーは「知っておきたいこと – Google」がはてなブックマークで人気エントリーにはいっていたので、その便乗記事です。

１．Google Chromeに履歴を残さない

ブラウザのツールバーにあるレンチアイコンをクリックして、「シークレットウィンドウを開く」をクリックします。

ツールバー

これでシークレットウィンドウが開きます。

シークレットウィンドウ

このウィンドウは次のような機能があります。

シークレットモードで開いたウェブページやダウンロードしたファイルは、閲覧履歴やダウンロード履歴に記録されない
新しいCookieは、開いているすべてのシークレットウィンドウを閉じるとすべて削除
シークレットモードの使用中に変更したGoogle Chromeのブックマークや全般設定はすべて保存

２．最初からシークレットモードで起動する

Google Chrome起動時にオプションパラメータ「-incognito」をつければ、最初からシークレットモードで立ち上がるようです。

Windowsの場合、Google Chromeのアイコンを右クリックして「プロパティ」を選択し、「リンク先」の最後に「-incognito」をつければいいでしょう。

プロパティ

３．Googleのアクセス履歴を残さない方法

シークレットモードでも、Googleアカウントにログインした状態で行ったウェブ検索はGoogleウェブ履歴、つまりネットのあちら側に記録されます。

Googleアカウントに検索情報を保存しないようにするには、ウェブ履歴のトラッキングを一時停止すればいいようです。

一時停止するには、「Web History」にアクセスし（ログインしていないとログイン画面が表示されます）、ページ上にある「Pause」をクリックします。

Pause

一時停止を解除するには、「Resume」の表示をクリックします。

Resume

ちなみにこのページの下になにやら表示されていると思ったら、ブラウザからGoogle検索してアクセスしたページの一覧でした。

ページの一覧

これは「知っておきたいこと – Google」でも紹介されている「ウェブ履歴」です。

４．参考サイト

グーグルクロームを最初からシークレットモードで起動することはできませんか。

Comments [0] | Trackbacks [0]

2012年4月20日

Google ChromeのスタートページをカスタマイズできるChrome拡張「Incredible StartPage」

April 20,2012 12:55 AM
Tag：[GoogleChrome]
Permalink

Google ChromeのスタートページをカスタマイズできるChrome拡張「Incredible StartPage」を紹介します。

Incredible StartPage

情報は2012年4月現在のものです。

１．Incredible StartPageのインストール

「Incredible StartPage」のページ右上にある「CHROMEに追加」をクリック。

「Incredible StartPage」のページ

「追加」をクリック。

これでインストール完了です。

２．使い方

新しいタブを開くと「Incredible StartPage」でカスタマイズされた画面が表示されます。

画像かと思ったら、この部分でメモがとれるようです。メモはイエロー・グリーン・ブルー・ピンクの4種類で、それぞれ別に保存できるようです。

メモ右下のメールアイコンをクリックすれば、Gmailと連動します。

Gmailと連動

その右にある「31」をクリックすれば、Googleカレンダーと連動します。

Googleカレンダーと連動

ここには最近閉じたタブが表示されます。クリックすれば同じタブでページが開きます。

Google Chromeでテーブルのtd要素の高さが2倍になるCSSの不具合について

March 9,2012 12:55 AM
Tag：[Chrome, CSS]
Permalink

当ブログのカレンダーをGoogle Chromeで閲覧したとき、テーブルのtd要素の高さが2倍になる事象が発生しましたので、問題点と対処方法についてまとめました。

Firefox/IE/Safariでの表示
Firefoxでの表示

Google Chromeでの表示

このカレンダーでやっていることは下記の2点です。

日付のリンクにポイントしたときに日付全体の背景色を変更
本日の日付に枠線を表示（上記のスクリーンショットには表示がありませんが次項のサンプルで表示させています）

１．切り分け

ブログでの表示で発生したので、何か別のセレクタが影響しているかもしれないと思い、カレンダー部分のHTMLとCSSのみ切り出して、さらに必要なセレクタのみを抽出したサンプルを作って確認しましたが、結果は同じでした。

サンプル

Firefox/IE/Safariでの表示
Firefoxでの表示

Google Chromeでの表示

検証してみると、td要素の高さが56pxになっています。

Firefoxでの表示

Computed Styleを見るとheightプロパティが56pxになっています。

Firefoxでの表示

２．HTMLとCSS

サンプルのHTMLとCSSを示します。

HTML

<table>
  <tr>
    <th>Sun</th>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
    <th>Thu</th>
    <th>Fri</th>
    <th>Sat</th>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td><span>
      <a href="http://user-domain/2012/02/01/">1</a>
    </span></td>
    <td><span>
      <a href="http://user-domain/2012/02/02/">2</a>
    </span></td>
    <td><span>
      <a href="http://user-domain/2012/02/03/">3</a>
    </span></td>
    <td><span>
      <a href="http://user-domain/2012/02/04/">4</a>
    </span></td></tr>
  <tr>
    <td><span>
      <a href="http://user-domain/2012/02/05/">5</a>
    </span></td>
    ...中略...
    <td><span>
      <a href="http://user-domain/2012/02/29/">29</a>
    </span></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

CSS

th {
    padding-bottom: 4px;
    text-align: center;
}
td {
    padding: 0;
    text-align: center;
}
td span {
    line-height: 1.8;
}
td span a {
    display: block;
    text-decoration: none;
}
td span a:hover {
    color: #fff;
    background: #00f;
}
.today {
    display: block;
    border: 1px solid #444;
}

２．原因

要素セレクタ「td span」に設定しているline-heightプロパティが原因のようで、これが原因で2倍の高さになるようです。

３．対処方法

line-heightプロパティを「td」に移動することで解決しました。

修正前

td {
    padding: 0;
    text-align: center;
}
td span {
    line-height: 1.8;
}

修正後

td {
    padding: 0;
    text-align: center;
    line-height: 1.8;
}

修正後のサンプル

line-heightプロパティを「td span a」に移動しても解決しますが、td要素に設定しておけば、リンクがない日付の高さも揃います。

Comments [0] | Trackbacks [0]

2011年11月 6日

Google ChromeでGoogleリーダーのスタイルを元に戻す方法

November 6,2011 1:33 AM
Tag：[GoogleChrome]
Permalink

Google ChromeでGoogleリーダーのスタイルを元に戻す方法について紹介します。このエントリーは、昨日の「Googleリーダーのスタイルを元に戻すFirefoxアドオン「Stylish」とユーザースタイル「Old styled Google Reader」」のGoogle Chrome版です。

このカスタマイズを行えば、Google ChromeでGoogleリーダーを閲覧するとき、以前のスタイルに近い表示に戻すことができます。余白も改善されます。

適用前

適用後

１．「Chrome Stylist」拡張機能のインストール

「Chrome Stylist」はユーザースタイルを管理するための拡張機能です。この拡張機能にユーザースタイルを追加することで、特定のサイトに対して独自のスタイルを適用することができます。

「Chrome Stylist」のサイトにアクセスして「CHROMEに追加」をクリック。

「インストール」をクリック。

インストール

インストール完了後に拡張機能が有効になります。

インストール完了

２．スタイルの設定

スタイルを適用するには「userstyles.org」の「Old styled Google Reader」のページで「Chrome」を選択し、「Install with Stylist」をクリックすれば一発でインストールできるようです。

userstyles.orgのサイト

ただし、私の環境では次のようなエラーになり、インストールできませんでした。

エラーメッセージ

エラーになった場合は次項の設定を行ってください。

インストールが成功すれば設定は完了かもしれませんが、Firefoxで同様のユーザースタイルをインストールした設定の経験上、設定が反映されていない可能性があります。

設定されない場合の原因は、スタイルを適用するドメインが異なっていることが考えられます。詳細は、「Googleリーダーのスタイルを元に戻すFirefoxアドオン「Stylish」とユーザースタイル「Old styled Google Reader」」の３項を参照して、同様の修正を「Chrome Stylist」で行ってください。

３．スタイルの設定（手動）

設定アイコンをクリックして、「ツール」→「拡張機能」を選択。

「Stylist」の「オプション」をクリック。

Stylist

「Styles」タブの「Add New Style」をクリック。

オプション

一番上の黒いテキストフィールドに「Google Reader」、プルダウンで「domain」を選択して、「www.google.co.jp」、テキストエリアに以下の内容をペーストして、「Save」をクリック。

#top-bar {
    height: 40px !important;
}
#logo {
    height: 27px !important;
    margin: -13px 0 0 11px !important;
}
#search {
    margin-left: 157px !important;
    padding: 9px 0 !important;
}
#search-input {
    border: 1px solid #B2B2B2 !important;
    margin: 0 !important;
    padding: 3px 2px !important;
    width: 200px !important;
}
#viewer-container {
    background: none repeat scroll 0 0 #EBEFF9 !important;
}
#viewer-top-controls-container {
    margin-top: -12px !important;
}
.jfk-textinput {
    height: 17px !important;
}
#viewer-header-container {
    background: none repeat scroll 0 0 #C2CFF1 !important;
}
#viewer-header {
    background: none repeat scroll 0 0 #C2CFF1 !important;
    height: 30px !important;
}
.goog-button-base,.jfk-button,.goog-flat-menu-button {
    font-size: 1em !important;
    font-weight: normal !important;
}
.goog-menu-button .goog-button-base-content {
    padding: 7px !important;
}
.goog-button-base,.jfk-button,.goog-inline-block,.goog-flat-menu-button {
    cursor: pointer !important;
}
.goog-button-base-content {
    padding: 3px 0.461em 0 !important;
    position: relative !important;
    text-align: center !important;
}
.goog-button-tight .goog-button-base-content {
    line-height: 1em !important;
}
.goog-button-base-inner-box {
    background: none repeat scroll 0 0 #F9F9F9 !important;
    height: 20px !important;
}
.goog-button-base-outer-box {
    border-bottom: 1px solid #AAAAAA !important;
    border-top: 1px solid #BBBBBB !important;
}
.goog-button-base-inner-box {
    background: none repeat scroll 0 0 #F9F9F9 !important;
    border-left: 1px solid #BBBBBB !important;
    border-right: 1px solid #AAAAAA !important;
    margin: 0 -1px !important;
}
.goog-menu-button:active .goog-button-base-outer-box, .goog-menu-button:active .goog-button-base-inner-box, .goog-combobox-active .goog-button-base-outer-box, .goog-combobox-active .goog-button-base-inner-box, .goog-menu-button.goog-button-base-open .goog-button-base-outer-box, .goog-menu-button.goog-button-base-open .goog-button-base-inner-box {
    background: none repeat scroll 0 0 #F9F9F9 !important;
    border-color: #888888 !important;
}
.goog-button-base:hover .goog-button-base-outer-box, .goog-button-base:hover .goog-button-base-inner-box, .goog-button-base:focus .goog-button-base-outer-box, .goog-button-base:focus .goog-button-base-inner-box {
    border-color: #888888 !important;
}
.jfk-button-standard.jfk-button-hover, .jfk-button-standard.jfk-button-clear-outline.jfk-button-hover {
    border-color: #888888 !important;
}
.goog-flat-menu-button.goog-flat-menu-button-hover {
    border-color: #888888 !important;
}
.goog-menu-button:active .goog-button-base-outer-box, .goog-menu-button:active .goog-button-base-inner-box, .goog-combobox-active .goog-button-base-outer-box, .goog-combobox-active .goog-button-base-inner-box, .goog-menu-button.goog-button-base-open .goog-button-base-outer-box, .goog-menu-button.goog-button-base-open .goog-button-base-inner-box {
    background-color: #777777 !important;
    border-color: #888888 !important;
}
.jfk-button-standard
{
    border: 1px solid #AAAAAA !important;
    background: none repeat scroll 0 0 #F9F9F9 !important;
}
.jfk-button {
    height: 20px !important;
    line-height: 20px !important;
}
.goog-flat-menu-button {
    line-height: 20px !important;
    border: 1px solid #AAAAAA !important;
}
.goog-flat-menu-button-dropdown {
    top: 8px !important;
}
.goog-menu-button .goog-menu-button-dropdown {
    top: 8px !important;
}
.goog-menu-button .goog-button-base-content {
    padding: 4px !important;
}
#title-and-status-holder {
    padding: 0.1ex 0 0.1ex 0.5em !important;
}
#entries {
    padding: 0 !important;
    border-top: 1px solid #C2CFF1 !important;
}
#entries.list .entry .collapsed {
    background: none repeat scroll 0 0 #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
    cursor: pointer !important;
    margin: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: relative !important;
    width: auto !important;
}
#entries.list .read .collapsed {
    background: none repeat scroll 0 0 #F3F5FC !important;
    border: 2px solid #F3F5FC !important;
}
#entries.list .collapsed .entry-icons {
    top: 1px !important;
}
#entries.list .collapsed .entry-secondary,#entries.list .collapsed .entry-main .entry-source-title {
    top: 1px !important;
}
#entries.list .collapsed .entry-main .entry-original {
    top: 6px !important;
}
#current-entry .entry-container .entry-title a, #current-entry .entry-container a.entry-source-title, #current-entry .entry-container .entry-body a, #current-entry .entry-container a.entry-post-author-name {
    color: #2244BB !important;
}
#entries.list #current-entry .collapsed {
    border-color: #6688EE !important;
}
#entries.list .expanded .collapsed {
    border-bottom-width: 0 !important;
}
#entries.list #current-entry.expanded {
    border-color: #6688EE;
    border-style: solid !important;
    border-width: 0 2px !important;
}
#entries.list #current-entry.expanded .collapsed {
    border-color: #6688EE -moz-use-text-color;
    border-left: medium none !important;
    border-right: medium none !important;
}
#entries.list #current-entry.expanded .entry-actions {
    border-bottom-color: #6688EE !important;
}
#entries.list .entry .entry-actions {
    background-color: #EBEFF9 !important;
    border-top: 1px solid #C2CFF1 !important;
    color: #333333 !important;
}
.entry .entry-actions a, .entry .entry-actions .link {
    color: #2244BB !important;
}

これでGoogleリーダーのページをリロードすればスタイルが反映されているはずなので、確認してください。

Comments [0] | Trackbacks [0]

2011年3月29日

Google ChromeやFirefox4のコンテキストメニューについて

March 29,2011 2:34 AM
Tag：[Firefox, GoogleChrome]
Permalink

Google Chrome・Firefox4のコンテキストメニュー（閲覧履歴）の操作について気がついたことを記しておきます。

Google ChromeやFirefox4で、「戻る」または「進む」ボタンを長押しすると、

「戻る」「進む」ボタンを長押し

このようにページのコンテキストメニューが表示されるようになっています。

コンテキストメニュー

１．「長押し」は「押しっぱなし」でない

で、何を勘違いしていたのか、「長押し」と聞いて「ページを選び終わるまで押しっぱなしじゃないといけないのか・・・」と思い込んでましたが、コンテキストメニューが表示されれば長押しを離してもメニューはそのまま表示されますね。あとはマウスで移動したいページを左クリックで選択すればOKです。

２．右クリックでも表示可能

「戻る」「進む」ボタンを右クリックすれば、わざわざ長押ししなくてもコンテキストメニューがさくっと表示されます。

３．Google ChromeとFirefoxの違い

上記の動作はGoogle Chromeでも同じですが、Google Chromeはクリックする位置によって表示されるメニューが分離しています。

「戻る」をクリック
コンテキストメニュー

「進む」をクリック
コンテキストメニュー

Firefoxは「戻る」「進む」のどちらをクリックしても同じメニューが表示されます。つまり、移動したいページが現在のページの前後どちらかを考えずに適当にクリックすればいいようです。

「戻る」をクリック
コンテキストメニュー

「進む」をクリック
コンテキストメニュー

あと、Firefoxは履歴がない状態でも右クリックすれば表示されます（Google Chromeは表示されません）。

コンテキストメニュー

Comments [0] | Trackbacks [0]

2011年3月 2日

Google Chromeでfloatレイアウトが崩れる件について

March 2,2011 1:55 AM
Tag：[CSS, GoogleChrome, TroubleShooting]
Permalink

Google Chromeでfloatレイアウトが崩れる事象が発生しました。

Google Chromeでfloatレイアウトが崩れる事象

かなりレアケースと思われますが、備忘録として以下に詳細を残しておきます。

１．サンプル

サンプルはdl/dt/dd要素を使ったfloatレイアウトで、コメントフォームを想定しています。

(X)HTML（赤色が対象部分）

<?xml version="1.0" encoding="euc-jp"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>test</title>
</head>
<body>
<div>
  <form method="post" action="hoge.cgi" name="comment_form" id="comment_form">
    <dl>
       <dt>名前:</dt>
       <dd><input id="author" name="author" size="20" value="" /></dd>
       <dt>メールアドレス:</dt>
       <dd><input id="email" name="email" size="30" value="" /></dd>
       <dt>URL:</dt>
       <dd><input id="url" name="url" size="30" value="" /></dd>
       <dt>コメント:</dt>
       <dd><textarea id="comment" name="comment" rows="5" cols="30">Please comment.</textarea></dd>
    </dl>
  </form>
</div>
</body>
</html>

CSS（すべて対象）

* {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, sans-serif;
}
dl {
    margin: 10px;
}
dt {
    float: left;
    width: 120px;
    padding: 5px 5px 5px 0;
    text-align: right;
}
dd {
    padding: 5px 0 5px 8px;
}
input,textarea {
    font-family: "Osaka", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", arial, sans-serif;
}

このサンプルは、Firefox 3.6.13では次のように期待通り表示されます。

Firefoxでの表示

２．問題点

冒頭の画像と同じですが、Google Chrome（9.0.597.107）では次のようにレイアウトが崩れます。

form要素にfieldset要素を挿入しても事象は変わりません。

３．事象の詳細

レイアウト崩れは、以下の条件を満たしたときに発生することを確認しています。

文字エンコーディングがEUC-JP
全称セレクタにmargin/padding/font-familyを設定
dt要素セレクタにpaddingを設定（topまたはbottomに0以外を同時に指定）
input要素セレクタにfont-family、値に「ＭＳＰゴシック」を設定

例えば次の条件であればこの事象は発生しません。

文字エンコーディングがUTF-8である場合
全称セレクタにあるmargin/padding/font-familyのいずれかひとつでも欠けている場合
dt要素セレクタのpadding-topまたはpadding-bottomのいずれかが0を設定、または設定されていない場合

４．対処

３項の1～4の条件をひとつでもはずせば問題は解消します。３項の条件を満たす必要がある場合でも、dd要素にいわゆるclearfixを設定すれば問題は解消されるようです。

(X)HTML

…前略…
<div>
  <form method="post" action="hoge.cgi" name="comment_form" id="comment_form">
    <dl>
       <dt>名前:</dt>
       <dd class="clearfix"><input id="author" name="author" size="20" value="" /></dd>
       <dt>メールアドレス:</dt>
       <dd class="clearfix"><input id="email" name="email" size="30" value="" /></dd>
       <dt>URL:</dt>
       <dd class="clearfix"><input id="url" name="url" size="30" value="" /></dd>
       <dt>コメント:</dt>
       <dd class="clearfix"><textarea id="comment" name="comment" rows="5" cols="30">Please comment.</textarea></dd>
    </dl>
  </form>
</div>
…後略…

CSS

…前略…
.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Google Chromeでの解消後の表示は次のようになります。

Chromeでの解消後の表示