2007年10月28日
珍しく連続で記事投稿♪
今日は、関西では、日曜洋画劇場でバイオハザードを放映します。上のイラストは、何年か前にファンイラストとして描いたものです。以前は、Photoshopでよく絵を描いていたのです。ちょっとパソコンのデータを整理していたらでてきたので、バイオが放送されるし、ちょうど良いからアップしちゃえ、ってな感じでアップしました。
バイオは、ゲームのほうは、1しかやったことないのですが当時は、怖かったですね。初プレイのときは、水の中にいる鮫が無敵とは、しらず何度丸呑みされたことか…
まぁ、こんな記事をかいてますが、映画は観ません。明日は九時から、さんまと長澤まさみが出演しているハタチの恋人を観ますので（爆）
2007年10月27日
脳内メーカーで悪100%と診断されたトモちゃんヌです！正直ショックです！！
さて、当ブログを公開して、もうそろそろ3ヶ月になりますが、今日（昨日かな？）googleのページランクがつきました。ついたランクは、1です。でも、1でもついてよかったです。中々ランクつかなかったので、このままつかないのでは？と、思っておりました。
2007年10月26日
待ち望んだマウスが届きました！いやー快適、快適。でも、7,000円は、やっぱり高いですわ。無線ということを除けば、多機能というわけでもないですからねぇ。
ところで家では、長らく無線マウスを使っているのですが、会社では、有線マウスを使っています。これが、また肩が凝るんですよね。
2007年10月24日
今、仕事で悩んでいることがあります。今、DOCTYPE宣言が入っていないサイトがあって、それにDOCTYPE宣言を入れるか入れないかを考えているのです。
DOCTYPE宣言を入れることは、SEO的にも良いことには、間違いないのですが、DOCTYPE宣言を入れる=SEOに良いわけではなく、DOCTYPE宣言を入れて、それに従った適切なマークアップをする=SEOに良いになるわけです。
2007年10月23日
サイトのアクセスアップの基本は、サイトの登録からだと思います。ぶっちゃけ登録しなければ、SEOに取り組んでも中々、効果がでないと思います。
僕は、この本でサイトの登録の仕方を知ったのですが、この本に書かれていることを実践してからアクセスが、上昇しました。このことから、サイトの登録の大切さを学びました。
そこで今回は、三大検索エンジンに登録（推奨）できるページを紹介していこうと思います。ただし、ここでのサイトの登録で、すぐに検索に反映されるときもあれば時間が、かかる場合もあります。どちらにせよ、すぐに効果がでるわけではないので、のんびり待ちましょう♪
2007年10月22日
マウスが、いうことを聞きまっせん。
マジで困ってます。
しかし、WACOMからは、商品発送のメールが、今日はきてませんでした。マジで早くきてくれ。何もできん。ブログ更新するのが、精一杯です。
ところで、MSNという検索エンジンがありますよね。このブログも、MSNに検索してもらえるように登録したのですが、今日SE0の無料解析ツールで調べたところ、インデックス数が500件も超えてました。これ自慢じゃなくて、なんで、こんな数になるの？と不思議に思っています。
インデックス数とは検索エンジンが、世界中のWEBページを記録（および整理）する行為をいい、その記録されたページの数をインデックス数と呼びます。記録されなければ、検索結果には表示されないため、いかにサイトの全てのページを検索エンジンにインデックスさせるかがSEO対策を施す上で重要なポイントとなるのですが、このブログサイト、どー数えても500ページも無いはずです。
ですので、なんで500件も超えてるんだ？と首をかしげています。
ちなみに、無料解析ツールは、こちらを使用してます。
興味のある方は、このブログサイトを、解析ツールで見てください。MSNのインデックス数が500件を超えてるはずです。
2007年10月21日
家で使っているパソコンのマウスが壊れました。クリックしても、クリックできなかったり、シングルクリックがダブルクリックになったりと、左クリックの調子が良くありません。
使っているマウスは、WACOMのペンタブレットを買ったときに付属されている2Dマウスなのですが、2年間コレを使用しているのと、有線マウスを置くスペースが無い（USBに空きが無い）ので、この2Dマウスを修理するか買いなおすしかありません。
しかし、この2Dマウス、買いなおすとなると結構高くネットで取り寄せで7,000円もします。年末は車の保険代を払ったりと何かと入用なので、予定外の出費は避けたいところです。しかし、自力で修理しようにも、この2Dマウスは分解できないように設計されているので、自力でなおすことができないのです。
う～…仕方ないですが、買いなおすことにします。有線マウスを置くスペースも無いし、買いなおしたほうが、早そうなのですからね。
でも、クリックができなくなるのも困りもんですね。この週末にも、やりたいことがあったのにクリックがうまくできないだけで、全然はかどりません。早く新しいマウス届いてほしいです。
2007年10月20日
なんか急に寒くなってきましたね。地元だけなんでしょうか？季節の変わり目ですね。
季節の変わり目は、体調が崩しやすいので、皆さんも風邪とかには、気をつけてくださいね。僕は、すでに体調を崩しています。
体調を崩していても仕事は休めないので、会社には行ってました。最近はコーディングの仕事をしていたのですが、楽天ショップやYahoo!ショップのセールページにも対応できるコーディングをしなければならなかったのでテーブルレイアウトでコーディングです。、しかもいっさいCSSは無しなので、HTMLのみのベタ打ちで仕事をしなければならなかったのですが、結構ひさしぶりだったので、できるのか心配でした。でも意外と忘れてないもので、できるもんですね。
積み重ねたものは何かしら、覚えてるもんです。
2007年10月17日
すっかり寒くなってきましたね。
いつも朝の6時半には電車に乗って会社に向かうのですが、寝ていると、途中の駅で、寒くて目が覚めました。冬になると朝の寝ダメができなくて朝が眠いです。
朝はえ～とか思われるかもしれませんが、早めに出て行っているのです。会社には1時間前に出社するようにしています。1時間、会社で自分の好きなように時間をもてれば、会社の流れや傾向を、ゆっくり調べられるからです。
こういうのって大事だと思ってます。自分がお世話になっている会社、人によっては、俺が会社を支えてるという人もいると思いますが、会社の流れや傾向を知っておかなければ、自分が何をすれば良いのかというのが見えてこないと思います。
何をすれば、良いのかわかっている人のほうが会社で自分のポジションを築きやすいですからね。今の会社で必要とされる人間になるために努力しています。
2007年10月16日
上のようなメニューをよく、フッターメニューとかで見かけることはありませんか？これ見た目もよく、手軽に作成できて便利ですよね。
でも、ユーザビリティの面で見ると、このやり方は、問題があります。音声ブラウザで、上のメニューを読んでもらうと、「メニュー1、棒、メニュー2、棒、メニュー3」と｜を棒と読むのです。これでは、音声ブラウザを利用しているユーザーには、不便です。
このことからメニューとメニューの間に｜を使用することは、できません。でもCSSを利用すれば、この問題も解決できます。
上のメニューは一例ですが、最初のメニューと、あまり変わりはないと思います。もちろんドットの仕切りではなく、｜の様にもできます。
これは、背景画像を使っています。背景画像ならalt要素もないので、音声ブラウザに余計な情報を読まれる心配がありません。
1×1pxの黒の画像を用意してCSSのbackgroundプロパティでY軸にリピートさせれば、このように見せることができます。
詳しい記述は、以下を参考にしてみてください。この、やり方は、僕の独自のやり方です。もっと良い記述があるかも知れません。いろいろ試してみてください。
2007年10月15日
…風邪引きました…
マジで、しんどいです。でも会社は休めないので、頑張っていってきました。しんどかたよ。
WEBデザインの仕事をしていると、パソコンをずっと見てないといけないので、のぼせてくるんですよね。
<ul>タグをつかったメニューの作成方法の続きをしたかったのですが、今日は、サンプルを作る元気がないので、次回にさせていただきます。ユーザビリティに、とても良いメニューの作成方法を公開しようと思います。
2007年10月14日
<ul>タグを使用した横並びメニューを作成方法を、紹介していますが今回も更にカスタマイズしていこうと思います。
前回のサンプルに、罫線をいれて、フォントのカラーを白に背景色を青に変更して、更にメニューっぽくしてみました。オンマウスされると、フォントカラーが黒、背景色が黄色になるように設定してます。
<li>タグに1pxずつの罫線をひく指定をするのですが、単純にborder指定をすると罫線が重複してしまうところがあるので、少しだけ工夫が必要です。
まず<li>タグに上、右、下の3箇所にbrderを指定します。するとメニューの一番、左以外は、罫線がひかれます。そして、メニューの一番左に当たる<li>タグに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;
}
これで、重複することもなく罫線がひかれるので、よりメニューらしく見えます。
少し記述を変えれば、下のように縦型のメニューにも使えます。
これらの記述は、以下のようにします。
2007年10月13日
前回、上のように<ul>タグの横並びメニューの作成方法を紹介させていただきました。
しかし、このままでは、ちょっと寂しいので、下のようにしてみました。
こうしてみると、メニューにオンマウスされればテキストリンクの色と背景色が変わるので、ユーザーが
今どのメニューを選択しているのか、分かりやすいですよね。
こんな、表現もCSSで簡単にできちゃいます。<a>タグと擬似クラスである:hoverをCSSで表現を指定することで、このようにみせることができます。
記述は、以下のようにします。これは、一例です。
2007年10月12日
CSSでWEBデザインをしていると、上記のように、よくメニューに使われるのが、<ul>タグです。
なんで、<ul>タグを使用するのかというと、理由の一つに、アクセシビリティがあります。
<p>タグで、メニューを作成するのも、見た目的には問題ないのですが、音声ブラウザによっては、例えば、「ホーム最新情報会社概要商品紹介採用情報」と区切りなく連続で読まれる場合があります。
<ul>タグでメニューを作成すれば、音声ブラウザは、「ホーム、最新情報、会社概要、商品紹介、採用情報」と区切って読んでもらえます。
また、CSSを適用しないときの見た目もあります。下記のように、<p>タグよりも
メニュー
<ul>タグのほうが、メニューらしく見えませんか？
メニュー
こういう事情により、以前からCSSでレイアウトを組む場合は、メニューは、<ul>タグで組むということが一般的になりました。
では<ul>タグで、上記のようなメニューを作成するには、以下のように記述します。これは、一例です。
2007年10月11日
よく携帯で時間があるときは、ニュースをチェックしているのですが、思わず駅のホームで笑ってしまったニュースがあります。
それが、下記のURL先にあるニュース
コンピュータで遊ぶ猫です
http://www.excite.co.jp/News/odd/00081192081684.html
可愛すぎ
2007年10月10日
以前からMacのsafariで、このブログサイトは正常に表示されるのか気になっていました。
そして、たまたま電気屋でネットに接続しているMacbookがあったので、良い機会だったので自分のブログサイトを見てみました。結果は、問題なく表示されておりました。
以前にも、ブログで書いたことがあると思うのですが、WINDOWSで画面の色を16ビットにすると、このブログのヘッダー部分が非常に見づらいものになるのです。
そのことに気づいてから、一度は、このヘッダーを撤去しようかなと思っていたのですが、アクセス解析で調べてみると16ビットでブログを閲覧している方は、非常に少なかったので、このままで良いかなと思っていたのですが、そこでMacでの表示が気になったのです。
今回Macで、表示を確認できて表示に問題もなくレイアウトも崩れていなかったのでヘッダーは、しばらくは、このままにしておこうと思います。
そろそろ、このブログも大幅にリニューアルしようかなと思うのですが、他にもしたいことがあるので中々、実行に移せません。
バナー作りも、いそいそとしています。フォントがほしーなー
2007年10月09日
WEBサイトをいじるのが楽しい今日この頃です。仕事の方は、慎重にしないと駄目ですけどね。
今日、Amazonアソシエイトプログラムを含めたバナーの作成の仕方を仕事中に思いつきました。（真剣に仕事をしてますよ。してるから思いついたのだ。）こういうアフィリエイトバナーの見せ方って良いのかなぁとは、思うのですが、嘘はついていないし、駄目だったら駄目で注意を受けるだろうから、受けたら撤去しようと思います。
とりあえず、家に帰ってきてから、いそいそと作成しています。アソシエイトの申請は、こちらの、WEBについて勉強できる本にしかしていないので、完成したら、こちらのサイトにバナーを設置します。興味があったら見にきてくださいね。
そんなに大したことではないけどアイデアって思いつくと、面白いし実践してみたくなりますよね。
2007年10月08日
WEBデザイナーを目指して、今日もバナー作りの勉強をしております。
会社の先輩が今日、すごいバナーを作っていたのですが、やっぱり数をこなさないと、納得のいくバナーというのは、作れないのでしょうね。
今は全然、上手くできないバナーですが、それでも数をこなし、ストックを増やしていけば、きっと役に立つときがくるので、頑張ってバナーを作りまくろうと思います。バナーを作成するには、ちょうど良いサイトを、作成したんだから有効活用しないと勿体無いですしね。
下のバナーは数少ない、お気に入りの一つのバナーです。バナーは、人の目を引き付ける役割が必要になりますが、これは、少しはその役割が果たせていると個人的には思っております。
あくまで個人的にですよ。
2007年10月07日
WEBデザイナーになるなら、作成できるようにならなければならない一つが、バナーです。
今の会社でもバナー作成をしなければならないときがくるので、今のうちからバナー作成の勉強をしているのですが、
全然上手くいきませ～ん
なんか、安っぽいというか、しょぼいというか。納得できるバナーが全然できません。うーん…自分で運営しているこのブログとサイトで、自主的にバナーを作成して貼り付けて、練習しようと思うのですが、見せるのが恥ずかしいですな。
とりあえず、いっぱいバナーを見て、作成しなければ上達なんて、しないんでしょうね。
明日から、見られると恥ずかしいバナーが表示されていくと思うのですが、「あー、こいつも、いろいろとあがいとんねんなぁ」と、長い目で見てください。
オイラも努力しとるんですよ。つくづく凡才なんだと、思い知らされとりますよ。
2007年10月06日
XHTML+CSSでサイトを構築する機会が増えてきていると思いますが、少し困るのが、XML宣言の記述。XHTML+CSSでサイトを構築する勉強をすると、よく目にすると思うのですが、
IE6は、XML宣言に限らずコメントをはじめとする何らかのテキストがDOCTYPE宣言の前にあると、強制的にブラウザの表示モードが「互換モード」になる。
というのが、あります。この表示モードの「互換モード」というのは、ブラウザ独自の解釈でサイトを表示するので、自分の思ったとおりにサイトが表示されない可能性があります。なので表示モードは、「標準モード」の方が望ましいので、XML宣言を記述しないようにすることが、一般的になりました。
これは、IE6が世界で最も使用されているブラウザだったからです。しかし、まだ問題があります。
2007年10月04日
このブログは、MTで組んでいますが、ブログのカスタマイズって、普通にサイトを組むより、ちょっと難しいですよね。
ブログには、モジュールなどのテンプレートプログラムがあるので、それを理解しながら、組むのは時間が、かかります。
そこで、少しだけ、カスタマイズがやりやすくなる方法を、公開します。僕なりの、やり方なので必ずしも、やりやすくなるとは、限りませんが。たいそうな方法でもありません。
やり方は、簡単です。自分のブログをブラウザで開いて、ソースを表示して、DWとかにコピーします。それから、自分の使用しているブログのCSSファイルをDWにコピーします。
スタイルシートのリンクをローカルフォルダの中のコピーしたCSSファイルに設定します。これで、ローカル上で、自分のブログのカスタマイズができ、完成したら作成したCSSファイルをブログにアップロードして上書きします。
このほうが、テンプレートプログラムが表示されないので、自分がカスタマイズしたい箇所を見つけやすくなります。
2007年10月03日
WEBデザインやホームページの知識の勉強は、もちろん。最近は、SEOやSEMの知識、アフィリエイトの知識など、色んなことを勉強しなければなりません。付け足せば、会社の仕事も、覚えなければなりません。
でも、SEOやSEMなどの知識を得るには、いい職場です。今は、自分の仕事を、こなすのに精一杯、それと会社で扱うノウハウを覚えるのに、必死です。いつか、余裕ができれば、集客の仕事にも絡んでみたいですね。
本当に勉強、勉強の日々ですが、今の会社で盗みたい技術や知識は沢山あるので、入社できて、良かったと思います。
さぁ、勉強、勉強。いつまでも勉強っす。
2007年10月02日
久々に、色んなホームページを回って個人的に気に入っているサイトの紹介をしたいと思います。
シンプルでトップのFlashが印象的なサイト
株式会社ファジィウェイ
企業サイトですごく印象に残ったサイトです。トップページのFlashの作り方を勉強したいなぁ。こういうFlashの作り方、好きなんです。
この車、個人的に好きです
DAIHATSUコペン スペシャルサイト
車のFlashサイトって多いですよね。いつかは、この車を買いたいと思っているので、このサイトを選びました。車の色を変えれるのは、普通なんですが、背景写真を変えたりできるのがちょっとおもしろいな。
2007年10月01日
勤め先の仕事が、今日になってド～ンと一気に増えましたよ。
いや、いっぱい仕事をさせてもらえるのは、いいことです。デザインの仕事は、当分させてもらえないですけど、色々と新しい発見や自分のサイトでもやってみたいことを学んでいます。
最近、<iframe>タグってよく使われてるんですかね？amazonでもアソシエイトで<iframe>タグ使ってるし。
フレームは、あんまり使用しないほうが良いと聞いていたのですが、<iframe>タグは、使い方によっては、面白いことができるので、ちょっと研究してみようかなと思います。
明日も仕事がいっぱいだ。
