ドリームウィーバーを便利なエディタとして使う方法

Dreamweaverでのスタイルシートの使い方というブログを更新していますが、その中のネタより・・・
ソースコードでCSSデザイン（4）スニペットを使ってコードを入力について、もうちょっと詳しく解説してみます。




この動画では、よくつかうスタイルを、スニペットに登録しておいて、コードに貼り付けしてみる方法を紹介しています。
登録したスタイルは、写真の右寄せスタイル。
こうしていろんな場面で使い回すようなよく出現するスタイルを登録しておくと便利です。

スニペットは元からいろんなものが登録されてるので、利用することもできます。
（私は自分で登録したもの意外使ったことないんですが・・）
よく使うJavaScriptや、メタタグ、なども登録しておくと便利です。

＜写真を右寄せ簡単CSS＞
.photoR{
display:block;
float:right;
margin-left:10px;
}
これをスタイルに追加してから、写真に
class="photoR"
を適用させれば、簡単に右回り込み写真になります。
タグでいうと
＜img src="img/kagami_top.jpg" width="120" height="152" class="photoR" /＞

もしくは、＜p＞か＜div＞に class="photoR"を適用してもいいですね。
＜div class="photoR"＞＜img src="img/kagami_top.jpg" width="120" height="152" /＞＜/div＞

imgは、インライン要素なので、フロート指定は本来できないんですが、
display:block;を入れることで、ブロック要素にできるので、フロートさせることもできるし、マージンなどを指定することもできます。

同じ要領で、
.photoL（左に回り込みさせたい場合）
.phtoC（中央揃えにしたい場合）
こんなのを作ってスニペットに登録させておくと、作業中にこういうレイアウトが出現したときに手間をかけずにすぐにスタイルを適用させることができますね。

※ブログの中でタグが有効になっちゃうんで、＜＞は全角で記述してあります

CSS初心者の皆さん、webデベロッパー使ってますか

昨日、webデザインを勉強中の方に（私もまだ勉強中ですが）、Firefoxのwebデベロッパーを紹介したら、ものすごく喜ばれたので、
まだ知らない人も多いかもしれないと思い、初心者向けにわかりやすい言葉で紹介しますね。
CSSデザインを勉強しようと思った時点で、Firefoxのファンになった人は多いかもしれませんが、これを知ったらもっとファンになります。

＜ダウンロードページはここ＞
Web Developer 1.1.2 日本語版


＜ダウンロード方法＞
ダウンロードして保存したファイルを、Firefoxのアイコンに重ねると、アドオンに追加するかと聞いてくるので、許可すればokです。

＜何ができるか＞
webデベロッパーのツールバーが出てきてそこからいろんなことができるようになります。

（例）div要素のサイズを表示


（例）画像の情報を表示


（例）CSSを編集する


他の人の作ったサイトのCSSを変更して、一時的にいろいろ実験したり検証したりもできちゃいます。

なんて便利なんでしょう〜。こんな素晴らしいモノを無償配布してくれるなんてありがたいですね。

＜見本画像は・・・＞
税理士先生のホームページはモモンガが作りました。通常の税理士業務以外にも、経営コンサルタント、起業・開業支援、ファイナンシャルプランニング業務など、幅広い分野で手がけられています。
特に医療部門の税理業務には詳しく、東京関東を中心とした個人開業医向けの業務も多く担当されてますので、良い税理士さんはどこかにいないか・・？と探している方がいらっしゃいましたら、気軽に相談してみてください。
とてもきさくで、話しやすくてなんでも相談にのってくれます。
長野県駒ヶ根市　大林直樹税理士事務所

駒ヶ根市で評判の美容室

わたしがかれこれ10年近くお世話になってる美容室のホームページを作成しました。
HairFactory A2（駒ヶ根市）

