Beach Resort Photoclip

「エキサイトブログで果たしてエキサイトするか#32008/2/7投稿
エキサイトブログで果たしてエキサイトするか#3.」 の中で背景画像を無料ダウンロードサイトやジェネレーターをいくつかご紹介しましたが、先日ネット徘徊していたとき楽しく背景画像が作れそうなジェネレーターを見つけましたのでアップしておきます。
柄は68種類、表面のテクスチュアは5種類、組み合わせは自由でどちらも縮小拡大可です。作業状態はすぐにプレビューされるので操作で悩むことはないと思います。

さっそく作って背景に使ってみました(笑)

背景画像が作れるジェネレーター

Tiled backgrounds designer
背景画像ジェネレーター.
Tiled backgrounds designer背景画像ジェネレーター.

WEBサイトやブログの雰囲気を変えたくなったときに使ってみてはいかがでしょうか。

さてさて、今日は 1 （イチ） が4つ並んだ日付なんですね。
いつもと変わらないんでしょうけど気分は悪くない 11時11分にアップしてみようか。

ちなみに今日は「配線器具の日」「ポッキー&プリッツの日」「サッカーの日」…etc なんですと(笑)
どれもみんななんとなくわかるのがいいですね。詳しくは下記のリンク先でどうぞ。

• 11月11日 今日は何の日～毎日が記念日～：日本記念日学会日本記念日学会:そんな学会があったの(驚)
  11月11日今日は何の日.

。。。では、楽しい一日でありますように

先に投稿した [リンクにマウスオーバーすると Tooltip が表示されるようにするカスタマイズ]

• エキサイトブログ (Exblog) のプチカスタマイズ #8今回のTooltipはこのように表示されます。.

では IE だと思ったようにきれいに表示されませんでした
。。。もしかしたら私のやり方がまちがっていたのかもしれませんが(汗)

そこでさらにいろいろ調べていましたらクールではないですが（個人的には実用的な感じで好きですが）他にも CSS（スタイルシート）と HTML だけで Tooltip を表示させる方法がありました。
エキサイトブログの場合は javascript が使えないので CSS と HTML の操作のみで Tooltip を表示させる手法はまさしくエキサイトブログ向き、さっそくやってみました。

Tooltipsをポップアップさせる (その2) : Exblog Customize実際にExblog上で
テストした投稿.

参照サイト

参照サイト
「Easy CSS Tooltip」.
Easy CSS TooltipEasy CSS Tooltip
Kollermedia.at.

CSSとHTMLの記述のみでTooltipを表示する

