WEBデザインを勉強中 - デザイナーを目指して -

約半月ぶりの更新です。

2007-11-24T14:28:01Z

約半月ぶりの更新となります。更新が滞っており大変申し訳ございませんでした。体調が悪いとまでは、いきませんが重だるい日が続いており、仕事から帰ってからも仕事に必要な知識をつけるのに手一杯でした。しかし約半月の間、ブログを見にきてくだっさていた方には大変、失礼をいたしました。 RSS 用の XSL を公開してみる ]]>

秋も深くなりましたね♪

2007-11-06T13:37:22Z

秋も深まって、これから紅葉がいい時期になりますね。紅葉が綺麗に見れるのは、近畿では、京都とかなんでしょうね♪ 最近、男爵イモを大量にいただいたので、美味しい、じゃがバターを作りたいと思い、作ってみるのですが中々、納得いくものができませんね。でも、ジャガイモ好きなんですよね～

一週間ぶりの更新です。

2007-11-05T13:43:42Z

お久しぶりです。トモちゃんヌです。めっきり寒くなりましたね～。僕は、季節の変わり目はちょっと体調が良くないので、ここ最近は、会社から帰ってきたら、会社の調べ物をするのが、精一杯で更新が滞ってしまいました。御免なさいです。今日から、更新を再開しますので、よろしくお願いします。 ]]> IFRAMEの高さ可変

バイオハザード

2007-10-27T15:58:28Z

珍しく連続で記事投稿♪ 今日は、関西では、日曜洋画劇場でバイオハザードを放映します。上のイラストは、何年か前にファンイラストとして描いたものです。以前は、Photoshopでよく絵を描いていたのです。ちょっとパソコンのデータを整理していたらでてきたので、バイオが放送されるし、ちょうど良いからアップしちゃえ、ってな感じでアップしました。バイオは、ゲームのほうは、1しかやったことないのですが当時は、怖かったですね。初プレイのときは、水の中にいる鮫が無敵とは、しらず何度丸呑みされたことか… まぁ、こんな記事をかいてますが、映画は観ません。明日は九時から、さんまと長澤まさみが出演しているハタチの恋人を観ますので（爆）

ページランクが、つきました。

2007-10-27T13:11:34Z

脳内メーカーで悪100%と診断されたトモちゃんヌです！正直ショックです！！ さて、当ブログを公開して、もうそろそろ3ヶ月になりますが、今日（昨日かな？）googleのページランクがつきました。ついたランクは、1です。でも、1でもついてよかったです。中々ランクつかなかったので、このままつかないのでは？と、思っておりました。 ]]> 無料 SEO 対策 Su-Jine

マウスｷﾀ━(ﾟ∀ﾟ)━!

2007-10-26T14:40:05Z

待ち望んだマウスが届きました！いやー快適、快適。でも、7,000円は、やっぱり高いですわ。無線ということを除けば、多機能というわけでもないですからねぇ。ところで家では、長らく無線マウスを使っているのですが、会社では、有線マウスを使っています。これが、また肩が凝るんですよね。 http://aska-sg.net/ht_retouch/index.html]]>

DOCTYPE宣言

2007-10-24T14:17:34Z

今、仕事で悩んでいることがあります。今、DOCTYPE宣言が入っていないサイトがあって、それにDOCTYPE宣言を入れるか入れないかを考えているのです。 DOCTYPE宣言を入れることは、SEO的にも良いことには、間違いないのですが、DOCTYPE宣言を入れる=SEOに良いわけではなく、DOCTYPE宣言を入れて、それに従った適切なマークアップをする=SEOに良いになるわけです。 http://www.animegif.net/tips/html/doctype-html-public.html]]>

アクセスアップの基本は、サイトの登録から

2007-10-23T13:54:25Z

