ホームページの作成に関する気になったことや、自分のためのメモ書き(?)を書いています。 どこかに記録を残しておかないと、やろうとしていたことを忘れてしまうので…。

■　タダでいいのか?!と思うサービス　■

特にネタもなく、フラッとサイトを訪問してみました。
しばらく暇な時期が続いたので、このサイトがガラッと変わるような準備をしていたのですが、仕事が忙しくなってしまったので(喜)、それも中途半端になっている状態です。
部分的に公開してもいいのですが、まだ納得いくところまでではないので、このまま…ん〜、春以降まで延期となりそうです。
内容的には、初心者向けよりも、中〜上級者向けの内容なのですけどね。

ところで、ネタもなく来たとき、w(￣o￣)w オオー！ と忘れていたことを思い出しました。
トップページの左下に、各検索エンジンがいつ来たのかがわかる表示を追加していたのです。
私がサイトを更新してから、検索エンジンが内容を更新してくれるまで…が気になったから。。
今回特にサイトの構成を変えたから、googleやyahooで来られた方には、リンク切れが生じてしまう状態になっていたのです。
まぁ、トップページに検索エンジンが来ても、下位のディレクトリまで見てくれるとは限らない(少し時間がかかりました)ので、これもアテにはならないかもしれないけど、まぁ「来てるんだなぁ〜」的なことはわかると思います。
前置きは長くなりましたが、この検索エンジンがいつ来たかがわかるサービスを無料でしてくださっているのが、「ボットチェッカー」 http://www.botchecker.com/ です。
かゆいところに手が届くサービスなのに、無料なんて、なんて有難いことか!!
シンプルでわかりやすい表示もgoodですよね♪
表示スペースに空きがあったら是非どうぞ

2008/11/04(Tue)

■　フォントについて。　■

このサイトでHTMLやCSSのページにアクセスが多いのは納得(?)できるけど、意外と多いのがFONTのページ。
特に、Mac→Win変換あたりに多いようです。
やっぱり、見た目にこだわるのなら標準でインストールされているフォント以外のものが使いたくなるものですよね。
私自身は、一時期物凄く探し歩いて使いまくっていたことがあるのですが、最近ではその中でお気に入りのものばかり使っているので、最近は全くフォント探しの旅に出ることもなくなりました。
やはり、デザイン関係のものとなると、Macユーザーが多いせいか、Win用のフォントがなかったりします。
「え〜、ないのぉ〜??」と諦めてしまうのも悔しいので、あれこれとWin用に変換する方法はないか…と探していたことを思い出します。
このサイトにも変換に必要なツールにリンクを貼っていたのですが、どうやらリンク先が古かったようです。
変換が上手くいかなかったり…することもありますが、変換出来ることもありますので、頑張ってみてくださいね。
上手くいくことを祈ってます

2008/09/18(Thr)

■　とっても便利♪　■

海外の素材を配布しているサイトに行ったところ、左側にあるメニュー部分の項目にマウスが重なると、そのページにある素材が表示されるのです。
これって、項目をクリックしてみないと何があるかわからない…といった素材屋さんにあったらとっても便利ですよね。
国内の素材屋さんのサイトにも色々と行きましたが、このような工夫がしてあるところに出合ったことがありません。
ポップアップ表示がされるのは「sozai-r」さんのテンプレートの一覧画面にも同様の仕掛けがしてあります。
ポップアップ表示させる画像を用意し、JavaScriptを使ってマウスが重なったとき「onmouseover」で表示させるのです。
海外のサイトはコチラ↓
http://www.iconarchive.com/category/animals/water-icons-by-klukeart.html
他のサイトにも同じような仕掛けがあるところが多く、とっても探しやすくて良かったです

2008/08/25(Mon)

■　表示方法を変える　■