1. [ スキン変更 ] → [ CSS（スタイルシート）編集 ] でCSS 内の最後に以下の記述を加える。
   最後じゃなくてもいいですがわかりやすいように最後にしておきます。

   a:hover {
   	background: none;  /* BG color is a must for IE6 */
   	text-decoration:none;
   }
   a.tooltip span {
   	display:none;
   	padding:2px 3px;
   	margin-left:8px;
   	width:130px;  /* Tooltipの幅 */
   }
   a.tooltip:hover span {
   	display:inline;
   	position:absolute;
   	background:#ffffff;
   	border:1px solid #cccccc;
   	color:#6c6c6c;  /* Tooltipの文字色 */
   	text-decoration:none;
   }

   一番上の a:hover （リンクにマウスカーソルが乗っかった時にどう表示するかの指定）はおそらくどんなスキンを使用していてもすでに記述されていると思うので、もしいま使用しているCSS の中に a:hover がある場合はそこに background:#ffffff; background: none; と追加してください。
   参照サイトでは background: #ffffff; となっていましたが、他のリンク背景もすべて白くなってしまったのでここでは background: none; としました。
   ちなみに私のエキサイトブログで使用しているスキンには a:hover はありませんでした そういう場合は忘れず記述するようにしましょう(笑)
   補足を読むと背景色指定のbackground:#ffffff; background: none; は 「IE6 に必須」 と書いてありますね。
   なお、a:hover 内で text-decoration:underline; を指定（マウスカーソルを乗せるとアンダーラインが表示される指定） をしていると IE6 と IE7 はTooltip の文字列にもアンダーラインが入ってしまうみたいです。
   a.tooltip:hover span { のところに text-decoration:none; （アンダーラインなし）を加えたら解決しました。

2. リンクを貼るときには以下のように記述します。普通とちょっと違います。
   たとえば私のサイトのトップページへ以下のような条件でリンクを貼ろうとする場合

   リンク先 http://www.photoclip.net/travel/hotels/
   リンクの文字列 Beach Resort Photoclip
   Tooltip の表示 東南アジアのリゾートホテル写真集

   次のように記述します。

   <a href="http://www.photoclip.net/travel/hotels/" class="tooltip">Beach Resort Photoclip<span>東南アジアのリゾートホテル写真集</span></a>.

   青字が追加された記述です。
   上のように記述した結果が右のようなリンクになります。Beach Resort Photoclip東南アジアのリゾートホテル写真集.

3. すでに気づかれていると思いますが、どうやら最後に付いている . （ドット） がこのTooltipのキモのようでリンクを </a> で閉じたあと忘れずに . （ドット） を記述しないとTooltipに表示させたい文字列まで普通のリンクになってしまいます。
   そこでこの目障りな . （ドット）が表示されないようにしてしまいましょう。

   以下、ブログの背景が白の場合です。背景が黒の場合は #000000 です。
   要は .（ドット）をブログの背景色と同じ色にして見えなくしてしまおうというわけですね。

   CSS 内に以下の記述を加えます。

   span.white {
   	color: #ffffff;
   }

   そしてリンクを貼る場合は以下のように記述します。

   <a href="http://www.photoclip.net/travel/hotels/" class="tooltip">Beach Resort Photoclip<span>東南アジアのリゾートホテル写真集</span></a><span class="white">.</span>

   上のように記述した結果（文字色を背景色と同じにしてしまった結果）
   最後の . （ドット）が見えなくなりました。Beach Resort Photoclip東南アジアのリゾートホテル写真集.

投稿でリンクを貼るたびに <span class="white"> などと打つのは大変なので他のよく使う記述も含め単語登録しておくといいと思います。
ん そんなのとっくにやってる シツレーしました

せっかく設置したのでこのブログでも使うことにしました(笑)
何か疑問がありましたらコメントしてください。どうもおつかれさまでした

今日はCSS に数行記述を加え、リンクにマウスオーバーすると
Tooltip （簡単な説明） が表示されるようにしてみます。

【追記 12:35:36】
IE6 だとマウスをどかしても Tooltip が消えない & 説明文にアンダーラインが入りますねぇ。
IE7だと Tooltip は消えるけど説明文にアンダーラインが入りますねぇ 。まっいいか

【追記 12:47:46】
アンダーラインはCSSに text-decoration: none; を追加したら消えました。

Demo

参照サイト： lixlpixel CSS tooltips

CSSを編集してTooltipが表示されるようにする

1. [ スキン変更 ] → [ CSS（スタイルシート）編集 ] でCSS 内の最後に以下の記述を加える。
   最後じゃなくてもいいですがわかりやすいように最後にしておきます。

   /* Tooltip */ （アタマにこうやって記述しておくと削除するとき楽です）
   a.tip {
   	position: relative;
   }
   a.tip span {
   	display: none;
   	position: absolute;
   	top: 20px; /* 表示される位置 */
   	left: -10px; /* 表示される位置 */
   	width: 125px; /* 幅 */
   	padding: 5px; /* Tooltip内の余白 */
   	z-index: 100;
   	background: #000; /* 背景色 */
   	color: #fff; /* 文字色 */
   	-moz-border-radius: 5px; /* this works only in camino/firefox */
   	-webkit-border-radius: 5px; /* this is just for Safari */
   	text-decoration: none;
   }
   a:hover.tip {
   	font-size: 99%; /* this is just for IE */
   }
   a:hover.tip span {
   	display: block;
   }
   




2. リンクを貼るときに Tooltip を表示させたい場合には以下のように記述します。

   <a href="http://hogehoge.com/（←リンク先のURL）" class="tip">投稿上の文字列 <span>ここに説明文</span></a>

   青文字がTooltipを表示させる記述です。
   ちなみに通常のリンクはこういう記述ですね。違いがわかりますでしょうか？

   <a href="http://hogehoge.com/（←リンク先のURL）">投稿上の文字列</a>




3. あらかじめ青文字の部分を単語登録しておけば簡単に挿入できます。こんな感じで。

   class="tip"

   <span>ここに説明文</span>

なおリンクが貼ってある画像でも使えます。
他のブログ（Webサイト）でも使えますが javascript が使えるのであればそれを利用した方がいいような気がします。
説明文中は改行も使えますので改行させたい場合は<br />と記述してください。

投稿の中に記述するほどではないけれど
ちょっと説明しておきたいというときに使われてはいかがでしょうか。

プチカスタマイズよりもちょっと大がかりでしたが
スキンを Windows版 Photoshop CS3 のようにしてみました。

http://tacogle.exblog.jp/

横1280 のモニターでブラウザを全画面にして見るとそこそこそれっぽいと思います。
全画面にするには F11 キーを押します。もう一度押せば元にもどります。

IE6 は下のタスクバーが表示されないので×、IE7 は通常表示されるステータスバーを一時的に非表示に。Firefox がベストか。

あなたの PC も Vista マシン

キャプチャー画像から加工していったのですが作業中どれが本当の Photoshop のウィンドウかわからなくなることがあって思わず苦笑。さっきはブラウザ上のごみ箱アイコンをクリックしてしまいました。

あ～、ややこしや～ぁ、ややこしや～ぁ～。

では皆さんすてきな週末 & 連休を

10月9日：6個中0個 第415回抽選結果（みずほ銀行）
0個、、、予定通りだ なかばヤケ

ためしにこのブログの左上にも表示させてみましたが
今日はWEBページ上の任意の場所にバッジのような画像を表示させる方法です。

Exblog の投稿 : [カスタマイズ] ウィンドウの角にバッジを入れる
Exblog に投稿してある内容もあわせてお読みください

ブログにバッジを表示させる方法

1. まず画像を用意しましょう。画像は jpg、gif、png が使えますが、Exblog の「マイイメージアカウントにイメージ登録」には jpg と gif しかアップロードできませんので png を使いたい場合は別のサーバーへアップロードが必要になります。
   今回は画像の作製にバッジのジェネレーター （バッジをWEB上で作れるサイト） を利用してみました。

   
   Web 2.0 Badges - Useful collection of stylish web 2.0 badges and badge generator

   使い方は、右に並んだバッジから好きなものを選んだのちText、Font、Font Size等を指定、[APPLY] ボタンを押すと反映されますので、画像上で右クリックして「名前を付けて画像を保存」をクリックしてPCのデスクトップなどに保存します（画像はjpgでした）
   ちなみにFirefoxの「名前を付けて画像を保存」では保存できませんでした。
   なお現在は見た目優先でjpg ではなく透過 gif 画像に差し替えてあります。




2. スキン変更のページにアクセスし1.で用意した画像を 「マイイメージアカウントにイメージ登録」 のリンクをクリックしアップロードします。アップロード後、[イメージURLコピー] ボタンを押して画像のURLを表示させコピーします。
   あとでCSS に貼り付けますのでテキストエディターなどにコピペしておいてください。




3. 次にHTML編集のテキストボックス内に表示されているHTMLの一番上に

   

   <div id="badge"></div>
   

   と、記述します。
   なお青字の badge は別の文字列でも構いませんが、CSS （スタイルシート）に記述する文字列と一緒じゃないといけません。

   
   

4. 次にCSS の最後に（別に最後じゃなくてもいいのですが、撤去するときにわかりやすいように最後としておきます）以下の記述を加えます。

   #badge {
   	position: absolute;
   	top: 0;  /* 上からどのぐらいの位置に表示させるか、離したい場合は●● px と記述 */
   	left: 0;  /* 左からどのぐらいの位置に表示させるか、右なら right と記述、離したい場合は●● px と記述 */
   	width: 122px;  /* アップロードした画像の横幅 */
   	height: 122px;  /* アップロードした画像の高さ */
   	z-index: 99;
   	background: url(http://pds.exblog.jp/pds/1/200809/30/12/badge.gif) no-repeat;
   }
   

   青字の badge が 3. で述べた「一緒じゃないといけない」 と言った箇所です。
   赤字の URL は 2. でコピーした URL を貼り付けてください。

   
   

5. 表示させる位置はいろいろ変更出来ますので任意の数字に px （ピクセル）と付け加えて調整してください。




6. プレビューしてうまく表示されていたら保存して終了です。

HTML編集とCSS編集は簡単なので、問題は画像をどうするかですね。
Exblog の投稿にも書きましたが、Exblog は<head> 内をいじることができないので透過PNG画像を使った場合IE6（ブラウザ）ではちゃんと表示されません。透過GIFも使えますが周囲がギザギザになってしまうのんですよね。ページ背景との兼ね合いもあるのでなんとも言えませんが。。。
四角い画像ならなんら問題ないので季節の写真でも入れてみますか(笑)

もうひとつの方法

今回は背景画像としてバッジを表示させましたが、投稿内の画像と同じように画像を直接表示させてその画像に別サイトへのリンクを張ることもできます。

Exblog の投稿 : [カスタマイズ] ウィンドウの角にバッジを入れる

私のExblog で右上に表示されている画像をクリックすると今日のこの投稿にジャンプするようにしています。

追記2008-10-15
スキンを大幅に変更したので現在の私のexblogではこのカスタマイズ結果はご覧になれません。応用したものはページに左側に残してあります。