サイトのアクセスアップの基本は、サイトの登録からだと思います。ぶっちゃけ登録しなければ、SEOに取り組んでも中々、効果がでないと思います。僕は、この本でサイトの登録の仕方を知ったのですが、この本に書かれていることを実践してからアクセスが、上昇しました。このことから、サイトの登録の大切さを学びました。そこで今回は、三大検索エンジンに登録（推奨）できるページを紹介していこうと思います。ただし、ここでのサイトの登録で、すぐに検索に反映されるときもあれば時間が、かかる場合もあります。どちらにせよ、すぐに効果がでるわけではないので、のんびり待ちましょう♪ ]]> 、MSN　Japanから。こちらは、下記のURLから自分のブログサイトのURLを入力してください。それだけです。とっても簡単♪ http://beta.search.msn.co.jp/docs/submit.aspx 次に、Yahoo!JAPANです。Yahoo!は、任意のカテゴリーに自分のサイトを登録するのは、とても難しいのですが、検索エンジン用ロボットの巡回先に推薦のページに自分のサイトのURLを登録しておけば、Yahoo!の検索結果に表示される可能性は、でてくるので、こちらにURLを登録しましょう。下記のURLから、「検索エンジン用ロボットの巡回先への推薦」のページから受け付けています。というテキストリンクがあるので、そこをクリックし手順に従って登録してください。こちらの登録には、Yahoo!IDが必要ですので、無い方は作成してくださいね。♪ http://help.yahoo.co.jp/help/jp/search/indexing/indexing-13.html 最後にgoogleです。こちらは、下記のURLから、自分のブログサイトのURLを登録するだけです。 http://www.google.co.jp/addurl/

マウスが早く届いて欲しい

2007-10-22T14:01:25Z

マウスが、いうことを聞きまっせん。マジで困ってます。しかし、WACOMからは、商品発送のメールが、今日はきてませんでした。マジで早くきてくれ。何もできん。ブログ更新するのが、精一杯です。ところで、MSNという検索エンジンがありますよね。このブログも、MSNに検索してもらえるように登録したのですが、今日SE0の無料解析ツールで調べたところ、インデックス数が500件も超えてました。これ自慢じゃなくて、なんで、こんな数になるの？と不思議に思っています。インデックス数とは検索エンジンが、世界中のWEBページを記録（および整理）する行為をいい、その記録されたページの数をインデックス数と呼びます。記録されなければ、検索結果には表示されないため、いかにサイトの全てのページを検索エンジンにインデックスさせるかがSEO対策を施す上で重要なポイントとなるのですが、このブログサイト、どー数えても500ページも無いはずです。ですので、なんで500件も超えてるんだ？と首をかしげています。ちなみに、無料解析ツールは、こちらを使用してます。 SEO TOOLS β(SEOツールズ) 興味のある方は、このブログサイトを、解析ツールで見てください。MSNのインデックス数が500件を超えてるはずです。

マウスが、ぶっ壊れました。

2007-10-21T12:38:49Z

家で使っているパソコンのマウスが壊れました。クリックしても、クリックできなかったり、シングルクリックがダブルクリックになったりと、左クリックの調子が良くありません。使っているマウスは、WACOMのペンタブレットを買ったときに付属されている2Dマウスなのですが、2年間コレを使用しているのと、有線マウスを置くスペースが無い（USBに空きが無い）ので、この2Dマウスを修理するか買いなおすしかありません。しかし、この2Dマウス、買いなおすとなると結構高くネットで取り寄せで7,000円もします。年末は車の保険代を払ったりと何かと入用なので、予定外の出費は避けたいところです。しかし、自力で修理しようにも、この2Dマウスは分解できないように設計されているので、自力でなおすことができないのです。う～…仕方ないですが、買いなおすことにします。有線マウスを置くスペースも無いし、買いなおしたほうが、早そうなのですからね。でも、クリックができなくなるのも困りもんですね。この週末にも、やりたいことがあったのにクリックがうまくできないだけで、全然はかどりません。早く新しいマウス届いてほしいです。

ベタ打ちでのコーディング

2007-10-20T14:43:48Z

なんか急に寒くなってきましたね。地元だけなんでしょうか？季節の変わり目ですね。季節の変わり目は、体調が崩しやすいので、皆さんも風邪とかには、気をつけてくださいね。僕は、すでに体調を崩しています。体調を崩していても仕事は休めないので、会社には行ってました。最近はコーディングの仕事をしていたのですが、楽天ショップやYahoo!ショップのセールページにも対応できるコーディングをしなければならなかったのでテーブルレイアウトでコーディングです。、しかもいっさいCSSは無しなので、HTMLのみのベタ打ちで仕事をしなければならなかったのですが、結構ひさしぶりだったので、できるのか心配でした。でも意外と忘れてないもので、できるもんですね。積み重ねたものは何かしら、覚えてるもんです。

寒くなってきましたね。

2007-10-17T13:23:37Z