A2さんを知るまでは、これといったお気に入りが見つからずあちこち美容室放浪してたんですが、ふらっと入ってみたら、カットひとつでもとても丁寧にセンス良くしてくれるので、とても日持ちが良い？？？というのも変ですが、日数がたってもそれなりにいい髪型に保ってくれるので、わたしのような不精者にはとてもありがたい美容室です（そのぶん美容院の売り上げには貢献してないのかも・・・ゴメンナサイ）。
とにかくオーナーと奥さんのカットの腕はサイコーです。安心して任せて大丈夫です。パーマもおばさんぽくはなりませんｗ
スタッフの方もとてもきさくであたたかい美容室です。
駒ヶ根近辺でどこかいい美容院知らない？と探している方がいましたら、一度たずねてみてください。

協力／写真・宮崎学　Flash制作・Dogg244さん

ホームページ作るのに写真がいかに重要か・・・素材８割、デザイナーの出る幕はあまりないのです。。。
アクションスクリプトはいかにクールにシンプルに、一瞬で決めるか・・をテーマにDogg244さんにお願いして考えてもらいました。
シンプルな仕上がりが、A2さんのコンセプトともマッチしてるような気がします。ありがとうございました（＾＾

森の仲間コミュニティに入れない方へ報告

２〜３日前から、森コミュにログインできないユーザーさんが頻発するようになってご迷惑おかけしています。
進捗状況とこれからの対応をここでお知らせするようにします。

サーバーの事故？、DBの容量オーバーによる不具合？　などいろいろ調べていたので、
ここにたどり着くまでに、時間がかかってしまいました。
「OpenPNEの2.0→2.6バージョンアップに伴う、メールアドレスの文字化けの問題」
これに一番症状が近いのかもしれない・・？
ということで、今対策をとっているところです。

ちょうど年度切替の時期と重なってしまったので
それが原因・・？と思われてしまった方もいらっしゃるかと思います。
年度切替とはまったく関係がありませんのでそのこともお知らせです。

会員一斉メールにて、伝言板の場所とパスワードのご連絡をしましたが、
５通くらい宛先不明で戻ってきてしまいました。
一斉連絡のメールが行ってない方は、モモンガあてにメールにてご連絡ください。

-------------------------------------------
（12月末　追記）
復旧のお知らせと経過報告

大変ご迷惑おかけしてすみませんでした。
多分、今までログインできなかった皆さん、以前のアドレスとパスワードで入れると思いますのでお試しください。簡単に説明しますと・・・

◎使っているサーバーのバージョンアップで、暗号化の方式が変わったということで、今までの人のメールアドレスとパスワードの暗号が全部変わってしまい
他の人がログインできない状態になっていました。
（クッキーが残っていて、パスワードを送信しない人だけ入れていました）


◎復旧作業をして（OpenPneの暗号化に関する場所のバージョンを入れ替え）
他の人の文字化けが復帰できたとたんに、方式が変わっている間に、アドレスの再設定をした方、新しく招待した方が今度はログインできなくなってしまいました。


◎新しく招待した方　＞申し訳ありません、再度ID発行しますので、４日間の間に書いた日記の移動作業をお願いすることになってしまいます

◎携帯アドレスやメールアドレスの再設定を行った方　＞
お手数ですが、管理画面から再設定しなおしてください。

◎スタッフのILLOMENさんに復旧作業をしていただきました。
OpenPneの公式サイト ・及び 配布元の手嶋屋様 にもアドバイスいただきました。どうもありがとうございました。

素敵な隠れ家サロンで、メイクアップ講座

秋から準備中だった「メイクアップ講座」のホームページがstartしました。
いつものことだけど、ホームページ公開の時は嬉しいもんです。お腹を痛めた我が子の巣立ちの時ですナ。。

オーナーのFu-ko先生とは、もう20年以上前から・・・、わたしがタウン情報誌でバイトしてた頃からのお付き合いで、その頃は飯田市の伝馬町の化粧品店で店長さんをされていました。
わたしが広告用に描いたイラストをめっちゃ気に入ってくださり、今でも「わたしの広告を任せるのはモモンガちゃんだけなのよ！」と褒め殺しされちゃうもんだから、どんな理不尽な、、いや、Fu-ko先生の素晴らしい感性のもと下される修正にも耐えてきました（^＿^;

