2008年8月30日土曜日

CSSで高さ可変の角丸ボックス(DreamweaverでCSS)

ちょっと凝ったデザインにしようとして、すぐにぶつかるのがこの角丸ボックスの問題。
基本的には背景画像を使うことになりますが、問題は中身のテキストが増えても崩れないようにするというのが前提ですよね。
てことで、CSS初心者向けの方法を動画マニュアルで紹介しましたので、こちらでも詳細を書いておきます。

>CSSを使った角丸ボックスの作り方(前編)
>CSSを使った角丸ボックスの作り方(後編)


――――――――――――――――――――――――――――――――――
(CSS)
*{
margin:0;
padding:0;
}
body{
font-size:12px;
line-height:18px;
margin-top: 20px;
margin-left: 40px;
}

ul{
list-style:disc outside;
width:570px;
height:auto;
padding:36px 0 0 20px;
background:url(img/maru_top.gif) no-repeat 0px 0px;
margin: 0px;
}
li{
margin:0 10px;
line-height:2;
padding:0;
}

.ul-after{
background: url(img/maru_bottom.gif) no-repeat 0px -10px;
margin: 0px 0px 0px -20px;
padding: 0px;
height: 20px;
width: 570px;
}
html*.ul-after{
background: url(img/maru_bottom.gif) no-repeat 0px -10px;
margin: 10px 0px 0px -30px;
height: 40px;
}
――――――――――――――――――――――――――――――――――
<ul>
<li>
<a href="#">イベントタイトル</a> [08年7月29日]
</li>
<div class="ul-after"></div>
</ul>
――――――――――――――――――――――――――――――――――

●<li>から</li>までがループというか、可変する場所です。

●div class="ul-after"のクラス名はなんでもいいです

●html* というのは、スター7ハックでぐぐって調べてみてください
セレクタの前にこれをつけると、IE5.5~6、MacIE、サファリなどでスタイルが適用され、他のブラウザでは適用されません。
(CSSのルール的には間違った使い方なので自己責任で・・)


もうひとつ、ラストの</li>のうしろにdivを追加しない方法ではul:afterという疑似要素で指定する方法があります(が・・・IEは反映されません。。。)
上記のHTMLから<div class="ul-after"> </div>を削除して、スタイルシートは下記の様に指定します。
marginなどの調整はあくまでも例なので、スタイルに合うように微調整してください。

*{
margin:0;
padding:0;
}
body{
font-size:12px;
line-height:18px;
margin-top: 20px;
margin-left: 40px;
}

ul{
list-style:disc outside;
width:570px;
height:auto;
padding:36px 0 0 0px;
background:url(img/maru_top.gif) no-repeat 0px 0px;
margin: 0px;
}
li{
margin:0 30px;
line-height:2;
padding:0 0 0 0px;
}

ul:after{
content: url("img/maru_bottom.gif");
display:block;
height:60px;
}

この講座で使った画像はこちらのサイトで使っています
京橋タウンガイド
デザイン:webの森
協力/xoopsシステム構築:A-XYZ

2008年8月28日木曜日

2つのクラスを同時に適用させバリエーションを作る方法

動画講座で、2つのクラスを同時に適用させてバリエーションを作る例をやってみました。

背景画像を使った見出し(DreamweaverでCSS)



例で作ったのは見出し5パターンなので、本来ならh2などでマークアップすると思いますが
クラスを2つ適用させてバリエーションを作ってみる見本ということで
div.midasiというクラスにしてみました。
見出しとしてマークアップする場合は
h2 class="green"
になるわけです。
同じパターンのボックスで、一部の要素にバリエーションをつけたい場合
div class"box2 green"
div class"box2 pink"
div class"box2 yellow"
みたいにして、複数のクラスを同時に指定することができます。


ソースはこちら
――――――――――――――――――――――――――――――――――
(CSS)

body{margin:40px;}
.midasi{
width:400px;
padding:2px;
margin:20px 0px;
font-size:16px;
font-weight:bold;
text-align:center;
}
.green{background:url(img2/green.gif) repeat-x;}
.pink{background:url(img2/pink.gif) repeat-x;}
.blue{background:url(img2/blue.gif) repeat-x;}
.orange{background:url(img2/orange.gif) repeat-x;}
.purple{background:url(img2/purple.gif) repeat-x;}

――――――――――――――――――――――――――――――――――
(HTML)

<div class="midasi green">イタリアン</div>
<div class="midasi pink">和食</div>
<div class="midasi blue">中華</div>
<div class="midasi orange">焼肉・韓国料理</div>
<div class="midasi purple">居酒屋・ダイニング</div>
――――――――――――――――――――――――――――――――――
背景で使用した画像の一つはこちら