朝、早く出社しているのには、もう一つ理由があります。これは、個人的なことですが満員電車が苦手です。人ごみが嫌いというのもありますが、何より、朝から回りに気をつかうというのが本当に嫌です。たま～に、勘弁してくれと思う状況があってですね。気をつかいすぎて、それだけで1日やる気がなくなります。それなら、空いてる時間に行ったほうがましだと思うようになりました。地下鉄は、諦めてますが…乗ってる時間が短いから我慢できます。朝、早く出て行くと季節の変わり目が感じやすくなります。今の時期は、寒いんですけど、朝の冷気は気持ちよくて目が冴えます。

タグの横並びメニューのカスタマイズ3

2007-10-16T14:03:43Z

上のようなメニューをよく、フッターメニューとかで見かけることはありませんか？これ見た目もよく、手軽に作成できて便利ですよね。でも、ユーザビリティの面で見ると、このやり方は、問題があります。音声ブラウザで、上のメニューを読んでもらうと、「メニュー1、棒、メニュー2、棒、メニュー3」と｜を棒と読むのです。これでは、音声ブラウザを利用しているユーザーには、不便です。このことからメニューとメニューの間に｜を使用することは、できません。でもCSSを利用すれば、この問題も解決できます。

上のメニューは一例ですが、最初のメニューと、あまり変わりはないと思います。もちろんドットの仕切りではなく、｜の様にもできます。これは、背景画像を使っています。背景画像ならalt要素もないので、音声ブラウザに余計な情報を読まれる心配がありません。 1×1pxの黒の画像を用意してCSSのbackgroundプロパティでY軸にリピートさせれば、このように見せることができます。詳しい記述は、以下を参考にしてみてください。この、やり方は、僕の独自のやり方です。もっと良い記述があるかも知れません。いろいろ試してみてください。 ]]>

メニュー1

メニュー2

メニュー3

CSSファイル ul#menu { list-style-type: none; color: #333333; margin: 0; padding: 0; border: 0; } ul#menu li { display: inline; } ul#menu li.dot-line { background-image: url(img/dot_line.gif); background-repeat: repeat-y; background-position: left center; padding-left: 7px; }

風邪ひきますた

2007-10-15T11:51:03Z

…風邪引きました… マジで、しんどいです。でも会社は休めないので、頑張っていってきました。しんどかたよ。 WEBデザインの仕事をしていると、パソコンをずっと見てないといけないので、のぼせてくるんですよね。

のwidthは200pxを指定してその直下の

寝ます！

タグの横並びメニューのカスタマイズ2

2007-10-14T04:07:33Z

タグに1pxずつの罫線をひく指定をするのですが、単純にborder指定をすると罫線が重複してしまうところがあるので、少しだけ工夫が必要です。まず
タグに上、右、下の3箇所にbrderを指定します。するとメニューの一番、左以外は、罫線がひかれます。そして、メニューの一番左に当たる
タグにclass指定をして、border-leftに罫線を指定します。CSSの記述は、以下のような感じです。 ul#sample-02 li { margin: 0; padding: 0; float: left; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-top-color: #333; border-right-color: #333; border-bottom-color: #333; } ul#sample-02 li.bolder-left { border-left-width: 1px; border-left-style: solid; border-left-color: #333; } これで、重複することもなく罫線がひかれるので、よりメニューらしく見えます。少し記述を変えれば、下のように縦型のメニューにも使えます。
これらの記述は、以下のようにします。]]>
メニュー1
メニュー2
メニュー3

CSSファイル ul#menu { list-style-type: none; color: #333333; margin: 0; padding: 0; border: 0; } ul#menu li { margin: 0; padding: 0; float: left; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-top-color: #333; border-right-color: #333; border-bottom-color: #333; } ul#menu li.bolder-left1 { border-left-width: 1px; border-left-style: solid; border-left-color: #333; } ul#menu a { text-decoration: none; color: #FFF; padding: 0 10px; display: block; background-color: #00F; } ul#menu a:hover { color: #333; background-color: #FF0; } ■縦型メニュー HTMLファイル CSSファイル ul#menu { list-style-type: none; color: #333333; margin: 0; padding: 0; border: 0; width: 75px; } ul#menu li { margin: 0; padding: 0; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-color: #333; border-bottom-color: #333; border-left-color: #333; text-align: left; } ul#menu li.bolder-top1 { border-top-width: 1px; border-top-style: solid; border-top-color: #333; } ul#menu a { text-decoration: none; color: #FFF; padding: 0 0px 0 5px; display: block; background-color: #00F; } ul#menu a:hover { color: #333; background-color: #FF0; }