スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサーサイト/--/--/-- --:--/スポンサー広告/ トラックバック(-)/コメント(-)

cssを使って「文字にマウスオーバーで画像を現わす」

「ブログ上の文字」という文字にマウスオーバーすると画像が現れます。

ブログ上の文字
いつつばのクローバー


スタイルシートにcssを書き込んで記事を書いていると時の経過と共にどれがこのためのcssか解らなくなってしまいます。ここにHTMLとCSSを関連して記しておきます。

HTMLは

<a class="thumbnail" href="リンク先のアドレス">ブログ上の文字<span><img src="画像のアドレス" /><br />ここに画像の下に出る文字</span></a>

CSSは

<style>
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #ccc;
padding: 5px;
left: -1000px;
border: 1px double #000000;
visibility: hidden;
color: #000000;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -100px;
left: 50px; /*position where enlarged image should offset horizontally */

}
</style>
スポンサーサイト
cssを使って「文字にマウスオーバーで画像を現わす」/2014/12/29 15:44/css/ トラックバック(-)/ comment(0)

パソコンでスマホサイズ「google chrome」リサイズウィンドウ

パソコンを初めて持った時windows98でした。
XP、 Vistaを経て今はwindows8.1
動画も見ようと大きな画面を購入したのですが、ふと気が付くとなんと世はスマホ時代、
大きなパソコンで作った画面サイズはXP、 Vistaで見ると横スクロールしないと全部が表示されません。

機種によってはパソコンで見るのと同じように見えるのもあるらしいのですが、なんといっても私はスマホを持っていませんので確かめることができません。

初めはスマホサイズの細いページも作ってスマホの方はそちらに誘導するように考えましたが、
横幅にあわせて変化するようcssにbody width:100%;を適用してからはタップやマウスで横幅を狭めてその様子を見ていました。

ある日塾に通っている友達が「あっ、それ教わった」と言って私にもおすそわけしてくれました。
それは「google chrome」リサイズウィンドウということです。

さっそくダウンロードしてみると本当にです。
最少320x480まで見ることができます。
ただこれがスマホでもこうみえるのか?不安はありますが、スマホを持っていない者としては限度です。
パソコンでスマホサイズ「google chrome」リサイズウィンドウ/2014/12/27 11:49/パソコン/ トラックバック(-)/ comment(0)

CSSを使ったタブメニュー

よくトップページなどに使われているタブメニューをcssだけで作ってみました。
この例ではHPを4ページ作ってそれぞれリンクを貼りました。
cssで.box .box2それぞれを float:left; で横並びにし
.box2の下線をなくしてそれぞれのページのメニューのリンクに当てます。
DEMO



続きはそれぞれのページです
【More Open】
CSSを使ったタブメニュー/2014/12/24 14:43/css/ トラックバック(-)/ comment(0)

windows8日本語でアカウント作っちゃった時

私は一年ちょっと前に・・・正確には昨年の10月にwindows8を買い、マイクロソフトにアカウントを作りました。その時、何も考えず漢字の名前を入れてしまいました。それは本名ではなかったのですが、そのことで別に困ったこともなく使っていました。その後windows8.1にアップしました。

しかしそれから二ヵ月後の12月になんとパソコンを物理的に壊してしまいました。画面にヒビが入ってしまったのです。保証も効かないということで、新しく同じものを買いました。
その時、マイクロソフトにまた設定をしなければなりません。メールアドレスを入れると、なんとびっくり、買ったばかりの新しいものなのに今までのパソコンで設定した通りのスタートページが現れたのです。
とてもびっくりしましたが、楽だなと思いました。二ヶ月間タイルアイコンなど大小作り設定した自画自賛のスタートページです。

ところがFlashでSWFを作って保存しようとしたところアカウント名が漢字だと保存できないということに遭遇しました。
せっかく作ったのにデスクトップにさえ持ってこれません。
それでとてもいろいろと検索して名前を英数字にしようとしましたが、どうしても変えることはできませんでした。
仕方なく新しい英数字のローカルアカウントを作って、そちらでFlashを保存することにしました。
ところが管理人ではないのでいちいち前の漢字のアカウントの了解を得なくてはなりません。まあそれは自分なので反対はされませんが(笑)面倒です。
そこで新しい方もAdministatorというように変更しました。両管理人ということです。そして新しい方は前のメールアドレスを登録してありません。登録しさえすればあの二ヶ月間とても苦労もし、楽しくもあったスタートページの設定が一瞬でやってくるでしょうが、また日本語の名前になるかもしれないのです。
検索によるとダウンロードにも影響があるらしいですものね。

その後「起動の時に入る方のアカウント」を設定し、現在に至っています。

たまに前のアカウントに行ってみると、かっこいいなぁと思います。
もう精力を使い果たしてこちらを直す元気がありません。それによく考えたらだれにも見られる訳ではないですよね。(笑)
というわけで結論は漢字で作っちゃった場合、私は新しいアカウントを作ったということです。

もし新しい方だけにするには漢字の方をマイクロソフトひも付けを解除し新しい方をひも付けし、漢字の方を削除
ということになるらしいですが、ここはやってないのでなさるには自己責任でお願いします。
windows8日本語でアカウント作っちゃった時/2014/12/22 20:12/パソコン/ トラックバック(-)/ comment(0)

Windows8.1でデスクトップに「シャットダウンボタン」

パソコンをいじるのが好きで一日中何かをしている私は
パソコンから呆れられてか
たまにデスクトップのスタートボタンwinbtn.jpgがマウスでクリックできなくなります。
すると電源を切ったり再起動をすることができなくなります。
こんな時こそ再起動して回復したいのにと慌てますよね。
この時は本来右端にマウスやタップで現れるはずのメニュ-も現れません。(泣)

いったいどうしたらいい?
ってことで
デスクトップに「シャットダウンボタン」を作っちゃいました。
作り方はとても簡単




デスクトップ画面の何もない所で右クリックし、「新規作成」→「ショートカット」をクリック。

開いたウインドウに
C:\Windows\System32\shutdown.exe /s /t 00
↑を貼り付け「次へ」→「完了」をクリックで作成完了です。


ちゃんとシャットダウンしていますという文字列も現れるので安心な気がしますね。

とりあえずは電源を切ってから起動します。
Windows8.1でデスクトップに「シャットダウンボタン」/2014/12/21 08:41/パソコン/ トラックバック(-)/ comment(0)
| ホーム | 次ページ

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