全19件 (19件中 1-19件目)
1
久々にトップフリーページとラジオ周波数一覧を書き直してみたのですが、レイアウトを微妙に変えてしまったため、前のとちょっと趣が変わってしまいました。と、いっても、中身はほぼ同じなので、見比べないと違いはわからないのですが。楽天ブログをやっている人で、スタイルシートで派手にレイアウトされている人はほとんど見たことないので、やってみようという人がほぼいないのかもしれませんが、注意点がいくつかあります。それは、タグにスタイルが定義されている(例えば、.h3 {width:97%}とか)があるため、ブラウザのデフォルトだと思ってスタイルを定義しないと、ブログ上にアップしたときに、予想外な表示になります。#content-center h3 { background-color:#33CCFF; border:1px solid #FFFFFF; color:#00455F; font-size:10pt; font-weight:normal;margin:6px 0px 14px; padding:4px; width:97%;}#content-center h4 { background-color:#FFFFFF; border-bottom:1px dashed #CCCCCC; color:#005D7C; font-size:10pt; font-weight:lighter; line-height:133%; margin:0px; padding:5px 5px 3px; text-align:left;width:97%;}楽天ブログの場合、デザインテーマ(一般的にはスキンとかいう場合がある)やレイアウトが変更できるため、定義されるスタイルシートは変わるかもしれませんが、少なくともこのブログのテーマとレイアウトの場合、トップ自由欄のh3とh4は右のようなの定義となっています。ブログ管理で設定したテーマとレイアウトをもとにスタイルシートが設定されているので、なんだかの定義がされているのは当然ですが、自前でスタイルを設定しようとする場合、既に設定されているスタイルを変えなくてはならない場合があるということです。右の例の場合だと、状況によってwidth、margin、paddingなどを設定したほうがよかったりするわけです。まぁ、width:97%というのは、paddingとかを設定しているためこうなっているようですが、外にdivでwidthを設定しておいて、中身にmargin、paddingを設定してwidthは設定しない(すなわちauto)するのが個人的には好みですが…。ちなみにこのようなwidth設定がだめぽとかいっている訳ではないのであしからずw。
2007/08/19
コメント(1)
というわけで、今回もラジオねたではなく、前回のPerlのCGIからWebサービスにアクセスするの続きで「素のPerlでWebサーバーにアクセスするにはどうするのか?」です。コードはめんどいので正常系のみでいきます。もし実装するときはちゃんとエラー処理もいれてください。まずは、最初に注意事項として申し上げますが、CGIから他のサーバーにアクセスするようにしていると、そのCGIが大量に呼び出された場合でも、呼び出すサーバーに負荷がかからないようにすべきでしょう。さて、サンプルコードですが、connect()までは、世に存在するこの手のコードと一緒なので、詳細な説明は省きます。基本的にこういうものだと思ってもらって問題ないと思いますが…。$AF_INET = 2;$SOCK_STREAM = 1;$SockAddr = 'S n a4 x8';($name,$aliases,$proto) = getprotobyname('tcp');($name,$aliases,$type,$len,$localAddr) = gethostbyname('localhost');($name,$aliases,$type,$len,$serverAddr) = gethostbyname($host);$this = pack($SockAddr, $AF_INET, 0, $localAddr);$server = pack($SockAddr, $AF_INET, $port, $serverAddr);socket(S, $AF_INET, $SOCK_STREAM, $proto);bind(S, $this);connect(S, $server);ここで、$host、$portはアクセスするサーバーのホスト名(ドメイン表記でも可)とポート番号です。httpの場合は、普通$portは80になるでしょう。次はサーバーへリクエストを送ります。要するにHTTPプロトコルのGETメソッドを使ってコンテンツを持ってくる方法ということになります。binmode(S);select(S); $| = 1;$request = "GET $uri HTTP/1.1";$header = "Host: $host";print "$request\r\n";print "$header\r\n\r\n";select(STDOUT);binmode()はUNIX上では意味はないですが念のため。「$| = 1;」はこれを指定しておかないとバッファに溜まったままで、サーバーに送り出してくれません。最後の「select(STDOUT);」は、デフォルト出力先を元に戻しています。ここでは、$urlと$hostを指定しなければならないのですが、$hostは前のコードの$hostと同じで基本的にはOKです。$uriは、ここではサーバー内のパス(すなわちURLでhttp://hostname以降に書いてあるもの)を指定します(例えば、「/cgi-bin/test.cgi?param=value」)。ヘッダーの「Host:」はHTTP/1.1では必須なので省略不可で、あとお好みでヘッダーを追加してください。$header .= "\r\nUser-Agent: hogehoge";と、書いてみたりとか。これで、リクエストは送られましたので、あとは結果を読み込むわけですが、失敗しなければ、「ステータス」と「ヘッダー」と「リクエストの結果(コンテンツ)」が返ってきます。とりあえず、ヘッダーの解析までです。<S> =~ /^HTTP\/[.0-9]+ ([0-9]{3})/;if ($1 ne '200') {#どうやらエラー}while(<S>) {last if $_ eq "\r\n";$headers{$1} = $2 if /^(.+): (.+)$/;}というような、ちょっと強引なコードですが…。まずステータスコード「200」以外はエラーとみなしていますが、このあとヘッダー、場合によってはコンテンツも送られてきますので、ここはそのまま突っ走ります。たぶん、コードを保存しておいて、最後に処理するのが正しい方法かと思われます。ヘッダーの内容は後から使うので、連想配列の中に入れておきます。次にリクエストの結果を取得するのですが、サイズの指定され方によって基本的に3つの方法があります。まずはコード。$content = '';if($contentLength = $headers{'Content-Length'}) {read(S, $content, $contentLength);}elsif ($headers{'Transfer-Encoding'} =~ /^chunked/) {while(<S>){last unless /^([0-9a-fA-F]+)/ && $chunkLength = hex($1);read(S, $buf, $chunkLength);$content .= $buf;last unless <S> eq "\r\n";}}TCP/IP入門第2版Content-Lengthでサイズを指定Content-Lengthは10進数の数値で指定されてきますので、このサイズ分だけ読み込んだら終了するという処理になります。Transfer-Encodingがchunkedこの場合は、それ以後に「16進数の数値CRLF、数値のサイズ分のデーターCRLF」というのを繰り返しますが、サイズが「0」の場合にすべてのデーターが送られてきたということで終了となります。いずれの指定もなしコネクションが切れるまでがデーターとみなして送られてくるのですが、HTTP/1.1ではKeepAliveがあるためあり得ないはず。HTTP/1.0以前の処理用なので実装なし。このコードもエラーチェックなしなので、このままではどうかと思います。<S>やreadはエラーが起きるとundefを返すので、それをチェックしたほうがよいと思います。最後は、ソケットを閉じます。close(S);shutdown(S,2);できる限り、close(),shutdown()は、connect()成功後、いかなる場合においても実行しておくべきです。と、いうわけでこれで終わりです。ただし、1つ気になることがあって、それはタイムアウトをどうするのかということです。思いついた対処の方法としては…。本当に使える厳選CGIスクリプト集何もしないこれをCGIから呼ぶとすれば、WebサーバーがCGIを終了させたり、ソケットがタイムアウトするので、それに期待する。あまりよいとは思えないけど。setsockopt()でタイムアウトを設定一応、そういうオプション(SO_RCVTIMEO)がある。デフォルトよりも短く設定することで対応する。ただし、システム依存する可能性あり。監視用のプロセスを使って、ソケットを閉じるconnect()と同時に子プロセスをforkして、一定時間sleepさせる。もしsleepを抜けたら、ソケットをクローズ。そうすると、read()とかがエラーで読み込みのブロックから抜け出す(はず)。これもシステムに依存しそうな感じ。ちなみにうまくいったときは、子プロセスとkillする。監視用のプロセスを使って、シグナルを送るこれと同じようにconnect()と同時に子プロセスをforkして、一定時間sleepさせるが、抜けたら親プロセスにkill()でシグナル(INT)を送る。親プロセスはシグナルハンドラで適切な処理をして終了。ちょっと強引っぽいが。説明が詳しくない割には長いなぁ
2007/02/03
コメント(0)
ひさびさの記事ですが、ラジオねたでなく、「楽天WEBサービス」というのを使ってなんかできないかと思ってみました。とりあえず、CGIからWEBサービスの「ItemSearch」のAPIを呼び出してそれを加工して表示すると、「ジャンルカスタマイズリンク」みたいなものができそうかな。はじめてのPerl/CGIプログラミング増補改訂版PerlベストプラクティスそれでCGIはPerlで書きますが、条件としてCPANモジュールは使わず、要するに「素」のPerlでやってみようということです。CGIの処理の流れとしては、「HTTPでWEBサービスのAPIを呼び出す」→「結果をもらってHTMLに加工して表示」ということになります。できるかどうかの検証も含めて、もう一歩掘り下げていくと…。サーバーへのアクセスWEBサービスのAPIはhttpを使うので、ネットワークでサーバーに接続できなければ、お話なりません。本来ならば、LWPやCURLモジュールを使えば一撃ですむところですが、ネットワークでアクセスするところから自前で作ります。Perlには、connect()やbind()などのソケット系APIは実装されているのでできるはず…。HTTPのプロトコルは、リクエストとヘッダーを送ると、ヘッダーと要求したものが送り返されるという、比較的簡単なものなはずなのでできそうかと。APIの結果の解析WEBサービスのAPIのドキュメント読めばおわかりだと思いますが…、送られてくるのはXMLです。送られてきたXMLを解析して必要な情報を取り出せればよいということです。これも本来ならXMLパーサーなどを使えば、比較的楽にできそうですが、Perlの正規表現のパターンマッチでも十分に可能でしょう。もしかしたら、余計な解析をしない分、自前正規表現パーサーの方が高速かもしれません。というわけで、今回はなんか「意気込み」だけなねたのようですが、とりあえず、それほど大変ではなさそうかという感じです。次回は、もっと具体的なことを書きたいと思います。いや…CGIはほとんど動いているんだけどね…
2007/01/28
コメント(0)
いつまでリニューアルとかやっているんだか、といわれそうですが…。ブログでスタイルシートを更新しました。ずいぶん前に書きっぱなしだったので、内容を見直して一部あやふやなところをちゃんと書き直したのと、レイアウトとスタイルをほかのページ(全国ラジオ周波数一覧とか)にあわせました。あとは、前にブログで行間隔を変えるスタイルシートネタを書いたので、その内容(文字間隔を変える)を追記しました。HTML必須タグリファレンスユーザー便利帳ついにIE7の日本語版がリリースされたので、入れ替えて見てみましたが、ちゃんと表示されていますし、ちょっと前に出たFirefox2.0でも、普通に表示されていることも確認しています。こんなページを作っていおいてなんですが、楽天ブログでレイアウトをやたらにやっている人ってほとんどみませんね。たまにいらっしゃるのですがTABLEタグを使っていたりして、スタイルシートで設定されている記事はまったくといっていいほどみません。別に布教しているわけではないので、どうでもいいのですが…。TABLEタグのレイアウトは、個人的に思うに、ブラウザでちゃんと表示されていれば別にかまわないと思うのですが、できるんだったらスタイルシートのほうよいというぐらいですかね。ただ、楽天ブログの記事もフリーページもスタイルの定義が別ファイルでできないので、style属性で書いていくのですが、これが結構大変です。ラジオカタログの中身のページもstyle属性で設定しているのですが、スタイルの定義だらけでうんざりって感じです。Firefoxに使い慣れているとIE7のUIってなんか微妙…
2006/11/03
コメント(0)
ずいぶん前にリニューアルとかいってましたが、とりあえずラジオのブログということで、ラジオ放送局周波数一覧が出来上がりました。この手の周波数一覧は、きっと普通の人はあまり見ないとは思いますが、少なくとも自分は使いますので、それでもよしとしておきます。その割には作るのがかなり大変だったりするんですけど…。SONY NAS-M70HD価格を見てみる新製品HDDコンポ[NET JUKE]。PCなしで曲のダウンロードができる。80GBのHDDを内臓。WALKMANにも転送。Panasonic RF-U170価格を見てみるハンディサイズの高感度設計ラジオ。AM/FM/TV1-12が受信可能。普段ラジオを聞かない人とか、どうでもいいかとお思いでしょうけど、万が一災害とかあったときを考えると、少なくとも1つぐらいは覚えておいたほうがいいかもしれませんよ。もし覚えるのであれば、一番近くのNHK第1放送(AM放送)がよいかと思います。覚えるといっても、多少ずれていてもわかるので、大体で問題ないですよ。関東なら東京の594kHzですが、600kHzぐらいでよいですし、関西は大阪が666kHz(これは覚えやすいか)、京都が621kHzなので620kHzぐらとかそんなんでよいと思います。あとは、各県(北海道は広いので、いくつかありますが)ごとに1つ以上はNHK第1放送があるので、受信しやすい周波数を調べておくのはどうでしょう。普通の新聞(いわゆる一般紙)にラジオ欄があって、そこに書いてある周波数が受信しやすいものなので、それを見るのが手っ取り早いかもしれません。そういうときに使いそうなラジオやラジカセなどの周波数を、あらかじめ合わせておくというのもよいかも。ほとんど使ってない非常用のラジオは電池をチェックしておいたほうがよいかもよ
2006/10/22
コメント(0)
楽天ブログでは、高性能エディタというのを使うと、HTMLをあまり知らなくても文字の属性とかを変えることができるのですが、やはりできることには限界があるため、微妙な調整がしたいという方が多くいらっしゃるようです。先日、ふぅさんからブログでスタイルシートを読んでいただいたという書き込みがあったのですが、今一度、行間や文字間を空ける方法をなるべく簡単に書いてみようと思います。なお、以下のHTMLサンプルは自動改行を前提に書いています。フリーページなどで<BR>を使うほうに設定している場合には、BRタグを改行しているところ(行の最後)に入れてください(ただし</div>の後ろには<br>不要ですから)。あと、楽天ブログの場合、タグを使っているので高機能エディタでなく普通のエディタで入力してください。まずは、中央寄せで行間の隙間を変える方法です。DIVタグでstyleを設定します(詳しい方からPタグじゃないのか?というお叱りを受けると覚悟しております。DIVタグとPタグの違いがわからないときは、DIVタグでもいいのではないかと個人的に思っています)。HTMLソース<div style="text-align:center;line-height:1.6em">楽天広場ブログは5周年を迎えて楽天ブログに変わりました</div>ブラウザ表示楽天広場ブログは5周年を迎えて楽天ブログに変わりました簡単な解説text-align:center文字列や画像が中央寄せ(センタリング)になります。CENTERタグと同じようなものですが、text-align:centerの場合、TABLEタグで表示された「表」はセンタリングされません(表の中身はされます)。CENTERタグの話は長くなるのでここで止めときますw(過去記事で書いた記憶があり)。line-height:1.6emこれが行間の隙間の指定になります。「em」というは1文字の高さを1とする単位です。「1em」と指定すると、行間の隙間はなくなります。「1.6em」と指定すると0.6文字分の隙間が空きます。さらに文字と文字の間隔を変えてみます。これは縦方向の隙間ではなく横方向の隙間のことです。HTMLソース<div style="text-align:center;line-height:1.6em;letter-spacing:0.2em">楽天広場ブログは5周年を迎えて楽天ブログに変わりました</div>ブラウザ表示楽天広場ブログは5周年を迎えて楽天ブログに変わりました簡単な解説letter-spacing:0.2em文字と文字の間隔を指定しています。単位は先ほどと同じemです。1つ注意してほしいことは、line-heightと違ってletter-spacingは、「0」と指定すると隙間がなくなり、「1em」と指定してしまうと、1文字分隙間を空けて表示されるということです。(ここもこのままだと叩かれそうなので、蛇足ですが説明しますと、1emというは文字の高さであり横幅ではありません。ただ、日本語のフォントの場合、基本的に高さと幅が同じなので、1文字分の隙間ということになります)おまけですが、この「letter-spacing」は、文章の途中でも指定することができます。例えば「ここは隙間をあける」というようにできるということです。ちなみにこれは、「<span style="letter-spacing:0.5em">ここは隙間をあける</span>」と書いています。今回はタグといっても最初と最後だけなので(最後の</div>は忘れないように…)、とりあえず、普通に文章を書いてから行間や文字間隔を変えたいところだけタグをつけるというやり方でもいいので、簡単にできるのではないかと思います。あとは、プレビューを見ながらパラメタ(1.6emとか)の数値をいじりながら微調整していくというのがよいかと思われます。珍しく、アフィリエイトなしの書き込みやねぇw
2006/09/02
コメント(4)
最近、すっかりブログを更新してませんが、ちょっとはここのタイトルらしく、ラジオの商品一覧をフリーページに作ってみようと、こつこつやっております。例のごとく、テンプレの類いは使わず、自力でスタイルシートを使っているのですが、スタイルの定義が外だしできない(全て、タグの中でstyleで書く)ので、やたらに面倒です。 SONY ICF-B01 楽天で価格を見てみる 最近発売された、SONYの非常時に便利なラジオ。手回し充電で電池切れでも使えて、さらに携帯電話の充電機能付きライトもついているので、枕元においておくというのもいいかもしれません。 さらにタグにスタイルが定義されてしまっているものがあるため(例えば、見出しタグh1とか)、その定義を変更するためにstyleを使っています。そのため、ブラウザデフォルトでいけそうなところでも、定義しているようなところがあって、さらに記述量が増えていっています。せめて、制限付きでもいいから、cssでクラス定義ができてほしいなぁと思うのですが…。無理なお願いでしょうねぇ。XHTMLのつもりでタグにidを書いたら怒られたし、タグや属性の制限はかなりきびしいですから…。ラジオカタログワールドバンドラジオ名刺サイズ(通勤)ラジオとりあえず、作ったフリーページのリンクです(2ページだけではないですよ!)。まだまだ、商品数が少ないのでごりごり増やしていかなくてはと思うのですが、これがなかなか進みません。アフィリエイトリンクを持ってくるだけでも結構めんどうです(ある程度は、元ネタはあるんですけど)。一部、レイアウトがおかしいところ(下のほうとか)があるようですが、おいおい直していきます。レイアウトを気にし始めるとそっちばっかりになってしまって、さらに進まなくなってしまうので、やたらに崩れてない限りちょっとほっておこうかと思ってます。最後にはそれなりに見せられるページになる予定です。あと、余談ですが、フリーページ一覧の表示を落としてしまっているので、どこだかわからなくなってしまっていますが、フログでスタイルシートのページはまだあります。完成にはまだまだ時間がかかりそう…
2006/08/09
コメント(6)
とりあえず、大きいのと中ぐらいのとのレイアウトができました。前記事のサンプル2(得点を表示しているやつ)は、表示位置の調整のため今回は見送らせてください。まずは、基本レイアウトです。これはただ背景画像にあった領域だけの定義なので、文字サイズとか改行位置とかは自分で調整してください。あまり文字を入れすぎると背景画像からはみ出します。あと、背景画像とともに全体が中央に寄るようになってます。中ぐらいの画像の基本レイアウト<div style="width:200px; height:150px; margin:0 auto; background-image:url(中ぐらいの画像のURL); background-repeat:no-repeat"><div style="padding:30px 20px">★ここに文章を書く★</div></div>大きい画像の基本レイアウト<div style="width:320px; height:240px; margin:0 auto; background-image:url(大きいの画像のURL); background-repeat:no-repeat"><div style="padding:48px 32px">★ここに文章を書く★</div></div>楽天 夏のでんき祭 2006最高5万ポイント、合計50万ポイントが抽選で当たる。格安の家電、AV、PCなどが勢揃い→とりあえず、チェック! サンプルその1ワールドカップ日本代表を応援しよう! 次は、前記事のサンプル1。3行で表示されているものです。この場合、1行の文字数は全角で7文字までとなっています。半角の場合、プロポーショナルになるので、14文字以上入ると思いますが、試してみないとわかりません。文字色は白(color:white)で中央寄せ(text-align:center)を指定していますがお好み変えてください。文字数制約が7文字×3行で難しいかもしれませんが、いろいろ考えてみてください。中ぐらいの画像のサンプル1のHTML<div style="width:200px; height:150px; margin:0 auto; background-image:url(中ぐらいの画像のURL); background-repeat:no-repeat"><div style="font-size:16pt; line-height:1.4em; padding:30px 15px; text-align:center; color:white">★1行目★<br>★2行目★<br>★3行目★<br></div></div>大きい画像のサンプル1のHTML<div style="width:320px; height:240px; background-image:url(大きい画像のURL); background-repeat:no-repeat; margin:0 auto"><div style="padding:56px 32px; font-size:24pt; line-height:1.25em; text-align:center; color:white">★1行目★<br>★2行目★<br>★3行目★<br></div></div>32型液晶テレビが59,800円まだ、間に合うかな?液晶テレビでワールドカップ。→液晶テレビ売れ筋ランキング サンプルその3大漁サンプル2は諸事情によりスキップしますw。前記事のサンプル3。1行で全角で2文字が表示されているものです。さすがに応援で「大漁」はないと思いますがw、一番「旗」らしいかなと思って、このレイアウトにしてみました。右のサンプル表示では文字色を「赤」にしていますが、文字色は白(color:white)で中央寄せ(text-align:center)を指定しています。試してないのでわかりませんが、もし「マーキー」が使えるのであれば、おもしろいものができるかもしれません。中ぐらいの画像のサンプル3のHTML<div style="width:200px; height:150px; margin:0 auto; background-image:url(中ぐらいの画像のURL); background-repeat:no-repeat"><div style="font-size:60pt; line-height:1em; padding:35px 20px; text-align:center; color:white">★★</div></div>大きい画像のサンプル3のHTML<div style="width:320px; height:240px; margin:0 auto; background-image:url(大きい画像のURL); background-repeat:no-repeat"><div style="font-size:96pt; line-height:1em; padding:54px 32px 48px; text-align:center; color:white">★★</div></div>あぁ、相変わらずIEにはやられっぱななしだ…
2006/05/28
コメント(1)
前回のレイアウトの続きですが、楽しみにされていた方もわずかながらもいらっしゃったかもしれませんが、ここで訂正とお詫びをいたします。前回の画像のサイズで、大きいほうが「320×200」と書いていたのですが「320×240」の誤りでした。あと、paddingが横が15%と縦が20%と申し上げましたが、「横が10%、横が20%」でした。申し訳ありません。あとで修正いたします。自力でレイアウトされる方はこのパラメタでお願いします。あと、サンプルのHTMLですが、午後からごりごり作っていたんですが、IEで期待と異なる結果が出て、ちょっとはまっていました。今は、解消したのですが、実際にブログ上にアップしないと結果が不安なので、出力サンプルだけにさせてください。これで、ブラウザ確認しますので、しばらくおまちください。 サンプルその1ワールドカップ日本代表を応援しよう! サンプルその2オぅストラリぁ5 サンプルその3大漁 10対5って野球じゃないんだしw
2006/05/27
コメント(0)
前回のフラッグのレイアウトネタが失敗ぽだったので、とりあえず、GIFアニメを大きいのと中ぐらいのと各4色を調子にのって作ってみました。だめぽの元ネタはいっしょなので、あまりできばえはよくありませんが、このへんでご勘弁をw。 代表ユニホームぽい色320×240 200×150 濃いめの青色320×240 200×150 背景画像にしたときのpaddingですが、たぶん横が15%10%、縦が20%のはずです(確認してませんモウシワケナイ)。HTMLのサンプルコードは、また後日に書くことにします。今回はこれだけで画面がいっぱいいっぱいだし。いちおう、著作権は放棄しませんが(これごときって気もしますけど…)、気に入ってもらえれば、画像は自由に使ってもらって結構です。ただし、トラブルの元になるので2次配布はご遠慮ください。画像は画像サイズのリンクのところを右クリックで保存か、ブラウザで表示してから保存するで、いったん自分のパソコンに落としてから、自分の画像サーバーへアップロードして利用してください。ファイルサイズは9KBらしいです(広場フォトでみたらそう書いてあった)。楽天広場会員どうしだと画像が送れるらしいですがやりかたを知りませんw。32型液晶テレビが59,800円まだ、間に合うかな?液晶テレビでワールドカップ。今週末ぐらいがぎりぎりか?→液晶テレビ売れ筋ランキング 山吹色?(ブラジル色?)320×240 200×150 あづき色か?(楽天色?)320×240 200×150 なんか、ずっとみてると酔いそうw
2006/05/26
コメント(1)
最近レイアウトネタのブログネタを書いてないので、何かないかと思って、時期ものネタを考えたんですが、かなりいまいちぽで、ぼつネタにしようかと思ったんですが、折角なんで晒すことにしましたw。適当に作ったので、仕上がりもいまいちと思われ、です。 ワールドカップ日本代表をみんなで応援しよう(^_^)/楽天売れ筋ランキングラジオポータブルオーディオコンポ・ラジカセ液晶テレビプラズマテレビHDDレコーダーこれのチャームポイントは「上と下の揺れかたが同期してないときはリロードしてください」ですw。最終的に思ったんですが、単純に大きなアニメGIFを背景において、paddingを設定すればよいのではないかと思いました。この手の画像合わせのレイアウトは、IEでなかなかうまくいかないので、これもどこかずれていたり、隙間があいているかもしれません。FireFoxではちゃんとでているのですが、IEだと画像サイズの制約だと思われる原因で、ずれることがしばしばです。とりあえず、ワールドカップな気分だけでも伝わればよいかなぁと思ったんですが、いかがでしょう。代表色を意識したのですが、色がもうちょうっと濃いほうがよかったのではと、後から思いましが。色を変えるのはさほど難しくはないのですが…。あぁ、やっぱだめすぎだorz
2006/05/24
コメント(4)
すっかり、更新されず放置されているこのブログですが、比較的ばれないようにトップをいじったりしております。最近、ホームページをライトリニューアルしようといじっていたら、泥沼にはまってしまいますた。 GWに東京に泊まるならF:新宿・中野・杉並の施設一覧新宿あたりは交通の便はよいB:新橋・汐留・お台場の施設一覧東京湾が見える所がいいかもC:赤坂・六本木の施設一覧赤坂近辺は豪華なホテルが多いかも舞浜・船橋・八千代・柏の施設一覧ネズミーランドwの近くがいい?千葉市(千葉市街・幕張) の施設一覧幕張にはホテルが多い。TDRも近いし川崎市内の施設一覧川崎は羽田から近いから便利横浜市内の施設一覧横浜もいいところがいっぱいある ボックストラベル格安航空券やJR券を取り扱い 周波数表のFM放送局のところにコミュニティーFM局が入っていなかったので追加を試みたのですが、気がついたら185コもあったんで放送局名を入れるだけでもかなりはまり、周波数をいれて、地域をいれるのでかなり時間がかかってしまいました。なんとか、追加が終わったんですが、某ショップのURLが変更されたらしく、かなりの画像がDeadされしまい、修復にかなり時間を費やされ、他のリンクも確認して、さらに新しいリンクをかなり追加してと、みためはほとんど変わらない割にはかなりの労働を強いられたリニューアルとなってしまいました。そんななか、ブラウザのブックマークを整理していたところ、まったく更新されていない存在すら忘れていた自分のブログをハケーンw。とりあえず、一度潰して、おそらく更新しないと思われるが、いちおう、新しいブログを立ち上げておいたw。ここブログの更新頻度をもっとあげてからにしろって感じですがw。今度は、埋もれないところにブックマークしておいたので、忘れることはないだろう(書き込みするかはまったく別問題だが)。気になると きりがないかも ホームページ
2006/04/10
コメント(0)
ちょっと前のネタで、DIVの指定がおかしいという自己コメをしたんですが、そこでネタにしますと書いてしまったので、DIVでfloatを使う時の注意事項を書きたいと思います。たしかにあの時の表示がおかしいのは、過ちであるのですが...まずは、DIVタグでfloatを使って画像を寄せる例です。※本来はIMGタグにfloatを書けばいいのですが、楽天のアフィリエイトはタグ変禁止なので、こうせざるを得ません。ブラウザの表示初心者にお勧め楽天広場徹底ガイドHTML<div style="border:solid 2px green; padding:0.5em"><div style="float:left; margin-right:0.5em"><img src="..." alt="..."></div>★ここに文章★</div>HTML<div style="border:solid 2px green; padding:0.5em"><div style="float:left; margin-right:0.5em"><img src="..." alt="..."></div>★ここに文章★<br style="clear:left"></div>上の例では、clearの入れ忘れで画像が枠からはみ出してしまうものです。右のHTMLのようにclear:leftをいれるとちゃんと中に入ります。clearは、floatの終わりの位置にインライン要素を移動するのでこうなります。ただし、右側にもfloat(float:right)がある場合にclear:leftとすると左側のfloatの位置になるため、もし右側のfloatのほうが下にあったら、右側が下にはみ出すことになります。両方をfloatしているときには、clear:bothを使うとどちらか下にあるほうにインライン要素の位置が移動して、ちゃんと枠に収まります。ここまでは、HTMLでのfloatとclearの使い方ということなのですが、これとは別に「こまったちゃん」がいるのですw(前回の過ちの原因はこちらです)。HTML<div style="border:solid 2px green; padding:0.5em; background-color:greenyellow"><div style="float:left"><img src="..." alt="..."></div><div style="float:right"><img src="..." alt="..."></div><br style="clear:both"></div>ブラウザの表示ブラウザの表示どちらもおすすめです!このHTMLは先ほどのfloat:leftのDIVにfloat:rightのDIVを付け加えて、両方使っているのでclear:bothに変更しています。あとは、わかりやすいように最初のDIVに背景色が設定しています。このHTMLの表示結果はこのようになります。このブラウザの表示がなにがおかしいの?と思った人もいらっしゃるかもしれません。というのも、Firefoxだと、二つの画像のがちゃんと枠の中に収まります。しかし、IE6だと、1行分の高さしか枠が表示されずに画像がはみ出します。この例では、ありがちなパターンとして、floatをleftとrightを両方にしていますが、どちらかだけでも同じことがおきます。なぜそうなるのかの正確な理由は知らないのですが、現象からすると外側のDIVの中に書いた「<br style="clear:both">」という指定がIE6さんにはうまく伝わっていないようです(あえてバグとはいいませんw)。次のブラウザの表示は「<br style="clear:both">」の後に文章を入れただけですが、IE6でもちゃんと枠が下に下がってくるのです。※FireFoxと書きましたが、Opera8.5でもFirefoxと同様に表示されます。これを回避する方法はいくつか思いついたのですが、ちょっと強引で申し訳ありませんけど、Firefoxでも害がなく、HTML的にもあまり矛盾がでないように次のようにしてみました。HTML<div style="border:solid 2px green; padding:0.5em; background-color:greenyellow"><div style="float:left"><img src="..." alt="..."></div><div style="float:right"><img src="..." alt="..."></div><div style="clear:both; margin:0; padding:0"></div></div>ブラウザの表示文字数制限のためアフィリが控えめw
2006/03/14
コメント(0)
みかちゃんフォント」を使おうというお話です。前にこのねたを書いたんですが、消してしまったようなのでもう一度書きます。手書きフォントでブログを書くとちょっと日記らしくなっていいですよ。Panasonic DVD-LX97ワンセグ(地上デジタル放送)チューナーを搭載したポータブルDVDプレイヤー。3/15発売(予約受付中)パナソニック ワイヤレスモニター付テレビドアホン VL-SW102AKドアフォンがカラーモニターつきでワイヤレス。録画やボイスチェンジャ機能もあり。紅白まんじゅう”小”2個入りアドビシステムズAdobe Photoshop Elements 4.0 日本語版 Windows版 乗換え・アップグレード版画像編集といえばPhotoshop。アドビ製品だけでなく、他社の画像編集ソフトからの乗換えもできます。釈お酌ガンダムヒロインシリーズ17 マリュー・ラミアス 1/7ポリストーン製塗装済み完成品フィギュア ...「みかちゃんフォント」の紹介です。みかちゃんフォントは、みかちゃんが手書きで書いた文字をフォントにしたもので、仮名や数字はもちろん漢字もすべて登録されています(全部手書きしたとは...♭)。このフォントは、フリーに使うことができるので、ホームページの素材などに使えます。みかちゃんフォントを使うには、みかちゃんフォントのホームページにいきます。「ダウンロード」のページにいって、ファイルをダウンロードします。WINDOWS用やMAC用があるので、自分の使っているOSのファイルをダウンロードしてください。「つかいかた」のページにいくと、ファイルの解凍の方法やフォントのインストール方法が書かれていますのでやってみてください。もし、インストールがうまくいけば、この記事をブラウザで見るとみかちゃんフォントで表示されるはずです。ただ、残念なことにこの記事のようにみかちゃんフォントで表示するように設定しても、見るほうにもインストールされてないとみかちゃんフォントでは表示されません。誰でも見れるようにホームページを「みかちゃん化」するには、みかちゃんフォントで画像に文字を書いて出すしかありません。「HPそざい」のページに行くとみかちゃんフォントを使ったボタンがあるので、その画像をダウンロードしてホームページに使うのもいいかも知れません。もちろん、Photoshopなどを使って自分で画像化して素材にするものOKです。ちなみにみかちゃんフォントをインストールしている人だけにしか見えませんですが(入れてない人には普通通り表示される)、ブラウザでみかちゃんフォントで表示させるようにするには、<div style="font-family:みかちゃん-P,みかちゃん_o-P">★ここに文章を書く★</div>というふうにすると、まとめて指定できます。部分的に指定したいときには<span style="font-family:みかちゃん-P,みかちゃん_o-P">★ここに文章を書く★</span>とすればよいです。‰文字を大きくしてみたがデカすぎたか?
2006/02/28
コメント(1)
相変わらず、更新頻度低ですが、ひさびさにHTMLネタでも書いてみようかと思います。最近、めっきりHTMLを書いてないので忘れかけているので、思い出しつつかいています。IBM ホームページ・ビルダー10 ブログにも対応したHTML作成ツール。初心者にもうれしいガイドブック付き。「レイアウトにTABLEタグを使わない」とポリシーにもとHTMLを書いてきたのですが、果たしてそれがBESTなのかというのがちと疑問に思うところがあり、ネタを書いてみようと思い立ったのです。ところで、レイアウト的なTABLEタグとDIVタグの違いとは...次のような感じTABLEタグは棚棚というよりロッカーみたいかな?DIVタグは箱箱の中の箱 箱がある箱箱の中の箱iMac CoreDuo 1.83GHz 17inch MA199JAIntelプロセッサでパワーアップしたiMac。税込148,890円アップルコンピュータ iLife '06iWebでブログやPodcastも作れるようになったiLife'06。※ Mac OS X v10.3.9以降で動作オリジナルカラーのVAIO typeFソニースタイルオリジナルカラーモデル。色は、ラズベリーレッド、ホワイト、スカイブルー、オリーブグリーンの4つ。決定的な違いは、TABLEタグは必ず縦と横の境界線が一直線になり、DIVタグの場合は、どうにでもなる(サイズをそろえれば、TABLEタグのようにもなる)ということになります。しかしながら、DIVタグでTABLEタグと全く同じになるなるか?というと、簡単にはいきません。例えば、ブラウザのサイズを小さくしたり、文字を大きくすると、表の中身が下に伸びて表全体も下に伸びます。TABLEタグの場合、どんな時でも縦横がそろいますが、DIVタグの場合、縦か横のどちらかはいいのですが、両方同時(2次元的というのか?)に大きさを維持するのは非常に困難です(絶対無理とはいいませんが)。ところで、なぜゆえにTABLEタグでレイアウトするのがよろしくないか、というひとつの理由としては、そもそもHTMLはブラウザで閲覧することが主に使われているのですが、最近ユーザビリティという観点から音声ブラウザでも読み上げることも求められつつあります。音声ブラウザの場合には、TABLEタグは本来の意味の「表(ひょう)」であることをわかるように、事前に音声で伝えたり、声質を変えてTABLEタグだとわかるようにすることができるのです。レイアウトとしてTABLEタグを使うと、音声ブラウザでは混乱してしまうため、TABLEタグは本来の意味の「表」として使うことが望ましいというわけです。楽天アフィリエイトを始めようとしている方も、伸び悩んでいる方もぜひどうぞ。球界一の人気ブロガー、古田さんのブログ本。ブロガーや野球ファンも楽しめる1冊。このレイアウトは、TABLEタグを使っています。しかし、縦方向(列)には商品画像、商品説明が並び、横方向(行)には商品が並ぶようになっていて、本来の表の意味からは脱していません。この場合、音声ブラウザだと、商品画像のALT、商品説明という順番でそれぞれの商品で読み上げます。DIVタグでも同様に読み上げますが、表であることがわかっているほうが、音声ブラウザ上ではわかりやすくなるはずです。すなわち、TABLEタグでレイアウトしても、表として意味があるのであれば、DIVタグよりも優れているということになるということになります。単純にレイアウトだからといって、DIVタグにするのではなく、TABLEタグとして並べてもおかしくないのであれば、むしろ積極的にTABLEタグを使ったほうがよりよいHTMLとなるではないかと思うのです。書き慣れないと時間がかかるなぁ
2006/02/26
コメント(1)
HTMLでセンタリングするにはCENTERタグという便利なものがあります。しかし、CENTERタグはHTML4では非推奨となっていてスタイルシートに置き換えることが望ましいとなっています。ホームページビルダーV10ブログ対応になったホームページビルダー。これで比較的簡単にブログでレイアウトできます。ポータル、プロバイダ別blogデザインカスタマイズ事典CSSで中央寄せするには「text-align:center」と「margin-left:auto; margin-right:auto」で指定する2つがあります。この2つの方法は中央に表示はするのですが、意味が異なります。難しいいい方をすれば(わからなくてもへこまないでくださいね、後で説明しますから)、「text-align」はそのブロックレベル要素に含まれるインライン要素を中央寄せし、「margin」のauto指定は、ブロックレベル要素そのもの中央に寄せるものです。この説明でおわかりなら、以下を読む必要はありません。スタイルシートでレイアウトを存分にお楽しみくださいw。で、よくわからなかった人には、実際に表示させてみますので、見てみてください。まずは、text-alignです。HTMLソース<div style="text-align:center">今日の天気<br>晴れ<br><img src="..." alt="..."><br></div>ブラウザ表示今日の天気晴れこれはおわかりだと思いますが、改行(BRタグ)までの文字列と画像が中央に寄っています。「text-align:center」は、DIVタグの中にある文字列や画像が中央寄せされるということです。では、TABLEタグにtext-alignを設定したらどうなるかというと。HTMLソース<table border="1" style="text-align:center"><tr><th>今日の天気</th><th>明日の天気</th></tr><tr><td>晴れ</td><td>雪</td></tr></table>ブラウザ表示今日の天気明日の天気晴れ雪このようになります。表の中身に表示されているテキストは、中央寄せされています。しかし、表は左に寄っています。TABLEタグは何も指定しないと左に寄るようになっているからです。では、次にmarginの左右をautoの設定にしてみます。HTMLソース<table border="1" style="margin-left:auto; margin-right:auto"><tr><th>今日の天気</th><th>明日の天気</th></tr><tr><td>晴れ</td><td>雪</td></tr></table>ブラウザ表示今日の天気明日の天気晴れ雪予想されていた通りだと思った人もいるかと思いますが、今度は、表が中央に寄っています。しかし、中の文字列は左に寄っています。文字列も何も指定しないと左に寄ります。marginの左右のauto設定は、表などの全体が中央に表示されるということです。違いがおわかりいただけたでしょうか?先ほどの難しい説明の補足をすると、「インライン要素=文字列、画像」「ブロックレベル要素=表(TABLEタグ)」ということになります。DIVタグはブロックレベル要素を定義するということをご存知かと思いますが、DIVタグにmargin左右をautoを指定すれば、中央寄せになります。ただし、DIVタグやH1などの見出しダグなどは、横幅の指定をしないと左右いっぱいの大きさになるので、marginをautoにしても見た目は何も変わりません。HTMLソース<div style="width:150px; border:solid 1px pink; margin:0 auto 0 auto"><div style="text-align:center; background-color:pink">天気予想</div>明日の天気<br>雪</div>ブラウザ表示天気予想明日の天気雪このブログでありがちな、DIVタグを使った表示ですが、最初のDIVタグは、幅を150pxに設定して、marginの左右をautoにしています。これでDIV全体は中央に寄ります。その中にある次のDIVタグは、text-alignをcenterと背景色を設定しているので、中にある文字列は中央寄せになります。タグを閉じた後は、何も指定していないので左寄せになっています。イルミネーションはどこが綺麗?
2005/12/12
コメント(2)
ブログで商品を紹介してみよう。ということでですが、ブログに商品画像を置いて文章をかけばいいんです。でも、折角なので見やすいように画像の横に文章を書いてみよう。ということです。簡単にいってしまえば、商品画像を左に表示して右に文章を書くというテンプレートということです。テンプレートといっても大げさなものではなく、3つほどタグを追加するだけです。アフィリエイトはタグ変禁止なので、コピペだけでできるということになります。アフィリエイトのリンクを作ったことのない人は「アフィリエイトのはじめかた」を読んでみてください。基本的にな流れは、「商品を探す→商品リンクをクリック→商品画像のHTMLをコピー→ブログの新規作成、編集ページで張り付け」だけです。まずは、ブラウザで表示させるとこんな感じになります。 ブラウザ表示詳解HTML & CSS & JavaScript辞典改訂版は、HTML4.01のタグ一覧、CSS2のスタイル一覧とJavascriptのオブジェクト、関数一覧が載っています。Javascriptのところでは、DOMの使い方の説明があります。ある程度HTMLを使ったことがある人がタグを探すのに使うときや、スタイルシートを使ってみようとするときには便利な本です。HTMLのサンプルやブラウザ表示もあるのでタグの使い方がわかりやすくなっています。IEとFireFoxでの表示例やOpera、Safariの対応表がありますので、違うブラウザでの表示が気になる人にもおすすめです。私もこれを使ってHTMLを作成しています。かなりぼろぼろになってきてしまいましたが(^^;このHTMLソースのテンプレートです。★★★…★★★のところを置き換えてください。残しておくと表示されますよw。商品の説明などの文章のところは、普通にブログを書くつもりでよいです。上のブラウザ表示では、テキストリンクも貼ってます。いろいろアレンジしてみてください。HTMLテンプレート<div style="float:left;margin-right:1em">★★★画像リンクのタグと置き換える★★★</div>★★★ここに商品の説明や感想を書く★★★<br style="clear:left">ブログへ登録する前には、ちゃんとプレビューで確認してみましょう。改行の位置など気になるようでしたら調整してください。また、文章に文字装飾をタグ使ってみるのもいいかもしれません。アフィリエイトでポイントをゲットするには、まずは説明や感想の文章が大切だと思いますので、いろいろ工夫してみるといいかもしれません。HTMLのタグを知らなくても、よい文章が書ければOKでしょう。ヘリコプターで遊覧飛行札幌市内X’masナイト遊覧大阪USJベイエリア・X'mas遊覧ヘリナイトツアーズ新宿(12月)ヘリ・ツアーズ銀座(12月)シンフォニーで初日の出クルーズ 2006年元旦大人:8,400円(税込)子供:4,200円(税込) 格安国内航空券ボックストラベル東京⇒札幌 往復限定ANA 激安航空券 19,900円~東京⇒沖縄(那覇) 往復限定ANA 激安航空券 24,900円~東京⇒関西 往復 激安航空券 スカイマークエアラインズ 21,400円~インフルエンザに気をつけよう
2005/12/09
コメント(0)
SEOとかそういう前にまず、「あなたのダグは正しいですかぁ?」ということで、W3CのMarkup Validation SerivceでHTMLが合っているか確かめてみた。タグがちゃんとしてないと、クローラーが回遊できないですからねぇ。ナショナル NA-VR1000温水ジェット泡洗浄で菌もにおいも落とす。低温除湿で上質乾燥洗濯8kg 乾燥6kgサンヨー AWD-GT961Zバイオ・スチーム洗浄で汚れを浮かして落とす。塩で作るα電解水で市販の漂白剤並みパワー。洗濯9kg 乾燥6kg東芝 TW-130VB洗い30dB、脱水42dB、乾燥40dBの低騒音。4.5kgの洗濯が約2時間で仕上がる洗濯8kg 乾燥6kgシャープ ES-HG90-A洗い33dB、脱水40dB、乾燥38dBの低騒音。イオンコートで雑菌から衣服を守る。洗濯9kg 乾燥6kg日立 BW-D7FVクリーミー洗剤液と温風で汚れを落とす。即乾ビート乾燥のビートウォッシュ[スリム]洗濯7kg 乾燥5kgというわけで、とりあえず、トップページをチェックしてみると...ダメだしがでるでるw。だめじゃんと思ってみて見る...タグ閉じ忘れ..うぅなさけないorz。描画が変わらない「<a name="...">」だ。気がつかんなこれは、埋もれてるしw。お次ぎは...TABLEタグ?なんでやねん(注:レイアウ<中略>わないw)。と思ったら、Infoseekの検索窓だ。よく見るとTRタグとTDタグの入れ子がおかしい。なんだこれ?しょうがないので直す。おぉ、ダメ出しが消えた。ロゴ貼っていいっていわれた(貼らないけどw)。別のページをやってみることにする。今度は...あっ、さっきと同じだw。Aタグの閉じ忘れ(元ネタいっしょだなw)。そんで、お次ぎは...Aタグだけどhrefだ。おぉ「&」だ。パラメタをつなぐやつ。HTML4.01だとだめなのか...。そういえばそうだったねぇ。XMLのおかげですか...まぁいいかこのくらいなら、ブラウズでもクロールでも問題なかろう(それもアフィリだから直せんしw)。そんでもってその次は...うぅ、IMGタグの altなし?えぇぇ、そんなことはないはず。絶対そんなミスはありえない。それもタグにwidthとheightが書いてある...(注:自前の場合、サイズの類いはスタイルシートにする)これは?あれか?あぁアフィリのバナーだね。でもだ、だとしてもだ、ALTがないIMGタグですかぁ?許せない。「肉」の入っていない「ビーフカレー」ぐらい許せない。でもこんなことぐらいで事務局に言ったら、「うざいヤシは『破棄』」とか言われたらやなのでやめておこうw。そうそう、世の中なんて「正しい≠良い」ことなんていっぱいあるじゃないの。そういうもんなんだって...今日は、ちょっとだけ雪が降ったらしい
2005/12/06
コメント(4)
ブログでスタイルシートを2つ追加しました。ブログネタからコピろうかと思ったんですが、結局ほとんど書き直しました。ハローキティUSBフラッシュメモリーキャラクタロゴのネックストラップ(ミニマスコット付)。128MBWin/Macなどで使えます。恋する気持ち/YESmihimaru GTペットボトル加湿器シーシーピー KX-105PAペットボトルがタンクになるアロマ加湿器。LEDが水を照らして光ります。内容的にはそんなに難しくはないので、よかったら見てください。タイトル付きボックスいつも使っている、こんな感じのボックスです。これは目立ちやすいので結構よく使います。タイトル付きボックスは、このブログでよく登場しているものです。ブログでなくてもホームページのレイアウトにもよく使います。TABLEタグを使うよりはすっきりしてると思いますが、2段にしたりするとごちゃごちゃしてきます。仕方がないですが。もうひとつは、画像に額縁みたいな枠をつけるフォトフレーム風画像枠です。これはTABLEタグを使ってます。レイアウトのためというよりも、装飾のために使ってます。DIVタグでやってもできないことはないのですが、TABLEタグのほうが楽そうなのでそうしました。テーブルのセンタリングや、横に2つ並べるためのサンプルとしても使えると思います。TABLEタグを使ってテーブルを横に2つ並べるとタグがすごいことになりますが、DIVタグで並べたほうがすっきりしてるはずです。お魚も結構高いのね
2005/11/28
コメント(0)
全19件 (19件中 1-19件目)
1