当サイトでは、CSSで文字のサイズをピクセル指定としています。
したがって、IEのツールバーにある「表示」→「文字のサイズ」を変更しても、文字のサイズは変わりません。
しかし、他にも表示方法を変更するやり方がありますので、ここで御紹介しておきます。
IEのツールバーにある「ツール」→「インターネットオプション」を選択し、「書式選択」にある、『Web ページで指定されたフォント サイズを使用しない』にチェックを入れると、上記の「文字のサイズ」より文字の大きさを変更できるようになります。
そのほかにも『Web ページで指定された色を使用しない』『Web ページで指定されたフォント スタイルを使用しない』のチェックがありますので、好みに応じて変えることができます。
また、CSSに書かれている全ての内容を変えたい場合には、「インターネットオプション」の中にある「ユーザー スタイルシート」の『自分のスタイル シートでドキュメントの書式を設定する』で、個人で作成したスタイルシートを指定することも可能です。
その他のブラウザでも同様の機能があると思うのですが、調べておりませんので割愛させていただきます

2008/08/06(Wed)

■　CSSのススメ3　■

↓にある「CSSのススメ」で、アイコンを背景にする方法を紹介しているのですが、アイコンも表示したいし、背景に画像も表示したい場合はどうするの??…という質問が来ました。
ん〜、<DIV>にアイコンを背景として指定しているので、<DIV>を入れ子にしてやれば出来ると思います。
ついでに、下と右にグレーのラインを入れて、ちょっと見映えよく(謎)してみました。
こんな感じ。。
ちなみに、image001.gif はアイコン、image002.gif は背景画像です。

セール情報

<DIV style="background:url(image/image002.gif); border-bottom:#999999 1px solid; border-right:#999999 1px solid;">
<DIV style="background:url(image/image001.gif) no-repeat left center; padding:5px 5px 5px 70px;">セール情報</DIV>
</DIV>
borderの指定が出てきたので、またまたついでですが、borderを重ねることによってグラデーションにすることが出来ます。
これも画像を使わない方法として利用できそうですね。

<DIV style="border-bottom:#ff00ff 1px solid"></DIV>
<DIV style="border-bottom:#ff33ff 1px solid"></DIV>
<DIV style="border-bottom:#ff66ff 1px solid"></DIV>
<DIV style="border-bottom:#ff99ff 1px solid"></DIV>
<DIV style="border-bottom:#ffccff 1px solid"></DIV>
<HR>で、水平線を入れることが出来ますが、こちらのほうが色も自由に出来るのでオススメかな

2008/08/01(Fri)

■　私ではないのです　■

サイトの内容とは関係ないのですが。。
これまでポロポロと質問が来ていて、また同じ質問が来たのでココで答えておこうかと思います(書くところがないし…)。
Yahoo!のオークションで「tagland」さんという方がいらっしゃる(googleなどで「tagland」を検索すると出てきます)のですが、これは私ではないのです。
サイト名ではオークションに参加しておらず、サイトとは全く関係のない別の名前で参加しております。
最近はほとんどオークションには出没していませんが、そのうちまた気が向いたら参加しますので、もし御縁がありましたら宜しくお願い致しますネ♪

2008/07/31(Thr)

■　CSSのススメ2　■

左のメニューにある上のあたり、 のところが、マウスオーバーで違う色に変わることにお気づきでしょうか。。??
小さいからイチイチわからないか。。
こういったマウスオーバーで画像が変わる…というのは、JavaScriptを使うのが多く見受けられるのですが、CSSでもマウスオーバーの画像を変えることができるのです。
リンク部分の装飾はHTMLタグでも出来ますが、CSSのほうが設定出来る項目が多いので(色を変えたり、アンダーラインをつけたり、枠線をつけたり…などなど)、わりと使われている方が多いのではないでしょうか。
その中に、↓の項目の解説と関連して、background に画像を指定してやります。
まず、最初に表示させるアイコンは、
A {background: url(最初に表示させる画像のURL) no-repeat left center; }
マウスオーバーで変えたいアイコンは、
A:hover {background: url(マウスオーバのときに表示させる画像のURL) no-repeat left center; }
とします。
no-repeat … 繰り返しなし
left … 左側
center … 垂直方向の行揃え
の指定となります。
そのほか、リンク部分の背景色の指定など…色々できますので適宜指定してくださいね。

