CSSを使ってデザインを行っていても文法が間違っていては、レイアウトが崩れてしまうことがあります。W3Cの検証ツールを用いて正しく書かれているか確認されてはいかがですか。]]>
満点CSSを目指すならば避けては通れない道です。間違った記述をしていることはたくさんありますし、CSSの量が増えると二重に書いていることもたくさんあります。ウェブデザイナーの方もお客様のホームページをワンランクアップさせてあげてください。
参考サイト：http://jigsaw.w3.org/css-validator/
HTMLの文法確認はこちら：W3C Markup Validation Service
]]>
私のアップデート方法を紹介したいところですが、いろいろな環境でＭＴを利用されていることでしょうし、いろいろな方がアップ方法を紹介してくれていますので、そちらを参考にしてください。
問題なく動作していることがわかるまで、バックアップは残しておきましょう。また、ffftpなどを使ってアップロードする際に失敗してしまう方は、一度コマンドによるアップロードを試してみてください。きっとスムーズにいきますよ！
ユーザビリティとデザイン性を同時に満たすためには、CSSを使ってリンクをデザインする必要があります。デザインするための基礎を紹介していますので参考にしてください。
]]> リンクをクリックしてサイト内を移動しますので、リンクであることを理解してもらう必要があります。リンクの色や装飾はCSSに記述することで様々な設定を行うことができます。プロパティ要素を追加していくことによって、様々なデザインを行うことができます。a:link { プロパティ } 通常のリンク
a:visited { プロパティ } 訪問済みのリンク
a:hover { プロパティ } マウスを乗せたときのリンク
a:active { プロパティ } 選択したときのリンク
■リンクの文字色：color
a:link { color: #0000ff; }とプロパティ要素を追加すると、通常のリンクカラーを#0000ffに変えることが出来ます。カラー要素は#0000ffのような色コードとblueやredのようなシステムカラーが使えます。
■リンクの背景色：background-color
a:link { background-color: #0000ff; }と追加すると、背景色を変更することができます。background-imageを追加すると背景に画像を追加することが可能です。
■リンクを装飾する：text-decoration
a:link { text-decoration : underline ; }と追加すると、リンクには下線をつけることが出来ます。何も装飾を加えない場合は、a:link { text-decoration : none ; }のようにnoneと記述します。装飾の種類は以下のものがあります。
・none 装飾しない
・underline 下線を表示
・overline 上線を表示
・line-through 打ち消し線
・blink 点滅
・inherit 親要素から継承
■リンクの文字を太字にする：font-weight
リンクであることを強調したい場合は、太字にすることも有効です。太字はfont-weightでboldを用います。a:hover { font-weight : bold ; }と記述した場合、マウスがあたると太字に変化することができます。
作成したホームページのHTMLまたはXHTMLが正しく書かれているか確認することができるW3CのMarkup Validation Serviceを紹介します。web標準を証明することができます。]]>
W3Cとは、インターネット上で用いられる技術の標準化を目的とする団体です。W3Cの正式名称は「World Wide Web Consortium」で、 HTML, XML, XHTML, CSSなどの規格をとりまとめています。WWW技術に関わりの深い企業、大学・研究所、個人などが集まって、1994年10月に発足しました。現在では、マサチューセッツ工科大学計算機科学研究所(MIT/LCS)、フランス国立情報処理自動化研究所(INRIA)、日本の慶應義塾大学SFC研究所(Keio-SFC)がホスト機関としてW3Cを共同運営しています。
紹介している「W3C Markup Validation Service 」では、W3Cの勧告に基づいて正しく書かれているかを確認することができます。正しく書かれているということは、より多くの環境で閲覧してもらえ、シンプルなソースコードは検索エンジンのクロールをスムーズに行わせることができるためSEO対策としても効果があるといわれています。
最近はホームページも手軽に作ることができます。しかし、デザインばかりに気を取られて、間違ったソースの利用をしているウェブデザイナーも多数いるのが現状です。見た目はおいしそうなのに、味はとんでもなく不味いホームページがたくさんあります。
参考サイト：The W3C Markup Validation Service
Adress欄にあなたのホームページURLを入力してください。簡単にHTML文法を確認してくれます。エラーを少しずつなくしてweb標準を目指してください。正しく表示された際に、web標準であることを証明するバナーが発行されますのでホームページに貼り付けてみてはいかがですか。ちょっとした自慢になるのではないでしょうか。
]]>
切り抜いた被写体に影をつけることをPhotoshopで実現する方法を紹介します。影をデザインに取り入れるテクニックです。画像に影をつけてみたいかたは参考にしてください。]]>
画像をつけたいもと画像の切り抜き画像を用意します。
次に影をつくるため、新規にレイヤーを複製します。影のレイヤーを選び、編集→塗りつぶし（ブラック、透明部分の保持をチェック）。
編集→変形→自由な形にを選択。影の遠近感のために変形させます。平行四辺形をつぶした感じにすると簡単に影が作れます。影ができたらレイヤー順序を画像と入れ替えます。さらに、影をぼかします。フィルター→ぼかし→ぼかし（ガウス）。グラデーションで遠い部分の色を薄くすると完成です。
ファビコンの設置は最上位ディレクトリにfavicon.icoファイルをおきます。トップページをおいているルートです。後はfavicon.icoというファイルをブラウザが自動に読み取ってくれます。ブラウザのキャッシュの関係でしばらく表示されないことや、消したあともしばらく表示されることがあります。
GIFアニメーションを使うことや、LINKタグによって複数の異なるファビコンを表示することもできます。
デザイナーが作った画像やアイコンを紹介してくれるウェブサイト Vector 4 free.comを紹介します。フリーで使えるものや、CreativeCommons、非商用に限りフリーなどのライセンスの下で素材やデザインを提供してくれています。]]>
フリー素材をうまく利用すると、ホームページの見た目が各段にアップしますよね。
vector4free.com is a web site dedicated to free vector graphics: Adobe Illustrator AI, EPS, PDF, SVG, Corel Draw CDR files free to download - that's what you can find here. To facilitate your work all items are classified by tags. We hope that you find vector4free.com handy and friendly. Enjoy!
デザイナーが投稿した作品が紹介されているだけに、ハイセンスなものが多く見つけられます。ただし、ファイル形式がai、epsのものが多く、jpgやgifではないため、一般の方が利用する場合はファイルを開けるようにフリーソフトをダウンロードする必要があります。
デザイナーの方は反対に作品を投稿し、多くの人に見てもらってはいかがでしょうか。
]]>You can also submit your vector graphic on vector4free.com. All the vectors on this site are free for personal use, many of them are also free for commercial purpose. Still, always remember to check terms of use before using.
文中において他の文を引用する場合、blockquoteタグを用いて記述します。このblockquoteを引用符を付けてcssを用いてデザインする方法を紹介します。]]>
blockquoteで囲んだ文章を引用符で囲んだ表示に変えることができます。
<blockquote>～</blockquote>で囲むと、タグの中に書かれている文章を引用したことを表します。この引用文のはじめと終りにCSSを使って引用符をつけます。
HTML
<blockquote><p>～</p></blockquote>
CSS
/*------------引用CSS開始------------*/
blockquote {
width: 470px;
background: url(your website URL/blockquote_start.gif) no-repeat scroll top left;
padding: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 30px;
}
blockquote p {
background: url(your website URL/blockquote_end.gif) no-repeat scroll bottom right;
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
margin: 0px;
}
/*------------引用CSS終わり------------*/
widthで幅を決定していますので自由に変更してください。引用符の画像は直接リンクではなく、下の引用符画像を右クリックで保存してお使いください。
your website URLの欄にイメージ画像を保存したURLを記入してお使いください。
フラッシュファイルの中で使われているテキストを読み込みます。イメージのみの場合、現在のところは読むことができません。動画を再生するFLVファイルにもテキスト要素が含まれていないため読み込めない。
私の英語力では間違った内容を紹介する可能性がありますので最後に原文を紹介しておきます。
Q: What content can Google better index from these Flash files? All of the text that users can see as they interact with your Flash file. If your website contains Flash, the textual content in your Flash files can be used when Google generates a snippet for your website. Also, the words that appear in your Flash files can be used to match query terms in Google searches.
In addition to finding and indexing the textual content in Flash files, we're also discovering URLs that appear in Flash files, and feeding them into our crawling pipeline--just like we do with URLs that appear in non-Flash webpages. For example, if your Flash application contains links to pages inside your website, Google may now be better able to discover and crawl more of your website.
Q: What about non-textual content, such as images? At present, we are only discovering and indexing textual content in Flash files. If your Flash files only include images, we will not recognize or index any text that may appear in those images. Similarly, we do not generate any anchor text for Flash buttons which target some URL, but which have no associated text.
Also note that we do not index FLV files, such as the videos that play on YouTube, because these files contain no text elements.
これまでのFlashの使い方で問題ないようです。Googleはフラッシュに対応したようですが、日本で主流であるYahoo!はどうなんでしょうか。
Photoshopを使って制作する方法を紹介しています。
1,背景色を「#FFFFFF」に設定します。新しいレイヤーを追加し、「長方形選択ツール」で四角形のシェイプを選択し、塗りつぶしツールを使って色を塗っておきます。後ほど下の方を削除しますが、現段階では削除部分もあわせて作っておきます。
2,長方形のレイヤーを選んでいる状態で、選択範囲→選択範囲を変更→滑らか→３pxに設定します。さらに、選択範囲→選択範囲を反転を選択し「Delete」ボタンを押します。これで端が滑らかになります。
3,レイヤースタイルを以下のように設定し追加します。ドロップシャドウは影付を行うレイヤーで、距離を0にします。
グラデーションは#FFFFFF→#999999に設定します。
4,上記の設定ができていればこんな感じの四角形になっていると思います。
5,レイヤーを複製し、つなげてみるとメニューぽくなってきましたね。
6,余計な下部分を長方形選択ツールで囲み、「Delete」ボタンを押すと・・・お見事！
立体感のあるアイコンの作成方法をメモしておきます。Photoshopを使用し、グラデーションツールでうまく濃淡をつければ簡単にアイコンがつくれます。Photoshopをほとんど使ったことのない私でも簡単に作ることができました。]]>
参考サイト：http://web.kyoto-inet.or.jp/people/hikeda/index.html
01,アイコンの形を作るために、角丸長方形ツールで四角形を描きます。この時、Shiftキーを押しながら書くと正方形が書けます。
02,レイヤーパレットでこのシェイプをCtrlキーを押しながらクリック。こうするとシェイプの形をした選択範囲ができます。
03,選択範囲メニュー→選択範囲を保存→名前をつけて新しい選択範囲を保存します。
04,新規のレイヤーを追加し、グラデーションツールの反射形グラデーションを選択。グラデーションの色を決めます。
05,レイヤーの中心から外に向かって、Shiftキーを押しながらドラッグ。
06,ボタンの中に入れる画像を配置して、不透明度を60％程度に下げます。画像はカスタムシェイプツールの中から選ぶと簡単です。
07,新規のレイヤーを追加し、楕円形選択ツールで上半分を囲むように選択。
08,選択範囲メニュー→選択範囲を読み込む→さきほど名前をつけて保存した選択範囲を選ぶ→現在の選択範囲との共通範囲を選ぶ。
09,グラデーションツールの線形グラデーションを選び、ツールオプションバーで描画色から透明にを選びます。
10,選択範囲外から内にを向かって、Shiftキーを押しながらドラッグ。
11,選択範囲を解除し、レイヤーの不透明度を80％程度に下げます。
このWebサイトはスクリプト化されたウィンドウを使用して情報を依頼しています。このWebサイトを信頼している場合、ここをクリックして、スクリプト化されたウィンドウを許可してください...
Movabletypeを使ってエントリーを書いていてリンクを貼ろうとすると以上の警告文が毎回表示されてしまい困ってしまいます。表示させないための解決方法を紹介しています。
]]>
IEを開いた状態で、ツールからインターネットオプションを表示します。セキュリティタブ→レベルのカスタマイズをクリックします。スクリプト化されたウィンドウを使って情報の入力を求めることをWebサイトに許可するを選択。
そこで検索エンジンのGoogleが呼びかけによって、リンクを無効化させる方法としてrel="nofollow"が導入されました。
具体的には以下のようにして利用します。
<a href="スパムサイトURL" rel="nofollow" />スパムサイト</a>
nofollowを追加されていても表示上は変わりません。見た目では判断がつきません。nofollowが入っているかはソースを表示して確認するしかありません。
私の体験談なのですが、相互リンクを申し込んでくれた方の中に、nofollowを入れてリンクを無効にしている方がいらっしゃいました。nofollowをつけるとリンクから逃げないと知っているから行う行為です。そんなことをしている方は確信犯ですので相手にしてはいけません。もっと悪質な方になると、ページのメタにnofollowを入れていたりします。
]]>
写真のオンライン管理を行えるFlickrを紹介しています。Flickrはデジカメで撮った写真をアップロードし、名前やタグなどで管理することができるようになります。無料版と有料版があり、無料版を利用していも毎月100MBまでアップすることができます。]]>
Flickr（http://www.flickr.com/）を利用するれば、デジタル写真をオンライン上で管理することができます。また、Flickrのサイトで公開することもでき、他の方が公開している写真にコメントなどをつけることもできます。
有料版（年間$24.95）ならば、アップできる量も無制限になり、ビデオなどもアップすることができます。写真が趣味な方は利用されてみてはいかがですか。
公開されている写真の利用について、公開されている写真には著作権があり、勝手に利用してはいけません！Some rights reserved.となっている写真はライセンスの条件にしたがって利用することができます。
WEBページのキャプチャー画像を必要とすることは多いと思います。Webページを指定したピクセルサイズで画像キャプチャーし、さらに任意のピクセルサイズにリサイズしたうえでJPEG/GIF/BMP/PNG/TIFF形式で保存できるフリーソフト。]]>
CrenaHtml2jpg（http://www.picolix.jp/）より、ZIPファイルをダウンロードし、CrenaHtml2jpg.exeを実行してください。
使用方法
・URL欄に、キャプチャーしたいwebページのURLを入力
・サイズ欄で、範囲を指定し、キャプチャーの画像サイズを指定
（フルスクリーンにチェックを入れると、縦の長さをフリーで取得します）
・画像種類をJPEG/GIF/BMP/PNG/TIFFの中から選択
・遅延タイムは、フラッシュを利用したWEBサイトのキャプチャー時に利用
・ファイル欄に、キャプチャした画像の保存先と保存ファイル名を入力