Fu-koさんはその後、めいくのお店をユニー通りに新装開店し、それから素敵なエステサロンのオーナーにもなり、どんどんご活躍されるわけですが、
このたび、鼎のご自宅を改装して、マンツーマンで美容についてのレッスンをしてくれる、メイクレッスン教室を開講されました。
平安堂の裏手の道をいくとすぐに、素敵なblackの看板が目に入りますが、そこが教室です。
教室といっても隠れ家サロンといった雰囲気で、とっても素敵な空間です。



わたしも取材させて貰ったんですが、ひっそりと声を大にして言いたいです。
「女性なら受けておいて損はないです、いや受けるべき！絶対楽しいし、本当のメイクのやりかたを知らずに過ごして来たなんて、、今までなんて勿体ないことをしてたんだろう・・・って思います」
美容歴30年以上の貴重なノウハウを教わることができて、メイクが上手になれたら、本当に一生の宝だな〜と思います。



このサロンを立ち上げるにあたり、ホームページの公開も視野に入れながら、ネーミングや告知文から、サロンのインテリアに至るまでいろいろと一緒に相談にのってきましたので、
これからこの講座がどう広がっていってくれるのかとても楽しみでもあり、応援したい気分です。

WordPressのサムネール写真のサイズ変更

WordPressのサムネール写真は128×96で小さく感じます。
このサイズを変更したい時は、

wp-admin/admin-functions.php
の中に128とか96の数字が何カ所か出てきますが
これは横が最大128を超えた場合、128でサムネール生成という意味なので（タテは98）
これを任意の数字に変えると変更できます。

Dreamweaverで、WordPressのオリジナルテーマ作成（その２）

(2008年10月追記　
dreamweaver　＋Wordpressでぐぐるとこのページがトップに来るんですね。
なんでこのページばかりたくさんヒットするんだろと思ってましたら・・・・（・_・;）
てことで、ここから上記キーワードで来訪された方に、
もっと最新の記事を今年になってからアップしてますので、よろしければ
こちらからごらんいただいた方が良いと思います。
DreamweaverでWordPressのテンプレートを編集する方法
from モモンガ）




続きです。


style.cssを変更し、アップロードして、ブログを表示して確認するわけですが
ローカルで確認できないと何かと不便なので、
DreamWeaverのデザインビューにてcssを確認しながら調整する方法です。

１）ブログのトップページを表示させ、ソースを見る・・で、ソースを全部コピー

２）Dwで、ファイル　＞新規作成　HTMLを選んで開くと
Untitled-1.htmlというファイルになるので、コード画面で全選択してから、先ほどコピーしたソースを貼り付け。

３）test.htmlなどという名前で、テンプレートの入っているフォルダ（例の場合はmomonga以下に）保存。

４）test.htmlの＜head＞に下記の１行を追加

＜link href="style.css" rel="stylesheet" type="text/css" media="all" /＞

これで、cssが反映できるようになるので、同じ階層の
style.cssを編集しながらアップします。

５）HTMLの方を変更したいときは、
EasyAllの場合、ヘッダー部分はheader.php
メインの記事部分はindex.phpの真ん中あたり（大雑把(#^_^#) ）
ナビゲーション部分はsidebar.php
フッター部分は、footer.php
に分かれています。

これらをすべて読み込みしたファイルがindex.phpなので、index.phpの中身は
真ん中に記事本体があって、上下にヘッダーやフッターを読み込んでいるだけのファイルです。

ブログの記事のタイトルをクリックすると、その記事単独のページになりますが
そちらはpage.phpとcomments.php（コメント部分）などが使われています。

６）サイドバーに入れるコンテンツの編集をしたい場合は、
WordPress ME2.0.xまではウィジェットが入ってないので、自分でプラグインをインストールしないといけません。

WordPress ME2.1.x以後は、サイドバーウィジェットが標準でついてくるので、
管理画面より、表示　＞ウィジェット
のところで、ドラッグ＆ドロップで好きなコンテンツを入れたり削除したり、移動したりできるので便利です。
（わたしこのことを知らないで、最初に、sidebar.phpをあーでもないこーでもないといじって滅茶苦茶にしてしまったので、知らない初心者さんもいるんではないかな〜と思い書いておきますね；；）