2008/07/29(Tue)

■　CSSのススメ　■

今回のリニューアルにあたり、CSSの使用比率を上げてみました。
左のメニューにあるアイコンや、共通する部分のアイコンはCSSで指定しています(imgタグは使っていません)。
マウスで画面上をズラズラ〜ッと範囲指定しても画像は選択されませんし、画像の上で「右クリック→画像を保存」としようとしても、保存できません。

タイトル部分にある は、タイトル部分に id名 または class名 をつけて、cssでは、
id名 または class名 { PADDING-LEFT: 20px; BACKGROUND: url(アイコンの名前) no-repeat left center; }
と指定します。
PADDING-LEFTは、アイコンの幅の分だけズラしてやります(そうしないと画像とタイトルが重なります)。
これで同じ id名・class名 の部分には同じアイコンが表示されることになり、リニュするときにはcssファイルを修正するだけでアイコンが全部変わってくれる…という、有難い仕組みなのです。

おぉ。。解説サイトっぽい「memo」が書けたゾぉ

2008/07/26(Sat)

■　見つけたサイト　■

色々と素材屋さんを巡ったわりには…大して変りのないシンプル（殺風景ともいう…）なものになりました。
「いいなぁ」と思う素材は沢山あっても、雰囲気に合わないなぁ〜と断念したものが沢山あります。
そんな中、「マヂ!?」と驚いたサイトがあります。
トップページやここの↑にあるイラストを書かれているサイトです。
その名前も「ソザイジテン」。。「素材辞典」の間違い??と思って訪ねてみたところ、「素材辞典」は有料で写真がメインですが、こちらはそのイラスト版で無料（フリー）です。
商用利用可というのも凄いですね。。このイラストなら使われるところも多いのではないでしょうか。
当サイトのLINKにもリンクを貼らせていただいてますが、一応コチラにも → 「ソザイジテン」
こちらは「ビジネス・オフィスシーン」です。他に「女性編」「幼稚園・学校編」もあります。
そちらへはサイト内にバナーがありますので、そこから移動してくださいね。
もう1つ…「赤ちゃん・幼稚園・小学校」の素材がメインなのですが、こういった雰囲気の素材はなかなか見つからないので、特に使うわけではありませんがお気に入りに入れたところがあります。
後で知ったことなのですが、sozai-r さんでランキング1位になっていました。。やっぱりね〜といった感じです。
ちなみにこちらは商用利用は有料みたいです（確認してみてくださいね）。
　　

2008/07/22(Tue)

■　続けて欲しかった　■

…まだサイトのリニュ前ですが、テストを兼ねて。。
サイトのリニュのため、素材屋さんなどを改めて訪問してみましたが、閉鎖しているところがいくつかあって、寂しい限りです
サイトを閉鎖していたら、素材を使ってはいけないのかな??…まだ沢山使ってますけど。
他に、このサイトを開設してから数年は「ビットマップ・フォント」に物凄くハマって、フォントを配付されているサイトを毎日巡っては「キャー♪カワユイ」「メチャかっこいい!!」と喜んでいたものです。。
「カワユイ」「かっこいい」と思っても、実際に使うのはそんなになくて毎回お気に入りのものばかり使っていたりします。
そのお気に入りのフォントを配付しているサイトも閉鎖していてググってみても、跡形もなく引っ掛からなくなっています。
色々事情はあるのかもしれませんが、更新しなくてもいいから続けて欲しかった。。と思ってしまいます。
このサイトもなんだかんだ…といって6年経ちました。。あまり更新してませんけど
来てくださる方がいるので、とりあえずまだ続けてみようと思います。

2008/07/20(Sun)