TopGoogle > 2009年1月
2009年1月 7日

Google マップの埋め込み HTML でふきだしを消す方法(新)

January 7,2009 12:37 AM
Tag:[]
Permalink

Google マップをブログなどに埋め込むときの HTMLコードに含まれるふきだしを消す方法です。

ふきだしを消して、マーカーを残したい場合は「Google マップの埋め込み HTML でふきだしを消してマーカーを残す方法」を参照してください。

1.問題点

Google マップから検索などで特定の地域を表示させて、HTMLコードを取得して、ブログに埋め込むと、検索したときの情報がふきだしとして含まれてしまいます(下)。

HTMLコードをブログに貼り付け

実は、以前「Google マップの埋め込み HTML でふきだしを消す方法」をエントリーしたのですが「その方法ではふきだしが消えませんでした」というコメントを頂きました。

どうやら前回のエントリーからしばらく経ったこともあり、その間に Google マップの UI が変更されたようです。ということで、新しい技を紹介します。

2.解消方法

Google マップで検索結果が表示されます。ここでは「東京駅」で検索した結果を表示しています。

Google マップ検索結果

表示結果の中央地点にある赤色のマーカーを右クリックして「ここからのルート」を選択します。

検索結果をクリア

表示結果の中央地点にある赤色のマーカーが緑色になるので、これをさらに右クリックして、「この地点を削除」を選択します。

検索結果をクリア

これで余分なパーツはすべて消えました。この状態で、右上にある「このページのリンク」をクリックします。

非表示になった状態

HTMLコード(反転部分)を取得します。

HTMLコードを取得

取得したHTMLコードをご自身のブログに貼り付ければ、ふきだしは表示されなくなります。

HTMLコードを取得

検索で複数のマーカーが表示された場合も、任意のマーカーを右クリックして「ここからのルート」を選択し、緑色になったマーカーを右クリックして「この地点を削除」を選択すれば、同じように消すことができます。

ふき出し以外のマークも消去可能

以上です。

余談ですが、埋め込みHTMLのマークアップを object 要素に変更したい方は「Google マップの貼り付け用 HTML を valid にする」スクリプトをご利用ください。

Comments [4] | Trackbacks [0]
2009年1月 2日

Google chrome でリンクの下線を消す方法

January 2,2009 1:55 AM
Tag:[, ]
Permalink

出遅れましたが、Google chrome でリンクの下線を消す(非表示にする)方法を紹介します。

私はどのブラウザでもリンクの下線を非表示にする設定をしています。Firefox であれば、「ツール」→「オプション」→「コンテンツ」→「配色設定」で開いたウィンドウの「リンクに下線を表示する」のチェックをはずせば、非表示にすることができます(下)。

Firefox のオプション設定

ところが、Google chrome の標準機能にはリンクの下線を非表示にする機能はないので、下のように、ページのリンクには下線が表示されっぱなしです。個人的には非表示のスタイルになれてしまっているので、サンプルページのようにスカスカならいいのですが、行間が詰まっていると結構見辛いです。

リンクに下線が表示された状態
リンクに下線が表示された状態

が、このエントリーのカスタマイズを行うことで、次のようにリンクの下線を消すことができます。カスタマイズでは Greasemetal を利用します。カスタムスタイルシートを利用します。

リンクに下線を非表示にした状態
リンクの下線が消えた状態

Greasemetal は、Firefox 定番のアドオン「Greasemonkey」と同等の機能を Google Chrome で使えるようにするものです。Greasemetal 経由でユーザーが作成したスクリプトを読み込み、新しい機能を追加することができます。

以下、設定方法です。キャプチャに XP の画面と Vista の画面が混在していますが気にしないでください。

設定方法

2011.03.03 設定方法が大幅に変わったため、内容を更新しました。

「C:\Documents and Settings\ユーザー名\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.css」を開いて、以下の内容を設定。

a,a:link{
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}

Custom.cssを保存すれば再起動せずに設定が反映されます。これで完了です。

※以降の内容は過去のもので、参照する必要はありません。

1.Greasemetal のダウンロード

Greasemetal のページにアクセスして、「GreasemetalInstaller.exe」をクリック。

Greasemetal のページ

ファイルを任意のフォルダに保存します。

2.Greasemetal のインストール

保存した「GreasemetalInstaller.exe」をダブルクリックすると、インストールウィザードが開始するので「Next」をクリック。

ウィザード1

「I accept the agreement」を選択して「Next」をクリック。

ウィザード2

インストール先のフォルダを設定して「Next」をクリック。デフォルトは「C:¥Program Files¥Greasemetal」です。

ウィザード3

スタートメニューフォルダ名を設定して「Next」をクリック。デフォルトは「Greasemetal」です。

ウィザード4

デスクトップにアイコンを作成します。チェックボックスがチェックされた状態で「Next」をクリックしてください。Google chrome はこのデスクトップアイコンから起動します。

ウィザード5

「Install」をクリック。これでインストールが開始します。

ウィザード6

インストールはすぐに完了します。そのまま「Finish」をクリック。

ウィザード7

Google chrome が立ち上がりっぱなしだと次のようなメッセージが出ますので、Google chrome を終了させてください(Google Chrome は再起動させないでください)。

ウィザード8

デスクトップアイコンにある Greasemetal をダブルクリックすると、Google chrome が起動し、次の画面が表示されます。これで Greasemetal のインストール完了です。Google chrome は起動したままにしておいてください。

Greasemetal のインストール完了画面

3.textdecoration_none.user.js のインストール

下記のページにアクセスして、「textdecoration_none.user.js」のリンクを右クリック。

あいてぃかんけいとか - Google Chrome リンク下線を消す(?) Greasemetal

ファイルを保存1

2項でインストールした Greasemetal のフォルダ(デフォルトのままであれば、C:¥Program Files¥Greasemetal)配下に「userjs」というフォルダがあるので、そこに保存。

ファイルを保存2

これで Google chrome に表示されているページをリロードすれば、リンクが消えると思います。

直接 Google chrome を起動してもリンクは非表示にならないので、Greasemetal 経由で Google chrome を起動してください。

Comments [3] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3