ホームページ制作のお勉強ブログ

CS5

2010-03-26T13:20:44Z

遂に発売するみたいです。
すさまじいいらしいですが。
どんなんになるのか楽しみです
使えるわけではありませんが・・・
フォトショップなんかすごいです。
PatchMatchとかなんとかと言うアルゴリズムを積んでいるらしくて。
自動である物を消したり付け足したり。。
ここまでできると恐ろしいです。
やはり一番使う時間が長いソフトなので進化することは良いこと・・だと思います。

忙しいです。

2010-03-18T10:23:41Z

最近、かなり忙しいです。
忙しいだけに、学ぶ事がたくさんあります。
時間が流れるのが早いので、あっこれは便利だと思ったことはできるだけブログに書いていきたいと思いました。
今日はDreamweaverというかホームページ制作で便利だと思った技をご紹介。
ホームページに点線を入れたいと思ってベタの画像を載せようのしましたが
縦とかだとかなりかっこ悪いし、縮めたりする時不便。
HTMLで点線かけそうな気もするけど
やっぱりCSSでしょ。
点線を書きたい部分に1px×縦もしくは横のDivを書いてあげます。
それでCSSのバックグラウンド指定でPhotoshopで書いた
1pxが黒の点残り2pxくらいが白とか透過とかにして
XとかYとかでリピートしてあげます。
これで完成。後の伸縮も自由自在。
初歩的な技ですが便利です。

フォトショップ

2010-03-04T03:28:49Z

こんにちは！
今日はフォトショップのネタです。
スライスツールっていう便利なものがあります。
これはWebページを作るのにかなり使えるみたいなことをどっかの雑誌で読んだことがあります。フォトショップで作りたいホームページのレイアウトや画像を作りこんで
スライスツールで画像ごとに綺麗にスライスして、Divで組み上げたDreamweaverに投げ込み最終調整するだけで簡単にホームページが作れちゃうんです。
あんまり手をかけない簡単なホームページならこれくらいでも良いのかな！？
それではまたー

カスタムシェイプ

2010-02-04T14:20:05Z

こんにちは！
今年になってから、ばたばたな毎日ですが
久々のブログ更新です。
今日はPhotoshopネタです。
トップヘッダーを作るにしても
サイトのパーツを作るにしても重宝しているのが
カスタムシェイプです。
カスタムシェイプでGoogoleで検索するといっぱい出てくるのですが
ダウンロードして保存してPhotoshopで読み込むだけでいろいろなシェイプが出現します。
透かしてパーツに入れても良いし、そのまま色を付けて入れても良し。
最近のマイブームです。

あけおめです。

2010-01-12T12:25:36Z

あけましておめでとうございます！
空けてもバタバタですが、今年の
一人前のWebデザイナーになるという
目標達成の為にも日々がんばり続けます。
最近は、PhotoshopやDreamweaverなどなど
をいじらせていただいております。
ホームページを作りたいけど作れないって思ってるあなた！
とにかくAdobeを買いましょう。
実際、自分もAdobeが欲しいです。
自宅で、心行くまでいじりたいです。
それでは今日はこのへんで！
ばいばい！

MT5!!

2009-12-12T06:35:35Z

久しぶりの更新です。。。
いろいろとあって放置でしたが
やっと復旧しました。
っといっても、初期レイアウトですが・・・
この後、地道にレイアウトは構成しなおす予定です。
リカバリついでに、MTも5にバージョンアップです！！
インターフェースがかなり変わりました。

こんな感じです。
基本的な操作などは一緒ですが
ちょっとわかりやすくなったのかもしれません。
まだまだ知らない部分が多い状態ですが
そのうち機能紹介もしていきたいと思います。

Webサイトを作ったら。

2009-11-06T12:52:08Z

Webサイトを作ったらいろいろな人に見てもらいたいですよね。
見てもらいたかったら宣伝をしなくてはなりません。

Googleのウェブマスターツール
Googleの検索結果に適したページの構成をGoogleに教えてあげます。
検索の上位キーワードなんかも見れたりいろいろと機能があります。

Yahooサイトエクスプローラー
Yahooにサイトを更新したよと教えてあげたりします。
Yahooに登録する機能など。

Bing Webmaster Center
IEをインストールすると右上に出てくる初期のあれの検索サイトです。
これも登録しておいても良いかも！？

Webサイトを作ったらこれらの登録は忘れずにしましょう。
放って置いても見に来てくれる人は少ないですよ！
最後に忘れてはいけないのがサイトマップです。
http://www.xml-sitemaps.com/
このへんで自分のURLを入れて作られたxmlファイルを必ずそれぞれ送信してあげましょう。
これでしばらくすれば、自分のサイトが登録されて検索すると出てくるようになりますよ。

Firefoxのアドオン

2009-11-04T13:53:30Z

ウェブページを制作するにあたってブラウザはかなり重要です。
いろいろとカスタマイズできるFirefoxを使いはじめていますが
アドオンといって機能を追加する事ができます。
その中で僕が使っている使えるアドオンを紹介しちゃいます。

GooglePreview
GoogleとYaooの検索結果にウェブページのプレビューを追加します。
参考にしたいウェブを探すのに便利。

はてなスクリーンショット拡張
ブラウザのスクリーンショットを撮ったりするアドオン
ブログをあげる時に画像化できちゃいます。

Measurelt
画像のピクセルをメジャーで測る事ができます。
フォトショップでヘッダーを作るときのピクセルの参考などにできます。

Firebug
個人的にお気に入りです。指定した場所のソースコードを見たりできます。
CSSをいじるのに無くてはならない存在となってます。

基本的にはこのへんのアドオンを入れてこのブログサイトをいじったりしています。

リストのCSS

2009-10-23T11:34:24Z