これを変更して5色のバリエーションを作ってみました。

作例はこちら
京橋タウンガイド
こちらの見出しでこの画像を使っています。見てみてください。

このサイトはxoopsで制作しています。
URLの静的生成と正しいマークアップでseo対策済み。
xoopsサイトの型にはまったデザインを一新して、オールCSSコーディング。
今風のテイストに変えてしまってますので、そのへんも見てくれると嬉しいなぁ~。。。。
オールCSSにしてあることで、携帯表示にも対応できるというわけです。

xoopsを使った様々なポータルサイトの構築も受けていますのでお気軽にご相談ください。
デザイン:webの森
協力/xoopsシステム構築:A-XYZ

2008年8月27日水曜日

dlを使っての見た目「表組」の作り方(DreamweaverでCSS)

動画マニュアルで、dlタグを使った表組みの作り方を紹介しました。

>dlを使っての見た目「表組」の作り方




表は表なので、テーブルタグを使っても全然かまわない訳ですが
dlを使うことで、スタイルシートでのデザインがやりやすくなることもあるし
ソースがシンプルになるので、プログラムを組み込むときに、
どこからどこまでループさせる・・簡単に組めるようになるかと思います。

dlというのは、本来定義リストのタグで、たとえば辞書のように
【ほ乳類】タヌキ/キツネ/クマ/ネズミなど
【鳥類】フクロウ/ワシ/タカ/カモ/ヤマセミ/カワセミなど
【昆虫】トンボ/ハチ/チョウ/カブトムシなど
こんなふうに見出しと説明との繰り返しになる文章に使われます。

同じく、項目名と中身との繰り返しになる表組みや、
役柄とセリフとの繰り返しになるシナリオのような形式にも使えますよね。

ということで、動画で紹介したページのソースを紹介します。

――――――――――――――――――――――――――――――――――
(スタイル)
*{
margin:0;
padding:0;
}
body {
color:#333333;
margin-top: 40px;
margin-left: 40px;
font-size: 13px;
line-height: 24px;
}
dl{
background:#E3E1D5 url(img/green.gif) repeat-y 0 0;
width:480px;
border-top: 1px solid #666666;
}

dt {
text-indent:20px;
width:120px;
}

dd {
border-bottom:1px solid #666666;
margin:-24px 0px 0px 0px;
padding-left:140px;
width:340px;
}
――――――――――――――――――――――――――――――――――
(HTML)
<dl id="recruit">
<dt>
仕事内容
</dt>
<dd>
(1)翻訳業務(2)通訳業務(3)外国語教育
</dd>
<dt>
勤務時間
</dt>
<dd>
業務内容による
</dd>
</dl>
――――――――――――――――――――――――――――――――――
動画の中でも紹介しましたが、いくつかポイントがあるので紹介します

●デフォルトのスタイルをリセットする

dlやdt、ddにはそれぞれデフォルトのマージンが入ってしまってるのでスタイルの最初でリセットしています
*{margin:0;padding:0;}

●ネガティブマージンを使用

ddの方のマージントップを-24pxにして(行間と同じサイズ)1行分上にあげてます。
マージンをマイナスするのをネガティブマージンと言うらしいですね。

●dtもdlも幅指定

dlやdt、ddは、ブロック要素なので幅を指定できます。
というか、幅指定ちゃんとしないときれいな表にならなかったので入れてあります。

今回の見本サイトはこちら
京橋タウンガイド

このサイトはxoopsで構築しました。
地図やおすすめメニューなどのついたショップガイド、各お店からの新着ニュースや、クチコミ投稿、求人情報や、イベント・タウンガイドなどの機能が盛りだくさん。
URLの静的生成と正しいマークアップでseo対策済み。携帯にも対応しています。

xoopsを使ったポータルサイトの制作も受けていますのでお気軽にご相談ください。
デザイン:webの森
協力/xoopsシステム構築:A-XYZ

2008年8月26日火曜日

WordPressでサイトマップ自動生成プラグイン

WordPressで、サイトマップを自動で生成してくれるプラグイン「Sitemap Generator」を設置してみたので、やり方を書いておきます。

配布元は、下記のサイト様
Dagon Design



試してみたWordPress バージョン2.6.1
プラグインのバージョン Sitemap Generator3.14
設置例 http://hara-ringo.net/sitemap/
オリジナルテーマを使用している場合の設置法です

