Dreamweaverで名前が連番になっている複数ページを開く時。

デスクトップのフォルダから複数選択して開くと
連番がバラバラになってタブが開かれる。
ファイル→開く から複数選択して開くと
タブが連番通りに開かれる。
ほぼ同じソースのページを一ページずつ
確実に修正する際には、キチンと連番通りに並んでいないと
間違えやすかったので気づいてよかった。

てかしばらくファイルを開いた後、タブをひとつひとつずらして
並べ替えていた今までの作業時間が悲しすぎる。。

サイドバーと検索について。

【検索エンジンはページ内で先に記述されている内容が
より重要な情報であると認識する傾向があります。
そのため、コンテンツを先に、サイドバーを後に記述することで、
SEO(検索エンジン最適化)の効果を高くすることができます。】
(WordPress レッスンブックP139より引用)

知らなかった!

全っ然進まない!

1ページ1ページめくりながら、
ひらすらタグをタイプタイプ。。
ドリームウィーバーに慣れちゃったので
htmlやCSSを全部手打ちするのがまぁ大変。
スペルミスで致命傷。。
そんでもって、PHPとやらも出て来て
こんなハテナだらけのタグ。。。
<?php previous_post_link(); ?>
やっとP128まで来た。。
半分いってない。。。(涙)
111020_202802_2
【送料無料】WordPressレッスンブック

WordPress!!!

とりあえず、ウェブデザインに関しては
ゼロからデザイン→スライス→DWでマークアップ→
CSSでのレイアウト・飾り付けがある程度できるようにはなり、
それっぽいものは作れるようになった。

しかしそれだと
お客さんがサクサク更新できるホームページは作れず
何かいい方法は…と探っていたら
どうやら世の中には
『WordPress』っちゅーもんがあるらしく
どうやら今時それができないと
やばいんじゃね?な感じ・・・・??

と、いうわけで
WordPress勉強スタートである。。。
トホホ。。。数字とか関数とか苦手すぎる。。。
htmlとCSSをそれなりに理解しただけでも
自分を褒めて上げたいと思っていたのに。

現在WordPressの知識レベル0%・・・・・・。
でもこの先に光があるのだと信じて
やるっきゃないのだぁ。

ボタンやバナーのロールオーバーについて(メモ)

今現在の私が一番ラクチンだと思っているやり方のメモ。
画像を二枚用意してHTML上ではマウスOFFの画像
CSSで背景画像にマウスONの画像を指定し、
オンするとオフ画像が消えるようになっている。
これに当てはめれば他にも使えるはず。
(htmlいれるとテキスト消えるので、<>の代わりに<>を使用。)
【HTML】
<p class=”button”><a href=”http://nac_mart.com” target=”_blank”><img src=”img/button_off.gif” alt=”ナックマートへ” width=”300″ height=”75″ /></a></p>
【CSS】
.button {
width: 300px;
height: 75px;
background-image: url(../img/button_on.gif);
background-repeat: no-repeat;
}
.button a { display: block; }(←ブロックにもwidthとheight入れないと変になる場合あり)
.button a:hover{ background: none; }
.button a:hover img { visibility: hidden; }

少しのコードで実装可能な20のCSS小技集

なんだか私がモヤモヤ気になっていたものが
大量に載っているっぽいページを発見したー。

特に試したいのは

【18. 2行目以降にスペースを】
※を使った注意事項などに使える小技。最初の行は通常に、次の行からは一文字分開けて表示します。

こういうの↓↓↓———————–
※あんなことこんな事しちゃだめ。
 あんなことこんな事しちゃだめ。

見た目や読みやすさ的にココにスペースが欲しいけど、
ブラウザによって、改行変わるから
どうしていいかわからーん!
状態だった。
——————————————–

【20. 横並びブロックのマージンを調節】
これもどうして良いかわからないので、
もうマージン入れるの止めてた、という感じだったワタクシ。
float leftの設定で、レイアウトはくっちゃくちゃとか…泣けてくる…。

例えばこのページの値段のボタンのところ。
右の余白込みでスライスしたものを横に二つ並べ、
最後だけはデザイン部オンリーでスライス…。
この方法は一般的じゃないんだろうなぁ…とか思いつつ、
取り急ぎコレで見た目はオッケーなので、まいっか…としていた。

しかもロールオーバーの画像もそれぞれ別で作っていて
計12枚の画像を貼っている。
もしかしてさっきの記事のワザを使えば
まさか一枚でいいとか、そういう事なのか!?
うぅう〜〜〜〜〜、わからないことだらけで
耳から煙が出ますよ。プシュー。

とりあえず、今回見つけたこの
Webクリエイターボックス
というサイトは今後とても役立ちそうな予感。
このサイトを管理してるのは、たぶん
デザインもコーディングもできるバイリンガルのナウでヤングな素敵女子・・・。
“どうかしてるゼ!!!!”もとい…
素晴らしすぎですー。(脱帽)

リストの画像のズレ。

普通にCSSでリストに画像をつけると
ちょっとテキストとズレてたり、
IE6ではとんでもないズレになったりするのを
解消する方法、
が、書いてあるサイト
http://doruby.kbmj.com/mai_on_rails/20090917/list-style-image_

これ↓を使用して調整すると楽。
li {
padding: 1px 0 2px 23px;
background: transparent url(../img/list.gif) no-repeat left center;
}