今、作っている他のブログでリストが付いているものがありました。
・お勉強
・ブログ
・3月
このようになっている物はCSSでリストと呼ばれています。
・だけではかなり寂しいのでこの・を画像にしてみます。
該当のCSSを見つけだして。。
今回は下記のような部分

div#utilities dl dd ul li {
margin: 0.5em 0;
list-style-image:url("/img/ico2.png");
}

list-style-image:url("/img/ico2.png");

が追加した部分です。
そうして・だった部分が画像にすり替わりました。
リストに色が付いただけでWebもがらりと印象が変わります。

文字に影を付けるCSS

2009-10-22T07:35:24Z

テキストが寂しいので文字に影を付けてみました。
ブログのタイトル部分に影が付きました。
記述としては、該当のCSS部分を見つけだして

.asset-name a {
    text-decoration: none;
    text-shadow:#000 3px 3px 2px;
}

今回はこの部分です。

    text-shadow:#000 3px 3px 2px;

この行を追加しただけです。

text-shadow:（カラー）

その後の記述については
ピクセルの指定で左から順番に
１，影の位置で右方向に、どの程度移動した位置か
２，影の位置で下方向に、どの程度移動した位置か
これを指定します。ちなみにマイナスで指定してあげれば反対方向に
影を付ける事も可能です。
３，一番右の値は影のぼかす範囲をしていしてあげられます。
これで、ブログの文字が一層引き立つはずです！
お試しあれー。

背景を変えるCSS

2009-10-21T12:25:12Z

CSSをいじっていて背景の色を変えたり背景に画像を指定する
場面が増えてきました。
CSSでは一部分の背景の色を変えたり、画像を組み込む事が
可能になっています。
前回はヘッダの画像で下記のような指定をやってみましたが

div#header {
background-image:url("http://lunch-blog.com/img/top.png");
background-repeat: no-repeat;
}

background-image:url("http://lunch-blog.com/img/top.png");
この部分を
background:#ff9900;
にすれば背景の色がオレンジになったりします。
ヘッダだけではなく、ブログの題名部分であったり
左右にあるウィジェットと呼ばれる部分の題名部分なども
同じく画像を指定したり色を変えたりが可能になってきます。
さらに、属性と呼ばれる文章を下に追加するだけで
同じ画像の横方向への繰り返し
background-repeat:repeat-x;
同じ画像の縦方向への繰り返し
background-repeat:repeat-y;
繰り返さない
background-repeat:non-repeat;
など様々な選択が可能になります。

MTにログインできない！？

2009-10-17T12:57:10Z

いつもホームページ制作ネタなので
今日はトラブルネタにしてみます。
いつものようにログインしようと
URLの後ろに
/mt/
を付けてログインしようとした所、急に
http://swzaob.com/mt/
このページに飛ばされました。
なんでログインできないのだろう？
と不思議に思っていましたが
実際のログイン方法が違ったみたいです。
http://swzaob.com/mt/mt.cgi
ここに飛ぶのが正解みたいです。
なんでいきなりいつものようにログインできなくなったか？
それはカテゴリに『MT』というものを作ったからでした。
最初ログインできない時は焦りましたが
正解がわかってしまうとあっさりでした。

MT上の、いらない欄を消してしまう

2009-10-16T12:52:00Z

最近はCSSばっかりやってましたけど
MT(ムーバブルタイプ）に戻ってみます。
CSSだけでは、いじる事が出来ない部分があります。
たとえばこの青で囲まれた部分。

CSSと一時間、睨めっこをしましたが
まったく表示が消えませんでした。
解決策としてはMTに普通にログインして
デザイン＞テンプレート＞テンプレートモジュール
あたりから怪しそうなMTタグで書かれた部分を見つけて削除してしまいます。
念の為にMTのバックアップを取り、消す前には一度テキストファイルなどで
保存して2重のバックアップをしてから消してみましょう。
きれいに消えてくれます。

CSSとヘッダ画像について

2009-10-15T13:04:12Z

こんにちは！
今日は他のサイトのヘッダの画像も作ってみました。
そしてCSSにバックグラウンド指定で組み込むのですが
今回は組み込み方の紹介です。
まず、対応しているCSSからヘッダーの部分を探します。

div#header {
   background-image:url("http://lunch-blog.com/img/top.png");
   background-repeat: no-repeat;
   width:1000px;
   height:150px;
}
このサイトではこの部分でした。

background-image:url("http://lunch-blog.com/img/top.png");

この部分で背景にイメージファイルで
http://lunch-blog.com/img/top.png
の画像を組み込むという意味になってます。
また、これを絶対パスと言います。
相対パスにすると
/img/top.png
この様に指定しても画像は入ります。
次に
background-repeat: no-repeat;
この文章を入れます。
この文章の意味は背景画像を繰り返し表示させない（リピートさせない）
というような意味になります。この文章を入れないと背景画像が繰り替えし表示され
ちょっと表示がおかしくなります。
最後に
width:1000px;
height:150px;
これは画像の縦幅のピクセル（width)
横幅のピクセル（height)
これを指定してあげています。
あとは、元の画像によってまた違うタグを使ったりして正常に表示させるようにしてあげます。

背景抜きの微調整

2009-10-13T13:51:16Z

こんにちは！
引き続きヘッダー画像についてです。
前回粗かった髪の毛の部分を綺麗にしてみました。
作業は全部フォトショップにて行います。
自分の画像の後ろにグレーの無地のレイヤーを置いて
１ピクセルの消しゴム、もしくは５ピクセルほどの消しゴムの回りをぼかして
地道に背景を抜いて行きます。地味な作業ですが、これが出来上がった後の達成感
は何とも言えない物があります。自分が納得の行くものの
さらに上を目指しながらやってみましょう！