●上記のリンクからダウンロードして、解凍したフォルダ「sitemap-generator」ごと、
プラグインフォルダにアップし、有効化します。

●管理画面にて 設定 >DDSitemapGen という場所で設定をします
最初に言語ということろで、Japaneseを選んで、再起動すると、日本語に変わります。



●設定をしたら、ページ作成でサイトマップ用のテンプレートを作ります。
wp-content/theme/オリジナルテーマのフォルダ/index.php
をエディタで開いて、
1行目にこれを入れる
-------------------------------------------
<?php
/*
Template Name: SITEMAP
*/
?>
-------------------------------------------

●サイトマップを表示させたい場所のコードを全部削除して替わりにこれを入れる
-------------------------------------------
<?php echo ddsg_create_sitemap(); ?>
-------------------------------------------

●全部削除と書きましたが、オリジナルテーマを作成されてる方ならわかると思いますが
ヘッダーを読み込む命令と、フッターを読み込む命令などはもちろん残しておきますね。
それと、div#sitemapでひとくくりにしておくとあとでスタイルを制御しやすくなります。
多分こんな感じになるのでは・・・・
-------------------------------------------

<?phpget_header();?>


<div id="sitemap">


<?php echo ddsg_create_sitemap(); ?>


</div>


<?php get_footer(); ?>


-------------------------------------------

●上記を別名保存 sitemap.phpでいいでしょう
 (もちろん、index.phpを書き換えなくても、すべて自作でもいいし、すでにテンプレートとして使用しているファイルを開いて、別名保存し、別のテンプレート名をつけ、サイトマップを表示させたい場所に上記のコードを入れれば良いという意味です)

●管理メニューに行って、
 作成 >ページ >ページ作成
・タイトル欄に、「サイトマップ」と入れる
・パーマリンクの編集ボタンで、sitemapと入れる
・コメントとトラバのチェックをはずす
・ページテンプレートの一覧プルダウンの中から SITEMAPを選ぶ
 (先ほどの手順でテーマフォルダの中にアップしていれば出てくるはずです)
・ページ順序はお好みで(たいていラストに来てほしいから90など大きな数字)

で、これを公開して
ドメイン/sitemap
へアクセスすれば自動生成されています。

●スタイルシートで#sitemapのところを制御します。見本で使ったサイトはこんなふうに指定しました
#smap h2{
font-size:14px;
text-align:left;
padding:2px;
margin:10px auto;
background-color:#DBDCD6;
font-weight:normal;
}
#smap ul{
font-size:12px;
list-style-position:inside;
margin:6px;
}
#smap li{
line-height:18px;
list-style-type:disc;
padding-left:50px;
}
#smap li strong{
text-indent:-40px;
}

●普通のページ作成でやる方法
1. 投稿 >ページ作成
2. ページテンプレート デフォルトテンプレートを選択
3. 投稿スラッグ、ページタイトルsitemap、サイトマップなど適当に入力
4. ページコンテンツには、下記の一行を入力します。
<!– ddsitemapgen –>  <は半角にしてね
5. 「公開」をクリックすると、サイトマップ ページが作成されます。



下記のサイト様を参考にさせていただきました。ありがとうございました。

Sitemap Generatorの使用方法

2008年8月25日月曜日

背景画像を使ったノート罫線の作り方(DreamweaverでCSS)

スタイルシートを使ったwebデザインのテクニック、今回は
背景に点線の画像を敷いて、ノート風にしてみます。

>動画マニュアルはこちら 背景画像を使ったノート罫線の作り方

おすすめメニューやおしながき、メモ帳など、
短いテキストでタテに長くなりがちのテキストの場合、横に罫線が入ることで読みやすくなります。
コツとしては、背景画像の高さと、テキストのline-heightの高さを揃えることと、
1行目の上にも罫線が来るように、背景画像のリピート位置を、タテ方向にマイナスで指定すること。
ボックスのmargin-topに同じ高さ(この場合24px)を入れて、揃うようにしています。

使った背景画像はこちら





ソースはこちら
――――――――――――――――――――――――――――――――――
body {
background: #CCD6D9 center;
margin: 10px 0px;
padding: 0px;
}
.box{
padding: 0px;
width: 500px;
border: 2px solid #6699FF;
margin-right: auto;
margin-left: auto;
background: #FFFFFF;
}
.note {
font-size:12px;
background: url(img/ten.gif) repeat 0px -23px;
margin: 20px;
padding: 0px 0px 1px;
}
.note p{
line-height:24px;
margin-top:24px;
}
――――――――――――――――――――――――――――――――――
<div class="box">
<div class="note">
<p> ●タイ伝統古式マッサージ</p>
<p>65分コース 5,000円<br>
95分コース 7,000円<br>
125分コース 9,000円</p>
<p>●タイ式リフレクソロジー</p>
<p>35分コース 3,500円<br>
65分コース 6,000円</p>
<p>●アロマオイルトリートメント</p>
<p>65分コース 7,000円<br>
95分コース 10,000円<br>
125分コース 13,000円</p>
</div>
</div>
――――――――――――――――――――――――――――――――――
できたページはこちら


