XHTML
・ホムペのデザインをプチ修正 2014年03月23日
・元ダンスアカデミーのサイト 2014年03月21日
・Zen-Coding 2012年06月22日
・一定期間New/Upマークを表示する 2012年02月11日
・ウェブから画像の取り込み 2011年11月09日
・HTMLをエスケープする 2011年05月23日
・テスト 2011年01月24日
・フラッシュが表示されない 2010年12月08日
・IEで由美かおるさんの動画が 2010年07月22日
・flvファイルの埋め込み 2010年07月19日
・HTMLにflvファイルを埋め込む 2010年07月19日
・YouTubeタグをXHTML validにする 2010年07月18日
・HTML のミスが SEO の大問題になる5つの事例 2010年04月06日
・ニコニコマークの出し方 2010年01月21日
・livedoorのロゴがダブルで 2009年12月22日
・ロールオーバー 2009年08月28日
・Shift_JISをEUCに変換2 2009年08月19日
・Enough is enough! No more IE6! 2 2009年08月13日
・Enough is enough! No more IE6! 2009年08月06日
・画像の表示をOFFにしたら 2009年08月05日
・FinePix F200 EXR 2009年06月23日
・動画再生のタグ 2009年06月21日
・サイトで文字の大きさを変える 2009年06月19日
・ファビコンをサイト全体に 2009年04月27日
・ゴースト退治 2008年08月29日
・画像のロールオーバー 2008年05月11日
・IE-7の問題を解決 2008年05月11日
・IE-7でひと苦労 2008年05月10日
・親boxの高さがでない 2008年05月07日
・movファイルをobjectで 2008年04月21日
・元ダンスアカデミーのサイト 2014年03月21日
・Zen-Coding 2012年06月22日
・一定期間New/Upマークを表示する 2012年02月11日
・ウェブから画像の取り込み 2011年11月09日
・HTMLをエスケープする 2011年05月23日
・テスト 2011年01月24日
・フラッシュが表示されない 2010年12月08日
・IEで由美かおるさんの動画が 2010年07月22日
・flvファイルの埋め込み 2010年07月19日
・HTMLにflvファイルを埋め込む 2010年07月19日
・YouTubeタグをXHTML validにする 2010年07月18日
・HTML のミスが SEO の大問題になる5つの事例 2010年04月06日
・ニコニコマークの出し方 2010年01月21日
・livedoorのロゴがダブルで 2009年12月22日
・ロールオーバー 2009年08月28日
・Shift_JISをEUCに変換2 2009年08月19日
・Enough is enough! No more IE6! 2 2009年08月13日
・Enough is enough! No more IE6! 2009年08月06日
・画像の表示をOFFにしたら 2009年08月05日
・FinePix F200 EXR 2009年06月23日
・動画再生のタグ 2009年06月21日
・サイトで文字の大きさを変える 2009年06月19日
・ファビコンをサイト全体に 2009年04月27日
・ゴースト退治 2008年08月29日
・画像のロールオーバー 2008年05月11日
・IE-7の問題を解決 2008年05月11日
・IE-7でひと苦労 2008年05月10日
・親boxの高さがでない 2008年05月07日
・movファイルをobjectで 2008年04月21日
2014年03月23日
ホムペのデザインをプチ修正
昨日のことですが、
久しぶりにHTMLとCSSを使ってデザインを修正しました。
動機は元大分ダンスアカデミーのトップページの画像がモバイルで崩れることに気づいたこと。
PCで見るぶんには全く支障がなかったがモバイルでは大変なことに。
それはとりあえず修正できたようだけど、ついでにというわけで。
ドクター江部の著作本の紹介欄に件数を増やした。
当然スクロールバーが表示されるわけだが、、、
すぐ下にある更新履歴にバーがあるからそれを流用。
サイズの数値を修正してうまくいきました。
ついでにプロフの100の質問の答えを修正しました。
HTMLはともかくCSSをいじるのは楽しいです。
久しぶりにHTMLとCSSを使ってデザインを修正しました。
動機は元大分ダンスアカデミーのトップページの画像がモバイルで崩れることに気づいたこと。
PCで見るぶんには全く支障がなかったがモバイルでは大変なことに。
それはとりあえず修正できたようだけど、ついでにというわけで。
ドクター江部の著作本の紹介欄に件数を増やした。
当然スクロールバーが表示されるわけだが、、、
すぐ下にある更新履歴にバーがあるからそれを流用。
サイズの数値を修正してうまくいきました。
ついでにプロフの100の質問の答えを修正しました。
HTMLはともかくCSSをいじるのは楽しいです。
2014年03月21日
元ダンスアカデミーのサイト
元ダンスアカデミーのサイトはリキッドレイアウトにしているが、
今日初めてスマホやiPadでトップページを見たら画像がゆがんでいる。
自分はPCしか検証できないので確かではないがとりあえず修正した。
HTMLファイルのimgはwidthとheightをそれぞれ100%にしていたが、それを削除。
CSSファイルで#bsoita img { width: 100%; height: auto;}に変更した。
#dance imgも同様。
これでPCの画面は正常に表示されている。
W3C VALIDATOR でチェックしたらOKだった。
W3C CSS でチェックしたらケアレスミスが2箇所あったので修正した。
まりさんにメールして明日チェックしてもらおう。
今日初めてスマホやiPadでトップページを見たら画像がゆがんでいる。
自分はPCしか検証できないので確かではないがとりあえず修正した。
HTMLファイルのimgはwidthとheightをそれぞれ100%にしていたが、それを削除。
CSSファイルで#bsoita img { width: 100%; height: auto;}に変更した。
#dance imgも同様。
これでPCの画面は正常に表示されている。
W3C VALIDATOR でチェックしたらOKだった。
W3C CSS でチェックしたらケアレスミスが2箇所あったので修正した。
まりさんにメールして明日チェックしてもらおう。
2012年06月22日
Zen-Coding
HTMLのコーディングのスピードアップにこれがいいという記事があった。
例えばこのように入力して…
div#header>ul#nav>li*4>a
展開させると…
<div id="header">
<ul id="nav">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
一気にコーディングできちゃいます。便利ですね!
とあるけど、
div#header>ul#nav>li*4>a
と入れるには、HTMLのコーディングが頭に浮かんでいないと不可能。
自分なら愛用の「ez-HTML」で直接書いてしまうしそのほうが早い!
今はこのソフトも入力支援がしっかりしているから
一語一語タグを打つ必要もないし。
「Zen-Coding」は秀丸のマクロで展開できるようで、
一応取り込んでみたけど、そこまででその先には進んでいない。
例えばこのように入力して…
div#header>ul#nav>li*4>a
展開させると…
<div id="header">
<ul id="nav">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
一気にコーディングできちゃいます。便利ですね!
とあるけど、
div#header>ul#nav>li*4>a
と入れるには、HTMLのコーディングが頭に浮かんでいないと不可能。
自分なら愛用の「ez-HTML」で直接書いてしまうしそのほうが早い!
今はこのソフトも入力支援がしっかりしているから
一語一語タグを打つ必要もないし。
「Zen-Coding」は秀丸のマクロで展開できるようで、
一応取り込んでみたけど、そこまででその先には進んでいない。
2012年02月11日
一定期間New/Upマークを表示する
new.js
// JavaScript Document
// 一定期間New/Upマークを表示する
function newUp(y, m, d, c) {
delDay = 30; // 何日後に削除するか
oldDay = new Date(y + "/" + m + "/" +d);
newDay = new Date();
d =(newDay - oldDay) / (1000 * 24 * 3600);
if(d <= delDay) {
// Newマーク
if(c == "new") document.write("<img src='../img/new.gif'>");
// Upマーク
if(c == "up") document.write("<img src='../img/up.gif'>");
}
}
//
<!-- 作成・更新した日とNew/Upを記入 -->
<a href="#">サンプル</a><script type="text/javascript">newUp(2012,2,11,"new")</script>
// JavaScript Document
// 一定期間New/Upマークを表示する
function newUp(y, m, d, c) {
delDay = 30; // 何日後に削除するか
oldDay = new Date(y + "/" + m + "/" +d);
newDay = new Date();
d =(newDay - oldDay) / (1000 * 24 * 3600);
if(d <= delDay) {
// Newマーク
if(c == "new") document.write("<img src='../img/new.gif'>");
// Upマーク
if(c == "up") document.write("<img src='../img/up.gif'>");
}
}
//
<!-- 作成・更新した日とNew/Upを記入 -->
<a href="#">サンプル</a><script type="text/javascript">newUp(2012,2,11,"new")</script>
2011年11月09日
2011年05月23日
2011年01月24日
2010年12月08日
2010年07月22日
2010年07月19日
HTMLにflvファイルを埋め込む
player.swfファイルをゲットしてから。
<object id="flvplayer" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="320" height="260">
<param name="movie" value="player.swf?file=video.flv&image=example.jpg&fullscreen=true" />
<param name="wmode" value="transparent" />
<embed name="sample" src="player.swf?file=video.flv&image=example.jpg&fullscreen=true" width="320" height="260" wmode="opaque" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
embedタグはjavascriptにする。
// example.js
document.write('<embed src="player.swf" width="320" height="260" bgcolor="ffffff" allowscriptaccess="always" allowfullscreen="true" flashvars="author=編集者名&file=video.flv&image=example.jpg&title=sample-mov&fullscreen=true" />');
embedタグのところに以下を挿入。
<script type="text/javascript" src="example.js"></script>
尚、player.swf及びflvファイルは別のディレクトリからの相対パスでもよい。
絶対パスもOKという情報もあった。
<object id="flvplayer" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="320" height="260">
<param name="movie" value="player.swf?file=video.flv&image=example.jpg&fullscreen=true" />
<param name="wmode" value="transparent" />
<embed name="sample" src="player.swf?file=video.flv&image=example.jpg&fullscreen=true" width="320" height="260" wmode="opaque" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
embedタグはjavascriptにする。
// example.js
document.write('<embed src="player.swf" width="320" height="260" bgcolor="ffffff" allowscriptaccess="always" allowfullscreen="true" flashvars="author=編集者名&file=video.flv&image=example.jpg&title=sample-mov&fullscreen=true" />');
embedタグのところに以下を挿入。
<script type="text/javascript" src="example.js"></script>
尚、
絶対パスもOKという情報もあった。
2010年07月18日
2010年04月06日
HTML のミスが SEO の大問題になる5つの事例
シニアネット大分のMLに流した全文です。
シニアネット大分にこれが分かる人が何人いるかですが (;^_^A
japan.internet.com
シニアネット大分にこれが分かる人が何人いるかですが (;^_^A
japan.internet.com
HTML のミスが SEO の大問題になる5つの事例
「HTML のミスは SEO にマイナスにはならない」というのは、SEO でよく語られることである。
一般的な Web ページでは、いくつかの HTML のミスは当然あるだろう。意図的に HTML 文法から逸脱しなくては、多くの環境で同じ表示にすることができない場合もある。そのため、誤った HTML により検索エンジンが評価を下げることは、検索結果でユーザーにとっての価値をランク付けする上でも有益ではないだろう。
同様に、正しい HTML を記述したとしても、それだけで検索エンジンが評価することはない。HTML Lint などの HTML 文法評価ツールでの得点を上げたとしても、検索エンジンからの評価が上がることは基本的にないだろう。
ただ、それにはいくつかの例外があり、HTML のミスが SEO に致命的な問題となっている事例は多く存在する。本稿では、特に大きな問題に繋がりがちな HTML のミスを紹介しよう。
●意図しない隠しテキスト・隠しリンク
HTML のミスにより、表示するつもりのテキストが表示されない場合がある。本来は表示するつもりが、意図せずに背景色と文字色を同じにしてしまう場合や、認識できない文字サイズになってしまう場合、画像を変更したにも関わらず alt 属性など代替要素を変更し忘れた場合には、検索エンジンを騙す意図がなくても隠しテキストや隠しリンクとして検索エンジンスパムと判断される可能性がある。
特に、h1要素においては複雑な CSS を設定する場合が多く、このようなミスが発生しやすい。ページのテーマであり対策キーワードも含まれやすいh1要素を結果的に隠してしまうことは、問題となる可能性が高いため、注意したい。
●特定タグのミス
タグの使い方について、若干のミスであればブラウザでの表示が崩れることはないだろう。しかし、ブラウザは解釈できても、一部検索エンジンは認識できない場合がある。
たとえば、タグや引用符「"」の閉じ忘れなどがあったとしても、最近のブラウザでは表示が崩れることはないが、検索エンジンの認識としては、閉じ忘れの後方の一部テキストを認識できなくなる場合がある。
また、aタグの閉じ忘れにおいては、SEO 観点で重要なリンクを検索エンジンが効果的に認識できない状況となりえるだろう。さらに、画像に対する代替要素として、alt 属性ではなく title 属性のみを使用することで、検索エンジンがその内容を認識しない場合などが見受けられる。
●検索エンジン向けのタグのミス
ブラウザでは一切表示されずに、検索エンジンだけが評価するタグがいくつか存在する。そのようなタグは、少し間違えただけで致命的な問題が発生する場合がある。たとえば、canonical の設定においては、ブラウザでは一切表示されずに SEO 観点だけで問題となるため、大きなミスをしていても気付かずにトラブルとなってしまう場合があるだろう。
また、内容確認のためにアップした際の noindex の指定が、本アップでも外されていないことで検索エンジンに認識されないなどのトラブルも多く存在する。
●論理タグのミス
h要素など、論理的な意味があるタグの使用について、CSS で制御をしておけば、h1要素とh2要素を逆にマークアップしていても、ユーザー観点ではほぼ問題がない。
しかし、Web ページの論理構造を認識しようとする検索エンジンにとっては、非常に大きな問題となってしまう場合がある。ブラウザでの表示だけではなく、CSS を切った状態で情報が正しく伝わるようになっているかの確認が必要だろう。
●文字コードの認識トラブル
検索エンジンが、Web ページの文字コードをうまく認識できないことにより、検索エンジンからの評価が大きく落ちる場合がある。
数年前のブラウザとは異なり、現在一般的に使われているブラウザでは、文字コードを誤認識することは少なくなってきた。ただ、一部の検索エンジンは一般的なブラウザよりも文字コードの自動認識が弱い場合がある。文字コード宣言を誤った場合や、文字コード宣言が正しくとも一部の Web ページで、ブラウザでは表示されても検索エンジンが認識できない場合がある。そうした場合、記述したテキストもすべて検索エンジンは無視することになるだろう。
ブラウザでは閲覧できるものの検索エンジンが文字コードを誤認識することはあまり多く起こることではない。ただし、発生した場合は、そのページを検索エンジンが認識しない状態にまでなってしまう。制作した Web ページの文字コードが認識されづらい状態になっていないか、さまざまな環境で確認をするべきだろう。
■SEO と HTML
HTML のミスが SEO のマイナスに働く事例を5つ紹介してきた。本来、HTML を正確に記述したとしても、SEO のプラスとなることはほとんどないだろう。ただ、やはり問題のない HTML が望ましいことは確かである。
文法上問題がある HTML では、通常の環境で問題なく表示されたとしても、音声読み上げブラウザやテキストブラウザなど、特殊な環境では問題が発生する場合が多い。そもそも SEO 観点での HTML コーディングを行う場合「ブラウザだけではなく、検索エンジンにも理解しやすい HTML を記述する」ことが基本である。
「検索エンジンにも理解されやすい HTML」とは、どのような環境でも閲覧できるアクセシビリティ上の問題がない HTML でもある。
検索エンジンは基本的に正しい HTML を前提として内容の分析をしているだろう。誤った HTML をマイナス評価しないために配慮しているとしても、HTML のミスは、想定しないような検索エンジンの認識を招く場合がある。可能な限り、すべての環境で問題なく閲覧できる HTML を記述することをお勧めしたい。
(執筆:株式会社アイレップ SEM 総合研究所 辻 正浩)
2010年01月21日
ニコニコマークの出し方
16進の文字コードです。
こういうのを記事にして表示するってちょっと工夫が必要です☺
たつをの ChangeLog
p.s.
16進文字コードを普通に表記したら
その文字コードが表す表記になる。
文字コードを文字コードとして表記させるには、
半角英数字の文字コードの一部を変えないといけない。
「☺」なら「&」を「&」にすれば半角の「&」になる。
原稿は「&#x263A;」と書いているわけだ。
そうすれば
「&#x263A;」は☺とならずに「☺」となる。
わかるかな (笑)
こういうのを記事にして表示するってちょっと工夫が必要です☺
たつをの ChangeLog
ニコニコマークの出し方
ニコニコマーク(またはスマイルマーク)は数値文字参照で出すのがいいよ。
半角で「☺」と書けばOK!
☺ → ☺
あと、黒いスマイルは「☻」で!
☻ → ☻
むっとした顔のマークは「☹」で!
☹ → ☹
はーい、みんな並んでー!
☺ ☻ ☹
p.s.
16進文字コードを普通に表記したら
その文字コードが表す表記になる。
文字コードを文字コードとして表記させるには、
半角英数字の文字コードの一部を変えないといけない。
「☺」なら「&」を「&」にすれば半角の「&」になる。
原稿は「&#x263A;」と書いているわけだ。
そうすれば
「&#x263A;」は☺とならずに「☺」となる。
わかるかな (笑)
2009年12月22日
livedoorのロゴがダブルで
有料が終わってからだけど、ブログの先頭のlivedoorのロゴがダブルで表示。
このままだと横スクロールバーが出現してしまう。
サイドのお気に入りを表示させなければ消えるのだがね。
今まではその状態でも横スクロールバーは出ないようにしていた。
ソースを見たら、JavaScriptでheadを強制的に表示させている。
しょうがないから元々のhtmlタグにあるheader部分を消してみた。
JavaScriptの部分だけになった。
どうもすっきりしない。
なんらかの方法を見つけ出したいものだ。
p.s.
livedoor header blog でググったらありました。
livedoor Blogの「共通ヘッダー」がリニューアルします
ああ、これですっきりした (^_^.)
このままだと横スクロールバーが出現してしまう。
サイドのお気に入りを表示させなければ消えるのだがね。
今まではその状態でも横スクロールバーは出ないようにしていた。
ソースを見たら、JavaScriptでheadを強制的に表示させている。
しょうがないから元々のhtmlタグにあるheader部分を消してみた。
JavaScriptの部分だけになった。
どうもすっきりしない。
なんらかの方法を見つけ出したいものだ。
p.s.
livedoor header blog でググったらありました。
livedoor Blogの「共通ヘッダー」がリニューアルします
ああ、これですっきりした (^_^.)
2009年08月28日
ロールオーバー
<p id="ban1"><a href="#"><img src="画像" width="88" height="31" alt="banner" /></a></p>
p#ban1 {
width: 88px;
height: 31px;
background-image: url(背景画像pass);
background-repeat: no-repeat;
}
p#ban1 a {
display: block;
width: 88px;
height: 31px;
}
p a:hover {
background-color: transparent;
}
p a:hover img {
visibility: hidden;
}
2009年08月19日
Shift_JISをEUCに変換2
私のホームページ「お薦め海外ミステリー」「西野流呼吸法とダンス」
画像ページの「しぇんしぇいの写真集」のHTMLとCSSとJavaScriptファイルの
文字コードをEUC、改行コードをLFに変換しアップロードを完了した。
作業をしているときに気づいたが、
画像ページのHTMLファイルはhtml4.01で作成したものが多い。
XHTML+CSSに変えたいけど、数が多いので引いてしまう。
初期のはビルダーで作成したものを整形したもの、
その次はDreamweaverで作成したものですね。
XHTML+CSSのファイルはez-HTMLをゲットしてからです。
見え方はほとんど同じなんですが (笑)
画像ページの「しぇんしぇいの写真集」のHTMLとCSSとJavaScriptファイルの
文字コードをEUC、改行コードをLFに変換しアップロードを完了した。
作業をしているときに気づいたが、
画像ページのHTMLファイルはhtml4.01で作成したものが多い。
XHTML+CSSに変えたいけど、数が多いので引いてしまう。
初期のはビルダーで作成したものを整形したもの、
その次はDreamweaverで作成したものですね。
XHTML+CSSのファイルはez-HTMLをゲットしてからです。
見え方はほとんど同じなんですが (笑)
2009年08月13日
2009年08月06日
Enough is enough! No more IE6!
IT media News
埋め込みコードは以下の通り(14日に修正されたものです)
<!--[if lt IE 7]>
<div style='border: 1px solid #000000; background: #FFFFFF; text-align: center; clear: both; height: 108px; position: relative;'>
<div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'>
<a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div>
<div style='width: 923px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>
<div style='width: 108px; float: left;'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/warning_ie6.jpg' alt='Warning!'/></div>
<div style='width: 275px; float: left; font-family: Arial, sans-serif;'> <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>あなたは旧式のブラウザをご利用中です</div>
<div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>このウェブサイトを快適に閲覧なさる場合には、最新のブラウザにアップグレードしてください。</div>
</div>
<div style='width: 108px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div>
<div style='width: 108px; float: left;'><a href='http://www.microsoft.com/windows/internet-explorer/default.aspx' target='_blank'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/ie.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div>
<div style='width: 108px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div>
<div style='width: 108px; float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/google_chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div>
<div style='float: left;'><a href='http://www.opera.com/' target='_blank'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/opera.jpg' style='border: none;' alt='Get Opera'/></a></div>
</div>
</div><![endif]-->
「IE6はもういらない」――Web企業が撲滅キャンペーン
Internet Explorer(IE)6を撲滅せよ――Web企業が反IE6キャンペーン「IE6 No More」を立ち上げた。
このキャンペーンを立ち上げたのは、WebサイトホスティングサービスのWeebly。同社は撲滅運動に乗り出した理由について、同ブラウザへの対応がWeb企業にとって負担になっているためと説明している。
IE6は2001年にリリースされ、Microsoftから後継バージョンのIE7、IE8がリリースされているにもかかわらず、今なおかなりのシェアを占めている。NetApplicationsの調査によると、7月のIE6のシェアは27%に上った。
このためWeb企業はIE6に対応せざるを得ないが、「IE6対応は難しく、いら立たしい作業で、過度に時間を取られる。さらにIE6は最近のWeb標準をサポートしていないため、開発者ができることに制約がある」状況に苦労しているという。
IE6 No Moreは、IE6ユーザーにブラウザのアップグレードを呼び掛けることで、できるだけ早急にIE6ユーザーをなくすことを目指している。そのための手段として、Webサイトに埋め込むHTMLコードを配布している。このコードをサイトに埋め込むと、IE6ユーザーがサイトにアクセスしたときに、ブラウザのアップグレードを促すメッセージが表示される。
埋め込みコードは以下の通り(14日に修正されたものです)
<!--[if lt IE 7]>
<div style='border: 1px solid #000000; background: #FFFFFF; text-align: center; clear: both; height: 108px; position: relative;'>
<div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'>
<a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div>
<div style='width: 923px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>
<div style='width: 108px; float: left;'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/warning_ie6.jpg' alt='Warning!'/></div>
<div style='width: 275px; float: left; font-family: Arial, sans-serif;'> <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>あなたは旧式のブラウザをご利用中です</div>
<div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>このウェブサイトを快適に閲覧なさる場合には、最新のブラウザにアップグレードしてください。</div>
</div>
<div style='width: 108px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div>
<div style='width: 108px; float: left;'><a href='http://www.microsoft.com/windows/internet-explorer/default.aspx' target='_blank'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/ie.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div>
<div style='width: 108px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div>
<div style='width: 108px; float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/google_chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div>
<div style='float: left;'><a href='http://www.opera.com/' target='_blank'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/opera.jpg' style='border: none;' alt='Get Opera'/></a></div>
</div>
</div><![endif]-->
2009年08月05日
画像の表示をOFFにしたら
ちょっと前まではインターネットは電話線だった。
だからデータのやりとりに時間がかかった。
Webのページはできるだけテキスト表示を心がけた。
観る方はブラウザで画像表示をOFFにすることもあった。
今はブロードバンドが普及し、
光ケーブルの時代だからデータの大きさは気にしなくなった。
とはいえ画像をOFFにすることもある。
CSSでテキストを飛ばして背景画像を表示することが流行った。
これだと画像をOFFにしたら何も表示されない。
それにリンクが貼ってあったら悲惨なことになる。
だからテキスト飛ばしはしないで画像は表示する。
画像のaltとリンクのtitleで画像OFF時のテキストの代替とする。
オンマウス(a:hover)時は上の画像を非表示にすると、
背景画像が表示される。
<p class="back"><a href="#" title="hogehoge"><img
src="hoge.png" width="88" height="31" alt="hogehoge" /></a></p>
p.back {
background-image: url(./hoge2.png);
background-repeat: no-repeat;
}
p.back a {
display: block;
width: 88px;
height: 31px;
}
p.back a:hover {
background-color: transparent;
}
p.back a:hover img {
visibility: hidden;
}
だからデータのやりとりに時間がかかった。
Webのページはできるだけテキスト表示を心がけた。
観る方はブラウザで画像表示をOFFにすることもあった。
今はブロードバンドが普及し、
光ケーブルの時代だからデータの大きさは気にしなくなった。
とはいえ画像をOFFにすることもある。
CSSでテキストを飛ばして背景画像を表示することが流行った。
これだと画像をOFFにしたら何も表示されない。
それにリンクが貼ってあったら悲惨なことになる。
だからテキスト飛ばしはしないで画像は表示する。
画像のaltとリンクのtitleで画像OFF時のテキストの代替とする。
オンマウス(a:hover)時は上の画像を非表示にすると、
背景画像が表示される。
<p class="back"><a href="#" title="hogehoge"><img
src="hoge.png" width="88" height="31" alt="hogehoge" /></a></p>
p.back {
background-image: url(./hoge2.png);
background-repeat: no-repeat;
}
p.back a {
display: block;
width: 88px;
height: 31px;
}
p.back a:hover {
background-color: transparent;
}
p.back a:hover img {
visibility: hidden;
}
2009年06月23日
FinePix F200 EXR
このデジカメはいいですね。値段が下がってきました。
新品での最安値は:\22,800という情報があります。
これは tableタグの挿入実験です。
改行を反映するのチェックを外すのがポイント。
その代わりtableタグの外はbrタグが必要。
p.s.
価格.comの口コミの評価がいまいちだったので、
欲しいリストから外します。
新品での最安値は:\22,800という情報があります。
製品名 | FinePix F200 EXR |
撮像素子 | 1/1.6型 有効1200万画素 スーパーCCDハニカムEXR |
レンズ | 光学5倍(35ミリ換算 28〜140ミリ) |
手ブレ補正機能 | CCDシフト式 |
背面液晶 | 3型 約23万画素 |
記録メディア | xDピクチャーカード/SDメモリーカード(SDHC対応) |
動画 | 最大640×480ピクセル .AVI MotionJPEG |
撮影可能枚数 | 約230枚(CIPA規格) |
サイズ | 97.7(幅)×58.9(高さ)×23.4(奥行き)ミリ、約175グラム(本体のみ) |
改行を反映するのチェックを外すのがポイント。
その代わりtableタグの外はbrタグが必要。
p.s.
価格.comの口コミの評価がいまいちだったので、
欲しいリストから外します。
2009年06月21日
動画再生のタグ
SNO中央支部のサイトの動画を再生するタグを打ち替えた。
IEでもFirefoxでもきれいに表示できてValidでもOKとなると、
Javascriptを使うのが一番という情報があった。
メタファイルで動画を読み込み、
Javascriptでメタファイルを読み込んで、
objectタグとembedタグを書き込む。
HTMLファイルでJavascriptを読み込めばOK、ということでやってみた。
画像の表示枠のサイズの調整に時間がかかったがなんとかOK!
亡くなった古賀さんの動画が大きなサイズで見られるようになった。
古賀さんの動画はこちら
IEでもFirefoxでもきれいに表示できてValidでもOKとなると、
Javascriptを使うのが一番という情報があった。
メタファイルで動画を読み込み、
Javascriptでメタファイルを読み込んで、
objectタグとembedタグを書き込む。
HTMLファイルでJavascriptを読み込めばOK、ということでやってみた。
画像の表示枠のサイズの調整に時間がかかったがなんとかOK!
亡くなった古賀さんの動画が大きなサイズで見られるようになった。
古賀さんの動画はこちら
2009年06月19日
2009年04月27日
ファビコンをサイト全体に
IEでは上手くいきました。
Firefoxではダメです。
1st-need SNS
p.s.
Firefoxはキャッシュを削除したらOKでした。
Firefoxではダメです。
1st-need SNS
ファビコンをサイト全体に反映させる方法
htaccess.txt
に、以下の記述を加えてください。
AddType image/xicon .ico
<Files favicon.ico>
ErrorDocument 404 (ファビコンまでのパス)
</Files>
(例)
AddType image/xicon .ico
<Files favicon.ico>
ErrorDocument 404 http://biomasa22.sakura.ne.jp/favicon.ico
</Files>
上記の(例)は、絶対パス指定(URL)していますが、
パスは、相対パスでも大丈夫です。
あとは、
htaccess.txt
を、サイトの上位階層にアップして、
ファイル名を、.htaccess に変更したら終了です。
設置がうまくいかない場合は、
サーバー側で、.htaccess の動作が許可されているかどうか確認してください。
p.s.
Firefoxはキャッシュを削除したらOKでした。
2008年08月29日
2008年05月11日
画像のロールオーバー
テキスト飛ばしをしない画像のロールオーバーの方法。
<li id="gazo"><a href="#" title=""><img src="./gazo01.jpg" width="300" height="150" alt="" /></a></li>
li#gazo {
width: 300px;
background-image: url(./gazo02.jpg);
background-repeat: no-repeat;
}
li#gazo a {
display: block;
width: 300px;
height: 150px;
}
li#gazo a:hover {
background-color: transparent;
}
li#gazo a:hover img {
visibility: hidden;
}
<li id="gazo"><a href="#" title=""><img src="./gazo01.jpg" width="300" height="150" alt="" /></a></li>
li#gazo {
width: 300px;
background-image: url(./gazo02.jpg);
background-repeat: no-repeat;
}
li#gazo a {
display: block;
width: 300px;
height: 150px;
}
li#gazo a:hover {
background-color: transparent;
}
li#gazo a:hover img {
visibility: hidden;
}
2008年05月10日
2008年05月07日
2008年04月21日
movファイルをobjectで
<p><object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="256">
<param name="src" value="file.mov" />
<param name="controller" value="true" />
<object class="qt" data="file.mov" type="video/3gpp2" width="320" height="256">
<param name="controller" value="true" />
OBJECT
</object>
</object></p>
-------------------------------------------------------------------------------
* html object.qt {
display: none;
}
* html object.qt/**/ {
display: inline;
}
* html object.qt {
display/**/: none;
}