実際に稼働しているサイトはこちら
京橋タウンガイド
xoopsで制作しました。
デザイン:webの森

2008年8月24日日曜日

背景画像を使ったボタンの作り方(DreamweaverでCSS)



動画マニュアルで、スタイルシートを使ったwebデザインの定番ともいえるテクニックをいくつか紹介しましたので、こちらでも解説します。

スタイルシート 定番テクニック集 >> (1)背景画像を使ったボタンの作り方

スタイルシートなので、もちろん、エディタだけを使って作ってもokですが、この講座はDreamweaverの講座なので、ドリームウィーバーのエディタ機能を使って効率よくやってみましょう。

1回目は、画像を使ったボタン。マウスオーバーで色が変わります。
CSSでの背景画像を使って、マウスオーバー時には、背景画像の位置指定を変えて、色が変わるような動きをつけています。
ボタンのテキストは、text-indentで大きな数字を入れて飛ばして、一見非表示にしています。
――――――――――――――――――――――――――――――――――

#button {
text-indent:-2000px;
}

#button a,#button a:link,#button a:visited{
display:block;
height:23px;
width:102px;
background:url(img/button.gif) no-repeat 0px 0px;
}
#button a:active,#button a:hover{
background:url(img/button.gif) no-repeat 0px -25px;
}

――――――――――――――――――――――――――――――――――

<div id="button"><a href="#">掲示板</a></div>
――――――――――――――――――――――――――――――――――

動画の最後で、画像をどんなふうに作ってあるかも紹介してますので、参考にしてみてくださいね。

こちらが使用した画像です



最近作った大阪のポータルサイトです。
京橋タウンガイド
グローバルナビゲーションの上にある3つのボタンは、今回の動画で紹介した方法で作りました。

*****

このサイトはxoopsで構築しました。
地図やおすすめメニューなどのついたショップガイド、各お店からの新着ニュースや、クチコミ投稿、求人情報や、イベント・タウンガイドなどの機能が盛りだくさん。
URLの静的生成と正しいマークアップでseo対策済み。携帯にも対応しています。

xoopsを使った様々なポータルサイトの構築も受けていますのでお気軽にご相談ください。
デザイン:webの森
協力/xoopsシステム構築:A-XYZ

Macの能力診断方法

仕事用のメイン機にPowerMacG4を使ってるんですが、最近複数ソフトを立ち上げて作業してるともたつくようになってきたので、メモリーが足りないんだろうな・・と漠然と思ってました。
知り合いのパソコンの先生から、今動かしているシステムの状態を表示して調べることができる機能を教わったので、備忘録兼ねて紹介します。

なるべく初心者さんでも分かるような記述にしてみますね。
「ターミナルで操作したことない・・」というコマンドライン恐怖症の方も(あ、あたしがそうで^^)一度試してみるといいかも。

機種 PowerMac G4 1.25Ghx M8840j/A

●ターミナルの場所は、
アプリケーション > Utilities > Terminal  ここにあります。



●起動させるとこんな画面になります。


[Macintosh:~]g4%
とあるのは、いま自分がいる場所を示しています。その横の赤い□がカーソルです。
この記述は各自のパソコンの設定によって違うので、
わたしの場合は、g4というユーザー名でログインしてるのでこういう表記になってます。

●ここで、赤い■にカーソルをおいて、topと入れてReturnしてください。

●topコマンドを叩いて出てきた数値が、今のパソコンの状態(健康診断カルテみたいなものですね)

●終了するときは、小文字のqを入れてReturnしてください。そのあとコマンドqで終了できます

●では、この数字を説明します




(1)の赤い数字が引いてある場所を見て、メモリの空き容量がなければ、メモリを増設したほうがいいということです。
メモリが余ってるのに動作が遅かったりフリーズするということは、CPUかHDDに原因が・・?ということになります。

この例では、実装メモリは、1.25GB でその内、1.21GBを割り当て済み
これ以上負荷をかけるとスラッシング状態(メモリでなくHDD上でアプリを動かしている状態)
になります。というかほぼなっています(^^;;

(2)のLoad AvgがCPUの負荷。
これが1以下なら概ねさくさく動作。
例では2.14なのでかなり負荷がかかってます。
ユーザープロセスに 約49% / SYSTEM が 24%
⇒ CPU的にはかなり仕事しています。(アプリケーション側で)

(3)(4)(5)VSIZEとは   アプリケーションが要求したメモリ
Fireworks 351M
Dreamweaver 343M
PhotoShop の 332M などは、アプリなので同時に立ち上げて仕事したいし仕方ないとしても

forefox の 535M
Opera の 332M
ブラウザって結構なメモリ食いなんですね・・・


(6)RSIZE とは    OSが実際に割り当てたメモリ
・forefox の 184M
が目立ちます。

ということで、 総合評価
・実装メモリがこなそうとしている仕事に対して少ない・・・できれば2Gまで増設したい(今の機種では2Gがぎりぎりだそうで)

●現在4つメモリを刺す場所があって
3つ 512M 512M 256M が入ってましたが
256を抜いて、空いた2カ所に、512Mを2つ追加しました。

この画面は、だいたいいつも同時に使うくらいのソフトを立ち上げた状態です。

Load Avg(CPUの負荷)は0.9(変動してますが)
メモリの使用率は1.4G使ってる状態で572Mfreeとなってますね

パソコンが起動しなくなったら・・・

ちょっと以前に、パソコンが起動しなくなった方が困って相談している掲示板で、
とてもわかりやすく「まず何からやってみたら良いか」を答えられている方がいらっしゃいましたので、
覚え書きのためにも引用させてもらっていいですか?と許可を得ましたので
こちらにも引用させてもらいます。

私もパニックになった知人から、助けてーーっと呼ばれることがあるので、この手順でやって貰おうかな・・と。
ウィンドウズさんが元気なうちに用意しておいたほうがいい「いざという時の非常用持ち出しセット」みたいですね・・・・・

―――――――――――――――――――――――(ここから)

●本体内に帯電するとHDDを初めとするハードウェアの認識がおかしくなる可能性があるため、一旦パソコンからACアダプタを(ノートの場合はバッテリーも)全て抜き、そのまま一分ほど放置、まずはとりあえずACアダプタのみを接続する
(まずはこれを行わないと、下記の事項について「故障かどうか」の判断が出来ません)

●電源ボタンを押した後に、特定のキーを連打してBIOS画面に入る
これはメーカー・機種ごとに操作が異なるのですが、大体はF2キー又はDeleteキーです
入るまで行ってください

●このBIOS画面の「Main」で、下の方にマザーボードで認識されているメモリの総量が出る(各メーカー・機種によりPheonix、Awardなど搭載しているBIOSが違い、当然ながら記述も違います)ので、購入時のパソコンの搭載メモリ容量と比べてください
これが異なる場合、「メモリの故障・障害で起動しない」という事が疑われます

●次に→キーにて「Advanced」の項目を表示します
ここの上の方で「IDE」と記述がある項目(搭載HDD、これもBIOSごとに記述が異なります)の容量を確認します
ここで「None」となっている場合は、HDDの物理的故障が疑われます

●ここまでで問題があった場合、残念ながら修理しか方法はありません
(メーカー製パソコンで、自分でメモリを増設・HDDを交換した場合は、メーカーのサポート外ですので、自力でHDD・メモリの交換を行いましょう)

●上記をチェックして問題が無い場合、BIOSの設定が変更されてしまった事による起動障害が疑われますので、BIOS画面でF9キーを押し、英文のメッセージ(設定をデフォルトに戻しますか?というもの)が出たらEnter、次にF10キーを押して英文(設定を保存して再起動しますか?)が出たら Enterを押します

●自動的に再起動が始まりますので、次に最初の画面(Windows以前のパソコンの電源を入れた時に映る画面)が表示された時に、F8キーを連打し続け、Windows拡張オプション画面に入れるかどうか確認して下さい
(「セーフモード」他の選択肢が出るかどうか)

●これが出たら、まずはセーフモードで起動が可能かどうか確認して下さい
セーフモードで起動が可能な場合、次に通常ログインが可能か確かめて下さい

●セーフモードで起動しない場合、恐らくはWindowsの再インストール・リカバリ…となってしまいますが、これ以降はメーカー・機種名の記述が無いとどうにも調べようがありません
(メーカー・機種ごとにリカバリの方法が異なるため)

●上記の作業を行ってみて駄目だった場合、メーカー・機種名などが必要
―――――――――――――――――――――――(ここまで)

webの森のFBページへも来て下さい