2008年12月12日金曜日

ケータイ用サイトを作って困ったことのメモ

ケータイ用のページを作成したので、備忘録です。

1)ケータイ用振り分けスクリプト

下記のサイト様のPHPをダウンロードして、利用させていただきました。

>携帯振り分けPHP

ダウンロード、解凍後、index.phpの冒頭の振り分けURLにhttp://からの絶対パスを記入して、indexのある階層にアップロード
パーミッションを705に変更


2)キャッシュの問題

とりあえず自分の携帯でしか動作確認できないので、していたところ、
変更したのに反映されず、ページを更新しても変わらない・・・なんで??かなり困りました。
検索したところ、auの場合、キャッシュがしつこく残っていてこの3行がどうやら有効みたいです。
というわけで<head>の中に入れる。
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="-1" />



4)ケータイ用サイトに地図を設置する

Googleの携帯用Map表示サービスを利用してタグを埋め込みます。

PC版の Google Maps API と違い、Javascript を必要としないので、携帯電話向けの Webページに貼り付けることができます。

下記のページを参考にしました
>Google マップが携帯でも表示できるように
要するに、緯度と経度、マーカーの位置、縮小率、APIキーの4点を下記のサービスを使って割り出して、入れてあげるだけで大丈夫。

上記のページの通りにやってうまくいかなくて悩んでいたら
改行がだめなのですね(^_^;。。。ソースの上で改行しないようにつなげて入れること。

<img src="http://maps.google.com/staticmap?center=緯度と経度&markers=マーカーの位置,red&zoom=15&size=240x300&key=キー" />

>ここで簡単に緯度と経度などの数字を取得できます

>GoogleMapのAPIキーの取得はこちら


5)ケータイにて電話をかけるタグ(普通に知ってると思いますが)

telタグ <a href="tel:xxxxxxxxx">

6)xml宣言と文書型

文字コードはshift_jisが良いと言われていますが、今回はutf-8で。
xml宣言と文書型のひながたも載せておきます。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<title>タイトル</title>
</head>
<body>


6)ページ全体のマークアップをして、▲.htmlという名前で保存したら、FTPにてアップロード
1ページのサイズは10キロバイト以内と言われています。(かなりおおざっぱな説明ですが・・・詳しくは携帯電話各社に記載されてます)
Dreamweaverを使用してる場合は、ページの右下にそのページの画像を含んだ容量が出るのでわかりやすいですね。
今回作ってるページを見ると、5Kになってました。

(1)のPHPの振り分け先に、ケータイからのアクセスの行き先を▲.htmlに絶対パスで指定
.htaccessファイルにて、スラッシュ以下が省略された場合、index.phpを読みにいくように指定する

例えばこんなかんじ
DirectoryIndex index.php index.html index.cgi index.shtml /404.html


下記のサイト様を参考にさせていただきました。
>携帯電話用ウェブサイトをつくりはじめた

7)せっかく携帯用にコンパクトなサイトを作ったのに、携帯Googleにて検索して出てくるページが、PC用になってしまう問題

携帯からURLでダイレクトにアクセスすると振り分けスクリプトが動いて、ケータイ用ページへリダイレクトしてくれます。
ところが、携帯Googleにて検索したときにヒットしたページからアクセスすると、PCサイトが表示されてしまいます。
これはGoogleさんが、PCサイトを勝手に(というかありがたいサービスなんですが)ケータイ用に変換してくれるんですね。
web標準で作っていて、なおかつimgの容量を極力少なくしておくと、PCサイトでもケータイでストレスなく読めるようにしてくれます。
でも、わざわざケータイ振り分けスクリプトをおいて、別画面を作ったんだから、携帯からのアクセスはこちらに行ってほしい。
というわけで探したところ、Googlewebマスターページに下記の件が載っていました。
Googleモバイル ヘルプセンター

Googleでは、携帯向けでないサイトを携帯電話の画面に合わせてコードを自動的に変換しております。ウェブページを変換することを望まない場合は、ユーザーがトランスコーダを経由してそのページを表示するときにそのユーザーを別のページにリダイレクトするようにGoogle にリクエストしてください。 リダイレクトをリクエストするには、ページの HTMLファイルのセクションに次の行を含めてください。

<link rel="alternate" media="handheld" href="(モバイル向けURLアドレス)" />


というわけで、PCサイトに上記の1行を入れております。

2008年11月5日水曜日

Yahoo!に好かれるSEO対策の基本

Yahoo!検索で上位表示できるようにする方法がわからない、Yahoo!対策は難しい、何を指標にすればいいの?Yahoo!検索エンジンの特性がわからない・・・
SEO対策関連の掲示板でそんな"ボヤッキー"をよく見かけるんですが、
本家ヤフージャパンのサイトにわかりやすい説明が載っているのでそこをよく読めば基本的なところが掲載されてるのにな・・・と思います。

Yahoo!Japan検索インフォセンター



このページはすごく役に立ちます。

# Yahoo!検索コンテンツ品質ガイドライン
# robots.txtとは?
# メタタグとは?
# メタタグの記述と検索エンジン
# 検索エンジンスパムとは
# リダイレクトとは?・・・・・・などなど

Yahoo!検索のSEO対策の最初の一歩を始める前に全部読んでおくべきですね。
とくに、
Yahoo!検索コンテンツ品質ガイドライン
ここは必読です。

(上記ページからの引用)
Yahoo! JAPANが検索結果に表示されるように努めているのは次のようなウェブページです。

* オリジナリティーや独自性のある内容を持つウェブページ。
* インターネット利用者を第一の対象として設計されたウェブページ。
* 外部へのリンクを設置している場合には、そのリンク先のウェブページがリンク元のウェブページの内容と関連性があること。あるいは、関連する内容を喚起させるリンクであること。
* タイトルやディスクリプションなどのメタデータ(HTMLの<head>のなかの記述)で、ウェブページの内容が適切に記述されているウェブページ。
* わかりやすくデザインされているウェブページ。



検索結果でウェブページの表示順序を上げるには



リンクのところなんか、本当に参考になりますね。
よく読んでくれぐれも、SEO対策を過剰にやって自ら墓穴を掘るようなことをしないようにしましょう。


(引用)
ウェブページ内には、それぞれの内容に関連したテキストリンクを設置します。

文字列が画像ファイルで表されていると、クローラーが正しく認識できない場合があります。
また、イメージマップで設定されたリンクはクローラーが巡回しない場合があります。
すべてのウェブページをクローラーが巡回できるようにトップページにサイトマップのリンクを設置することをおすすめします。

関連するウェブページとのリンク

関連サイトの管理者やコンテンツ提供者を通じて、関連するウェブページとのリンク数を増やします。
ただし、リンク数を増やす目的で関連性のないウェブページとのリンクを増やす行為は「検索エンジンスパム」とみなされるため、表示順序が上がることはありません。


裏技を使って本来上位に来るべきではない中身のないサイトが上位表示されてしまったら検索エンジンの品質を問われてしまうわけですから、そりゃYahoo!本家側もがんばってそういうサイトは排除されるように日々進化しようとしてるわけで
それを欺こうとするのは、一時的に良い結果が出たとしても不毛な作業に終わる確率が高いですよね。
でもって、100歩ゆずって、裏技使って上位表示したところで、読者が求めているサイトになってなかったら結局は成果につながらないわけで、2秒で×マークを押されてしまう・・・・・
ただアクセスアップを狙いたいだけ?それとも成果(目標のことです。売り上げを増やしたいサイトもあるだろうし、ファンを増やしたい、イメージアップをしたい、読者に楽しんで欲しい、読者の役に立ちたい、会社を知って貰いたい、サイトには目標がいろいろあってそれぞれそのテーマは違うわけです)をあげなくてもいいんでしょうか?

必死で相互リンクをこつこつ増やす時間があったら読者が求めている情報をこつこつと増やす、
読者にわかりやすいようにサイト内を整備する、
いいサイトだな、安心感あるサイトだな、また読みに来よう・・そう思ってもらえる整備をする。
そちらに時間かけたいですね。
それと同じことをこの「サイトエクスプローラー」にも書いてあるじゃない(・∀・)!

>>Webの森 サイトオーナーが自分でできる基本のSEO対策

2008年10月10日金曜日

DreamweaverでWordPressのテンプレートを編集する方法


動画マニュアルにてWordPressの使い方やカスタム方法を紹介したところ、一番アクセスの多い動画が、「DreamweaverでWordPressのテンプレートを編集する方法」という動画でした。
前編・後編の2本になってます。


Dreamweaverを便利に使っているデザイナーさんは、「テーマエディタを使って編集」と言われても壁が高いかもしれませんよね。
「WordppressのテンプレートってDreamweaverを使ってローカルで編集できるんですね!?これなら私にもできそうです」という感謝のメールも届きました。


WordPressはPHPで出来ているので、PHPになじみのない方は、ソースを開いただけで「壊したらどうしよう・・」と腰が引けてしまうかもしれませんが、
幸いテーマは複製できるので、フォルダごと複製してバックアップをとっておけば、
いざとなったら
(........どこかコードを壊してしまうとたいてい真っ白画面になります(^_^;)
管理画面で元の編集前のテーマを選んで適用させればすぐに元に戻ります。


詳しくは、動画の末尾に書いてあるテキストも合わせて読んでいただけると意味が理解できるかと思います。
はまったらリファレンスと首っ引きで作業する日々の始まり~。。。デスヨ
WordPressテンプレートタグ一覧

『WordPress2.5でつくる!最強のブログサイト』
田中広将・志村俊朗 共著/ソーテック社


この本は、これからWordPressを始めるという方にはぜひおすすめです。
初級者から中・上級者にも役に立つ、わかりやすい&充実した内容。
初歩の初歩、データベースの作り方から、インストール作業、管理画面の使い方、プラグインの使い方などなど、最初にこなす一通りの作業はもちろん網羅してますし、
なによりすごく良かったのが、PHPについての入門的な解説部分。

PHPって何?っていうところから入る人でも、これを読んで、WordPressのカスタマイズをしてるうちに意味がだんだんわかってくるんじゃないでしょうか。
とくに初心者のわたしには、「WordPressのテンプレートタグって実は、PHPの関数だったんだ~~」ということさえ目ウロコで、ほんとにわかりやすい説明でした。


2008年9月28日日曜日

WordPress 月別アーカイブをカテゴリ毎に表示させる

月別一覧のリンクがあって、それをカテゴリ毎に分けて表示させたい・・・・
WordPressでこれをやろうとしたら、簡単なようでいて、簡単ではなかったです。
調べてもデフォルトで用意されてるパラメータだけじゃ実現できず、かなりはまりました。
プラグインも似たような目的のがいろいろあって、やっと理想の動きをしてくれるのにたどり着いたので紹介しておきますね。

配布元はこちら
Archives for a category WordPress plugin

1. ダウンロードしたファイルを解凍して、kwebble_archives_by_cat.phpをプラグインディレクトリへアップロードします。

2. プラグインを有効化します。

3. kwebbleの管理画面から
 Disable canonical URLs. にチェックをつけて、オプションを更新。

4. アーカイブリストを表示させたい場所に下記のタグで呼び出せます

<?php wp_get_archives('cat=1'); ?>

↑カテゴリー1だけの月別アーカイブ表示

<?php wp_get_archives('cat=2,3'); ?>

↑カテゴリー2と3の月別アーカイブを表示

(例)
カテゴリ1だけの一覧


カテゴリ5だけの一覧


(見本)

<?php if(in_category('1')): ?>

<?hp wp_get_archives('cat=1'); ?>//カテゴリ1のときは、1カテゴリのアーカイブ一覧を
<?php else: ?>
<?php wp_get_archives('cat=5'); ?>//それ以外のときは、カテゴリ5の一覧を出す
<?php endif; ?>

2008年9月27日土曜日

SEO対策=>上位表示できる裏技を探す人、便利なツールを探す人??

知人から、自社サイトのSEO対策のことで質問を受けまして、
ボランティアだったんだけど、以前他の件でお世話になったことがあった方だったので、細かく検証してあげたところ、
ご本人様にしてみれば、有効なアドバイスが貰えるかと期待していたところ、できそうもないことばかり言われてショックを受けてしまったようで、怒らせてしまいました。


私にしてみれば、誰もはっきりは言ってくれないみたいなので、「そんなことより基本の基本を忘れてますよ・・」とずばり指摘してあげたつもりだったんだけど
現サイトの欠点をずばりと言われて傷ついてしまったようで、返って逆ギレされてしまうという不本意な事態になってしまいました。とぼとぼ。。(Q_Q)↓


SEO対策というと、上位表示できる裏技を探す人、便利なツールを探す人、安くて簡単に上位表示させて貰える業者を探す人・・・こんな人が多すぎですね。


その会社さんについては、ちょっと具体的には書けないんだけど
例えそれが売上目的のためであっても、「読者の為になるサイトになっているか」これを忘れては、どんなにキーワードを詰め込んでも
最終的には検索エンジンの頭脳の進化に追いつけず、つまりは「ハリボテじゃんこのサイト。よって却下である」と結論を下されてしまうのです。

ハリボテじゃん・・と結論を下されるのは、そのサイトに対して「ハリボテじゃん」ではなく
細かくターゲットのキーワードがあるわけで
そのキーワードに対して本当に上位表示してもいいサイトだな・・と思われるような内容だったら
ちゃんと基本のSEO対策してる限り、上位に来るんですよね。
で、いくらいいサイトでも、そのキーワードに対して、意味のない内容だったら
頑張って対策したところで、そのうちばれて圏外に・・・・・・・

だから、目先の対策するより先に
「コンテンツの充実」
「読者の役に立つ情報を」
「信頼される・良い印象を持たれる店構え(見た目のデザイン)」
この3つを先にやって、さらに基本のSEO対策も理解しながら施すと効果があるんだけど・・・と
指摘したまでです。

だって、ターゲットのキーワードで検索したときに、最低10社は一画面に顔が並ぶわけでしょう。
真剣にそのサービスを探している読者なら、上位サイトを何社かクリックして比較検討します。
そのときに、「あら・・・3流かな・・・この会社は」という印象もたれたら
いくらクリックして貰えても、最終段階で見込み客を逃してるわけで。
見た目のダサイ(素人の手作り感がばればれな)webサイトは、きちんとした印象の会社にはそりゃ負けてしまうってば。。。
しかも、ものすごいたくさんの物欲しげなキーワードがヘッダーとフッターとサイドナビにずらずらーっと並んでいるのを想像してくださいな。ね?
てことです。

2008年9月25日木曜日

WordCamp Tokyo 2008

WordCamp Tokyo 2008に行ってきました。

WordPressってなに?な方のために説明すると、
わたしは常々、ブログやCMSの作成で、WordPressというブログツールを愛用してるんですが、そのソフト、本家は英語版。
日本人のわたしらが使うには、日本語化されたWordPressがなくてはならないわけで・・・そして日本語化には大勢のボランティアの方で支えられていまして
その日本語プロジェクトの主要メンバーさんたちが実行委員会になって開催した公式イベントなわけです。

常々公式サイトのフォーラムで質問に答えてくれている有名な方々や、プラグインなどを日本語化してくれてる方々、プラグインを作って配布してる人とか、すごいメンバーが勢揃い。
とても刺激になって楽しめました。

いろんな方のプレゼンがあってどれもとても勉強になったんですが、
yuriko.netのyurikoさんの
今の時代携帯対応のサイトを無視しては、日本のネットユーザーの半分を切り捨ててるも同然・・・な指摘、かなりショックでした。
自分が携帯触るの苦手というか、文字打つのもとても遅くて、あんな小さい画面で何がわかるのさ・・みたいな日常なもんで、
ケータイユーザーにもちゃんと情報が読めるようにしてあげることが、これからのサイト作りにも必須になってくるんだなぁ・・・と実感しましたです。。
携帯対応プラグインは別のを入れていたんですが、さっそくKtai Style導入してみなければ。。。。

それから何よりびっくりしてしまったことが、、、
Adobeシステムズ社の西村真里子さんのプレゼンで、このモモンガの森が一瞬ですが。。。。
どーんと紹介してくれまして。メガテンです。。。
なんでも「Dreamweaverを使ってWordPressのテーマを作られている人がこんなに多いんですよ」という事例紹介で。
一瞬だったけどみんな。。見てくれたかな~(,,・∀・)

もうちょっとコンテンツ充実させないと恥ずかしいですね。。
WordPressについてももっといろいろ書いていけたらいいなと思ってます。

>初心者向け動画マニュアルはこちら WordPress入門 (動画で解説!ワードプレス日本語版)

2008年9月13日土曜日

WordPress 初心者向け 動画講座



WordPressの初心者向け解説ページがあまりないので、作ってみました。
動画講座です。
>WordPress入門 (動画で解説!ワードプレス日本語版)

どこから見たらいいかわからない人のために・・・
右側にメニューが並んでますが・・・
STEP1~3までをそれぞれ(1)から順に見ていただくとわかりやすいかと思います。
特に、データベースの設定のところなどが敷居が高いと思うので、
さくらサーバーにデータベースを作成して、その値をwp-config.phpにどう入れれば良いか・・・・
具体的にやってみたのでわかりやすくなってるかと思います。

※解説はHTMLとCSSの初級を卒業した方向けになっています。
スタイルシートがわからない・・と言う方は、デザイン(テンプレートやCSS)をむやみにいじると壊れますので気をつけましょう。


STEP1)WordPressのインストール (4)
(4)WordPressのインストール
wp-admin/install.phpへアクセスしてインストールします

(3)サーバにアップロードする
FFFTPの設定の方法と、アップロード。

(2)WordPressのダウンロード
WordPress日本語サイトから最新版をダウンロードして解凍し、初期設定(wp-confing.phpの書き方)

(1)データベースサーバーの設定
さくらのスタンダードプランを契約して、コントロールパネルに入り、データベースの設定をするところまで


STEP2)WordPressの使い方 (6)
(6)スパム対策プラグインAkismetの使い方
Akismetの使い方はちょっと敷居が高いですが、抜群の威力を発揮してくれるので、ぜひ導入することをおすすめします

(5)テーマの変更とウィジェットの使い方
テーマ(デザイン)を変更してみましょう。

(4)コメント投稿とコメント管理
コメントの投稿の仕方と、スパムなどの管理

(3)ダッシュボード >管理タブ の使い方
管理タブではすでに投稿された記事や、コメントなどの編集ができます

(2)ダッシュボード >設定タブ の使い方
設定タブで、基本設定をしましょう

(1)記事を投稿してみよう
まずは記事を投稿してみて動作確認してみましょう

STEP3)WordPressのデザイン変更方法 (5)
(5)Dreamweaverでテンプレートを編集する方法
テンプレートはローカルで編集してFTPで更新することもできます。今回はDreamweaverでのやり方を紹介します。
エディタを使うときは、文字コードに注意しましょう。メモ帳で開くと文字化けしてしまうので、
文字コードが指定できるエディタを使ってください。

(4)テーマエディタの使い方
テーマエディタを使って、テンプレートの編集をしてみましょう

(3)ウィジェットを使ってパーツの追加
ウィジェットはサイドバーのパーツ・項目を入れ替えたり、設定したりできます

(2)テーマの変更方法
無料配布されているテーマをダウンロードしてきて適用させてみましょう

(1)スタイルシートでデザインを変更する方法
テーマエディタを使ってstyle.cssを変更する方法


WordPressのバージョンは2.6.1

2008年9月2日火曜日

seesaaブログで再構築ボタンがなくなった



久々にseesaaブログのコンテンツ変更を行ったら、どこを探しても「再構築」ボタンが見あたらない・・・・・
どこかに移動したのかとかなりいろんなところを探しても見あたらず
もしかして再構築されてるの・・?と思い、ブログを見てみるけど変更が反映されてない・・

ヘルプの中をかなり探してやっと情報を見つけたので
他に困ってる人がいるかもしれず・・書いておきますね。

基本的には記事を投稿した段階で再構築する・・にチェックが入っていれば、投稿時に再構築はしなくて良い。
ほかの場所を変更したときも、再構築はどうやら行われている(?)みたい。

それでも反映しなかった場合は、
設定 > ブログ設定
の一番下
最新の情報に更新 の横の「実行」ボタン
これで更新されます。


再構築の一手間が今まで結構面倒だったので、これでますますseesaaブログの使い勝手が良くなったような気がします。
(それにしても、、ヘルプのわかりやすいところに書いておいてほしいなぁ・・・)

2008年9月1日月曜日

WordPressのアップグレード方法

WordPress2.5を2.6.1にアップグレードしたので備忘録で書いておきます。
バックアップの方法は、phpMyAdminを使ったやり方がいろんなところで紹介されてますが
私はNavicatを使っているのでそちらの方法で・・・・



<データベースのバックアップをとる>

Navicatの使用方法

1)ntunnel_mysql.phpを任意の名前に変更(例▲▲.php)
2)www(もしくはpublic_htmlとかhttpdocs)の下に任意のフォルダ(例●●)を作成して▲▲.phpファイルをアップする
3)ベーシック認証をかける
下記のサイトへいくとベーシック認証が簡単に作れます(とっても便利!!)

.htaccessファイルを自動生成

ユーザー名とパスワードを入れて(ランダム作成じゃなくて良い)、
出てきた1行をhtpasswd.txtに保存し
wwwの上の階層の秘密のフォルダ(例/private)に入れ、.htpasswdという名前に変更
次に.htpasswdまでのサイトパスを窓に入力(例 ★★★がサーバーのユーザー名)
/home/★★★/private/.htpasswd
下の窓に文字が生成されるので、それをコピーしてhtaccess.txtに保存して
●●フォルダの中にアップし、.htaccessという名前に変更
これで●●フォルダ以下はベーシック認証が完了

4)Navicatを立ちあげ、新規接続
DBのホスト名、ユーザー名、パスワードを入れる




▲▲.phpまでの絶対パスhttp://www.example.com/●●/▲▲.phpを入れ
ベーシック認証にチェックし、先ほどのUser名とパスワードを入れる

5)DBに接続して、保存したいテーブルを選んでから、バックアップボタンで保存

<WordPressアップグレードの方法>
WordPress のアップグレード/詳細

1)全ての WordPress ファイルをバックアップ
FTPにてすべてのファイルをダウンロードしておきます

2)すべてのプラグインを無効にする

3)WordPress パッケージをダウンロード・展開
WordPress 日本語版

4)旧 WordPress ファイルを削除

【削除してはいけないファイルとフォルダ】
  • wp-config.phpファイル

  • wp-contentフォルダー

  • wp-imagesフォルダー

  • wp-includes/languages/フォルダー

  • .htaccessファイル

  • カスタマイズしたContentとプラグイン (画像やその他のカスタマイズしたContent、プラグインがwp-contentフォルダー内にある場合は、絶対に削除しないこと)



【削除するファイルとフォルダー】
  • (上記以外の)wp-* , readme.html, wp.php, xmlrpc.php, license.txtなどのファイル

  • wp-adminフォルダー

  • wp-includesフォルダー(languages以外)



5)新ファイルをアップロード
※wp-content フォルダーを削除しなかった場合は、アップロード中にいくつかのファイルを上書きする必要があります。
新しいものや変更のあったファイルだけを新しいwp-contentフォルダーにアップロードしてください

6)ブラウザーからwp-admin/upgrade.phpにアクセスして、WordPressアップグレードスクリプトを実行

7)プラグインの有効化

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の再インストール・リカバリ…となってしまいますが、これ以降はメーカー・機種名の記述が無いとどうにも調べようがありません
(メーカー・機種ごとにリカバリの方法が異なるため)

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

2008年7月26日土曜日

情熱大陸に出れるってすごいじゃん。。



情熱大陸(TBS) 宮崎学 8月10日 PM11:00放映

「今度gakuが情熱大陸に出るよ」と知人に言ったら、すごいすごいを連発されて、
そんなすごいことならちゃんと告知しないとね・・・
というわけで、お知らせと、裏話などもちらっと。。

最初に取材依頼の話があったときは、なんとあっさりと断ってしまいまして。
かなりの長時間拘束を受けるということで、面倒くさがりの宮崎学は「TV局の取材はこりごり」と逃げ腰。
番組企画者の方がとても熱心に依頼してくださったんですが、ずっと放置してしまいまして・・・・

これで終わりかな・・・と確定したかと思ったある日とつぜん、駒ヶ根のアトリエまで訪ねてきちゃったのです。
「宮崎さん、それでもどうしても取材させてください」
そのときはちょうど旅先で取材中だったので焦って、とりあえず別の日にアポを。
その熱心さに押されて結局取材を受けることになりました。

それから始まった長い取材の日々・・・・・。
春の森の撮影現場、むささび荘で展覧会の準備、原稿に追われて缶詰状態になってるところ、都会のけもの道で取材する様子、講演会場での様子、仲間と飲むところまで潜入、おいたちも...........etc ほんと日本中何処にでも取材スタッフがついてきた約4カ月。
私もいくつかの現場に同行して取材してる様子を外から見てましたが・・・・
ときにはヒルに襲われパニックになり(カメラマンさん)
早朝から深夜まで、こちらがいいご機嫌で飲んでいるときもひたすら取材取材・・・
TBS取材班の皆さんの取材にかける"情熱"には、私モモンガのほうが驚きでした。

4カ月ほぼ毎日、いったい何百時間のフィルムを回したことか・・・・。それが
たった30分に編集されるんですよアータ。。。└(T_T;)┘ほんとスタッフの方々のほうが情熱大陸です。

というわけで、
どんなふうに編集されてくるのかとても楽しみです。
興味のある皆さんお見逃しなく・・・

↓動画はすっごい懐かしいCM レアだと思います・・


宮崎学公式サイト

宮崎学 講演のご案内

ブログ gakuの今日のヒトコマ

ツキノワグマ事件簿

野生動物のライブカメラ

森の仲間コミュニティ(gakuの裏日記も読めるSNSです。仲間募集中)

2008年7月5日土曜日

スタイルが効かない・・何がいけない・?

先日、CSS初心者の友人がメッセで泣いていたので、
下記のサイトを紹介してあげたところ、無事解決した・・とのことでとても喜ばれました。

初心者が陥りそうなCSSの7つの間違い

スタイルが効かない理由はいくつかあって上記のブログに書いてある項目をチェックするだけでほとんど解決するので、慌てずにひとつひとつ確かめていくといいかもしれません。


□外部CSSファイルを読み込み忘れた。(CSSファイルの読み込みパスが違う)

□IDとclassの指定を間違えた。

□子孫セレクタの構造が間違ってた。

□途中のプロパティのセミコロンを付け忘れてた。

□別のところで優先度の高いセレクタで書いているのを忘れていた

↑これが一番やっかいですね。サイトが大きくなってきたり、しばらく時間おいてから
更新したりするときに、以前どんな手順で構築していったか忘れてしまって、ありがちです。

ここから引用-------------------------------------------

●通常セレクタ(bodyとか) 1点
●クラスセレクタ(.contentとか) 1点
●IDセレクタ(#containerとか) 100点
●直接指定(style="color:#fff"とか) 1000点

(例)
#container #headLine .contents { ... }

という指定があったとすると、IDセレクタの優先度は100なので、

#container(100) #headerLine(100) .contents(1)

となります。
優先度は単純に足し算なので、この場合は優先度は「201」となります。

なので、#articles .contents { ... }と書いたとしても、当然優先度の高いスタイルが適用されるのでいくら更新してもスタイルは変更されません。


-------------------------------------------ここまで

というわけで、上記のブログ便利なので。
他にとーーーってもありがちな「CSS勉強する上でぶつかる壁」なポイントを押さえてくれてるので
初心者さんは押さえておくと良いかと・・・・




参考になったよ!って方はwebの森のfacebookページへイイネをしてね(v^ー゜)



2008年5月30日金曜日

アニマル黙示録の写真展と講演会




板橋区のエコポリスセンターにて、環境月刊特別企画として、
宮崎学の写真展と、講演会が行われます。

写真展では、衝撃の問題作「アニマル黙示録(講談社刊・現在廃刊で発売されていません)」の写真をもう一度みたい・・という方は必見です。
6月1日は宮崎学が会場におります。

講演会は席に限りがあります。
先着順となっていますので、お早めにお越しください。
100枚近くの写真上映を見ながら、楽しみながら環境問題に興味を持ってもらえる講演です。


<写真展>アニマルアイズ〜動物たちからの警鐘〜
6月1日(日)〜15日(日)9:00〜17:00
エコポリスセンター地下1Fホール 【入場無料】

<講演会>
●とき/6月1日(日)午後1時〜2時半まで
●テーマ/「動物の目から見た環境問題」
●講師/自然界の報道写真家 宮崎学
 スライド上映を楽しみながら、環境問題について考える内容となっています
●ところ/エコポリスセンター地下1F視聴覚ホール
●対象/小学生以上
●費用/無料
●定員/120名(先着順です。当日会場へお越しください)


板橋区エコポリスセンターホームページ

地図と交通案内



2008年5月16日金曜日

Flashで手描きイラスト


動画講座で、無謀にもFlashを初めてしまいました。自己流で、FlashMXを使っていた頃から技術的にはなんも進歩してないので、とてもFlashのマニュアルを作るほどのテクはないんだけど、
わたしのよく使っている機能くらいなら紹介できるので・・。
初回はとりあえず、イラストを描く方法・・ということで基本機能を紹介しました。
イラストに興味がない方も、この基本機能を知っておかないと、ナビを作ったり、動かすためのパーツを作ったりするのに、かなり戸惑うと思うので、面倒でも一度各ツールの使い方に慣れておいたほうが効率良いと思います。

ちなみに左のマンガは、Flashで描いてみました。


(1)新規Flashドキュメントの作成

フラッシュで新規にドキュメントを作成し、画面の大きさを設定、
鉛筆ツールを使って、フリーハンドで線を描いてみる方法です。
消しゴムツールの使い方も一部紹介します。

(2)Flashでの線の修正方法

Flashでの線の修正方法にはいくつかあります。
選択ツールで、角度やなめらかさを調整する方法、
選択ツールで選択しておいて削除したり移動したりする方法、
ダイレクト選択ツールでアンカーポイントの移動もできます。
今回は、選択ツールでなめらかにする方法をやってみます。
こういう感覚的な操作は、illustratorやFireworksにはできない、Flash独自の動きですね。

(3)Flashのブラシで色を塗る

Flashでのブラシの使い方は、独特です。
イラストレーターでブラシで絵を描くと、全部に細かいアンカーポイントが付き、けっこうな容量にもなるし、修正方法も楽とは言えません。
逆にフォトショップでブラシで絵を描くと、消しゴムで消したり、色を変えたり・・などはできますが、ビットマップ画像(写真のようなドットの集まり)なので、拡大することはできないし、変形など繰り返せば劣化します。
ところが、フラッシュのブラシは、ブラシで描いた直後に、ビットマップのように合体され、一つの塗りとして認識されるので、容量は食いません。
しかも、イラストレーターのベクターデータのようにアンカーポイントがついて、拡大縮小、変形自由。
同じ階層で上にブラシで塗り重ねると下の色は消えるというのもびっくり。(下の色を消さないで、色の下の空間だけに色を入れることもできます)
とても独特な性質をもったブラシ機能です。
最終的にムービーとして動かすことを目的としたソフトなので、容量を自動的に減らしてくれるというありがたい機能です。

(4)塗り色の修正

1~3までで描いたイラストの色を修正してみます。
線が上にのると、自動的にカットされるあたりが、これまたFlash独自の操作感ですが。
慣れるといろんな処理が早くできてかなり便利です。

(5)イメージのillustratorデータへの書き出し

とっても便利な機能、フラッシュで描いたイラストのaiデータへの書き出しを紹介します。
ちゃんと線の情報と、面の情報が保たれているので、
拡大縮小、線の太さや色など、自由に再加工できとても便利です。
わたしはこの方法で、Flashでイラストを描いて、illustratorデータに書き出しして、仕上げをすることが多いです。

モモンガの描いたイラストはこちら

2008年5月15日木曜日

大阪・カタログハウスの学校で環境セミナーがあります 5月17日(土)



通販生活・・わたしも愛用しているカタログ通販の会社ですが、このカタログハウスで年間通していろんな興味深いセミナーを開催してます。
今回、宮崎学が講師になって環境セミナーを開きますので、ご案内します。
関西圏の皆様、興味があるかたはぜひお越しください。

カタログハウスのホームページ
http://www.cataloghouse.co.jp/
講演案内のページ(地図などもこちら)
http://www.cataloghouse.co.jp/study/index.html

-------------------------------------------
自然と人間の共存をテーマに40年以上にわたり
「自然界の報道写真家」として活躍中の宮崎学さんは、「黙して語らない」自然界を知るためにその懐へ自ら入っていきます。
人間とあらゆる生物をおなじ土俵において、人間中心でなく動物たちからの視線で自然界を見つめつづけ、そのメッセージに耳を傾けています。
「どうしてクマは人里に出現するようになったのか。」
「工場の轟音や車の騒音も恐れない野生動物が増えている。」
「人間が持ち込んだ生物が原因で 天然記念物の野鳥が絶滅の危機に瀕している。」
都市化、飽食、ゴミ問題、国際化、過疎化…人間の生活が豊かになると共に日々変化し続ける自然環境の中で、野生動物は新しい環境に適応し、強かに生きているのです。
野生動物たちをつぶさに観察してきた宮崎さんとたいせつな自然のいまを見つめ直してみませんか。
日本中を巡った冒険談もお話いただけます。

2008年5月17日(土)
午後1時30分〜3時
講師:宮崎学さん(写真家)
●定員:80人
●参加費:1000円
●場所:〒556-0011大阪市浪速区難波中2-10-70 なんばパークスタワー3階

お申し込みお問い合わせ

-------------------------------------------
宮崎学の講演案内 (環境問題セミナー講師)

gakuの今日のヒトコマ

公式サイト・森の365日

2008年5月5日月曜日

Fireworksで金色のシールを作ってみる



Fireworksのチュートリアルリンクに載っていた「ゴールドシール」を作る方法を試してみたので、それを動画マニュアルにしてみました。
↓参考サイトはこちら
http://www.designwalker.com/2008/04/fireworks-tutorial.html

チュートリアルの公開元は英語のサイトなので、よくわからなかったところは自己流にアレンジしちゃってます。
ありがたいチュートリアルを公開してくれた元サイト様には感謝です。

Fireworksで金色のシールを作る方法

(1)金色のシール-ギザギザの円を描く
(2)金色のシール-立体感をつける
(3)金色のシール-箔押ししたような文字
(4)金色のシール-文字を丸く並べる
(5)金色のシール-グループ化して回転

1〜5まで順番に見ていただければできるようになっています。

2008年4月30日水曜日

webデザイン・初心者のためのテーブルレイアウトのコツ



ホームページを作る上での基本形に、ヘッダー+フッター+2カラムの形がありますね。
よくブログでみかけるこの形です。

ブログはCSSデザインで構築してある場合がほとんどですが、初心者にとってCSSデザインを覚えるのは壁が高い・・・かも??
というわけで、初心者さんにオススメなのがテーブルを使って作る方法。
今回はテーブルデザインのポイントと初心者さんが間違いやすい部分のお話です。

(1)基本形はこれになります



ソース


<table width="500" border="1">
<tr>
<td height="22" colspan="2">ヘッダー</td>
</tr>
<tr>
<td width="129">サイドナビ</td>
<td width="355">メイン</td>
</tr>
<tr>
<td colspan="2">フッター</td>
</tr>
</table>



(2)1を改良するコツとしては、すべてのセルに valign="top"を入れて上にくるようにすること




<table width="500" border="1">
<tr>
<td height="69" colspan="2" valign="top">ヘッダー</td>
</tr>
<tr>
<td width="132" height="113" valign="top">サイドナビ</td>
<td width="352" valign="top">メイン</td>
</tr>
<tr>
<td height="46" colspan="2" valign="top">フッター</td>
</tr>
</table>



(3)で、サイドナビを入れたいですよね・・・。基本枠の中にさらに枠を作りたいときの基本は、こんなふうにするのではなく





(これは悪い例です)
<table width="500" border="1">
<tr>
<td height="69" colspan="2" valign="top">ヘッダー</td>
</tr>
<tr>
<td width="145" valign="top">メイン</td>

<td width="339" rowspan="5" valign="top">メニュー1</td>
</tr>
<tr>
<td valign="top">メニュー2</td>
</tr>
<tr>
<td valign="top">メニュー3</td>
</tr>
<tr>
<td valign="top">メニュー4</td>
</tr>
<tr>
<td valign="top">メニュー5</td>
</tr>
<tr>
<td height="46" colspan="2" valign="top">フッター</td>
</tr>
</table>



(4)このように、さらに中にテーブルを入れると制御しやすくなります





<table width="500" border="1">

<tr>
<td height="69" colspan="2" valign="top">ヘッダー</td>
</tr>
<tr>
<td width="203" height="113" valign="top"><table width="200" border="1">
<tr>
<td>メニュー1</td>
</tr>
<tr>
<td>メニュー2</td>
</tr>
<tr>
<td>メニュー3</td>
</tr>
<tr>
<td>メニュー4</td>
</tr>
<tr>
<td>メニュー5</td>
</tr>
</table></td>
<td width="281" valign="top">メイン</td>
</tr>
<tr>
<td height="46" colspan="2" valign="top">フッター</td>
</tr>
</table>



制御しやすいからと、テーブルの入れ子入れ子入れ子・・・をどんどん繰り返していると、
複雑なソースになって、あとで修正したいときなどに混乱する場合もあるので
入れ子は最低限に使うようにしましょう。

この方法の応用編を動画マニュアルにて解説しています。
ドリームウィーバーを使ったテーブルデザインの方法
(1)から(6)まで順番で見ていただくと、どんな手順でやったら効率が良いかわかっていただけると思います。

2008年4月6日日曜日

ビジネスブログとは・・・



ビジネスブログ(企業向けブログ)の基本を考えてみました。

* ブログの主催者が明確である
* 本サイトの更新情報や、読者へのお知らせを掲載する
* 本サイトを読む読者にとって、役に立つ情報を発信する
* 本サイトへのリンクを入れ、本サイトの案内の役目も担う
* 本サイトのイメージアップになるようなデザイン
* 読者(お客様)からの問い合わせ窓口がついている

基本を想定して、それにあったカスタマイズを行ってみましょう。

<参考 動画で学べるビジネスブログの作り方>

* seesaaを使ったビジネスブログの作り方
私が作っている動画マニュアルのサイトですが、ここではseesaaブログを使って、企業ブログ風にカスタマイズする方法を動画にしてみました。初心者向けになっていますので、参考にしてください。見本はseesaaブログですが、動画を見て貰えれば、他のブログのカスタム方法の参考になるかと思います。
何故、seesaaにしたかというと、いくつか理由があるんですが、わたしがいくつか無料ブログをためした中ではピカイチで、カスタムのしやすさ、SEOに強い作り、広告を非表示にできる、2Gまでの大容量・・などなど、良い点がたくさんありました。

seesaaで始めるビジネスブログ

(1)新規登録の方法
(2)カテゴリ登録と記事投稿
(3)デザインを変更する方法
(4)サイドメニューの広告表示を削除す...
(5)サイドメニューに企業のロゴを入れ...
(6)自由形式コンテンツの編集

テンプレートをカスタムする方法
(1)ヘッダーの背景画像を変更する
(2)文字色を変える方法
(3)本サイトへのリンクを追加する
(4)フッターに企業情報を追加する
(5)フッターの文字スタイルを調整する...

<参考 SEO対策に有利なビジネスブログの作り方>

 こちらでSEO対策に有利なビジネスブログの作り方 という記事を書いたので、興味のある方は参考にどうぞ・・・・・

 以前は、被リンクを貰う方法と言えば、「相互リンク集」の作成が主流でした。ところが、SEO対策のために無節操に相互リンクを増やすサイトが増えてきたために、最近は関係ないサイトとの相互リンクがいくらあっても、検索エンジンが評価してくれない傾向にあるようです。

 もちろん、関係サイトのリンク集を作るのは、読者のためにもなるので、読者のためのコンテンツは充実させましょう。それとはべつに、有効な被リンクを増やす方法のひとつとして自分で対策できるのが、ブログを使ったSEO対策です。
無料ブログはたくさんあるので、手軽にブログの立ちあげができますが、中にはカスタマイズの自由がほとんど利かず、ビジネスブログには不向きなブログサービスもあるので、吟味してブログサイトは選びましょう。

2008年4月4日金曜日

XHTLM+CSSサイトはSEO対策に有利か?



「XHTM+CSS、いわゆるweb標準で作られたサイトは、SEO対策に有効である」
スタイルシートでのサイトの構築方法が紹介されたとき、こんな説が一般的でした。
つまり
「検索エンジンクローラーがやってきて、情報を収集するときに、クローラーが読みやすいサイト、
ソースが簡潔でクローラーにも理解でき、重要事項が前の方に書いてある」などの理由から、従来のテーブルデザインより、テーブルを使わないweb標準サイトの方が検索に有利だということです。

そこでさっそくCSSの勉強をして、今までのサイトを出来る範囲でリニューアルしました。

と・こ・ろ・が・・・・・・・・・・
苦労してリニューアルしたはいいけど、ほとんどアクセス数にも、ましてや成約率に変化なし・・・(-_-:)
焦りましたよ〜〜〜。「CSSサイトって検索に有利っていうけど全然話がちがう〜〜」なんて・・・・
それもそのはず、基本の基本を知らなかったわけで、自分の勉強不足だったんですけどね。。。

というわけで壁にぶつかった時に、大阪のとあるSEOセミナーを受講しました。

大阪 SEOセミナーの山下先生です。
この先生の教えてくれる方法は、難しい概念や専門用語は登場しません。
自分のサイトの身の丈にあったやり方で、初心者向けに、サイトオーナーが自分でできる方法を教えてくれます。

現に山下先生に教わった方法で、サイトを最適化したところ、着実に順位が安定して上位に表示されるようになりました。
また、この方法は、Yahoo!アルゴリズムの変動に比較的強いという特徴があって、Yahoo!順位が落ちたとたくさんのサイトオーナーさんが泣いているような激動の時期でも、ほぼ順位に変動がありません。
実際、20を超えるサイトで試していて、2年ほど経過を観測してますが、今でも実感しています。

もし、
「自社でやってる余裕がないけどSEO対策をどこかに外注したい。だけど魑魅魍魎の世界みたいだし、どこに頼めば良いかわからない」という方は、
山下先生のSEOセミナーを受講してみるといいと思います。

サイト作成は自分でできないが、専任のデザイナーに任せているという方は、担当デザイナーさんがうまくリニューアルできるように個別指導をしてくれます。(巷の有料のSEO対策サービスからしたら破格の安さなので不思議なんですが、この先生の対策の基本は「自分でコツコツ改良しましょう」なので、安いのです)でも基本を教えてもらってコツコツと改良していくとほんとに地道に効果が出てくるのでびっくりです。

業者に依頼したり広告を増やすのもひとつの方法ですが、その前にやっておかなければいけない基本の基本、これを知っているだけで財産になりますね。
あくまで、検索エンジン(クローラー)を欺く裏ワザではなく、公正で地道なSEO対策を。
クローラーのためのみならず読者にもわかりやすい優しいホームページを作ること。そんなSEO対策を教えてくれています。

さてはて・・・わたしのサイトでも、SEO診断してますので、お近くの方は(近くじゃなくてもできますが)気軽にお問い合わせください。>SEO対策リニューアル/SEO診断/SEO対策個別指導

2008年4月1日火曜日

ブログでの上手な記事タイトルの付け方

前回の続きです。

動画マニュアルでseesaaで作るビジネスブログというのを更新しています。
それに合わせて、わたしのサイトで、SEO対策に有利なビジネスブログの作り方・・というコンテンツを作ったので紹介します。



●上手な記事タイトルの付け方

ロングテールを利用したブログのSEO対策で必須といっていいテクニックが、上手なタイトルの付け方です。

「春がきました」では誰も検索してくれません。でも「遠山郷に春が来た」だと、遠山郷というキーワードが増えます。「遠山郷の小嵐神社・春の例祭」というさらに具体的な記事タイトルだと、小嵐神社の情報を探している人に親切です。しかも、小嵐神社についての情報が載っているホームページは少ないと思われるので、検索したときに1〜3位などの上位に表示される可能性が高く、それだけ来訪者も増えます。

そして、ありがたいことに、過去に書いた記事が、1年後の春に小嵐神社の春のお祭りの情報を探している人の役に立つこともある・・・今投稿した記事は未来に渡って営業してくれるようなものですね。
今まで、読者が集まる掲示板にこのような情報を書いていた主催者さんも、ぜひブログを活用してこまめに情報発信してみてください。
昔の掲示板の記事はなかなか検索エンジンにもヒットしませんでしたが、ブログの記事は、上手な記事の作り方をすればヒットしやすいのです。



遠山郷観光協会のホームページを紹介します。



 遠山郷は長野県の最南端、南信濃・上村地方の山深い谷。日本三大秘境のひとつと言われてます。
国の重要無形民俗文化財に指定されている遠山霜月祭、神様の湯治場の伝説がある秘境の谷に湧いた天然温泉「かぐらの湯」
日本の原風景が残る場所下栗の里、南アルプスの雄大なパノラマを望むしらびそ高原。
南アルプスの恵みをたっぷり含んだ名水・観音霊水・・・・山と渓谷に囲まれた里山です。
心安らぎ、人情味溢れる遠山郷へぜひ訪れてみてください。

このサイトは、信毎ホームページ大賞2004 特別賞を受賞しました。
村人と村の外の遠山郷ファンで育てているホームページです。

2008年3月29日土曜日

キーワードを選ぶ時のコツ




●間違ってるキーワード選定

たとえば、私のクライアント様の、「すきがら農園」のサイトは、すきがら農園で検索してもらって1位に来ても、それは当たり前であって重要ではありません。
大事なのはすきがら農園を知らない人が、リンゴ狩りをしたいな・・どこがいいだろう・・と思ったときに、なんていう言葉で検索するかを考えないといけません。
普通の人は行きたい地名プラスリンゴ狩りで検索しますよね。ということは、このサイトの一番重要キーワードは「松川 リンゴ狩り」もしくは「長野県 リンゴ狩り」ということになります。



●大きなキーワードと、小さなキーワード

分かりやすくするために、たくさんの人が検索するキーワードを「大きなキーワード」とします。逆に、少ししか検索する人がいないキーワードを「小さいキーワード」とします。

大きなキーワードは、たとえば「りんご」
この言葉は、リンゴ狩りをする場所を探している人もいれば、りんごを通販で買いたい人、りんごジャムの作り方を探している人、りんごの銘柄を調べたい人・・・・たくさんの可能性があるので、つまり大きなキーワード「りんご」で1位になっても、成果につながるお客様の割合が少なくなってしまう可能性があります。
反対に小さなキーワード「松川 リンゴ狩り」で検索する人は、今度の土日に松川町へリンゴ狩りに行こうと決めている人がほとんどなので、そういう人にサイトをみて貰えれば、成果につながる可能性がぐんと高くなります。
大きなキーワードを狙うあまりに、小さなキーワードを見落として(大事に扱わずに)結果、アクセス数ばかりがあがって、成果のあがらないサイトになってしまっている・・・こんなことも落とし穴なので、キーワードの選定がいかに重要か・・・ということがわかります。


●サイトの目的は?

サイトの目的は? 会社のイメージアップ、通販での売上げアップ、顧客に自社サービスをわかりやすく説明したい、オーナーとお客様とのコミュニケーションの場にしたい、・・・いろんな目的があると思います。まずは、その目的にあったキーワードの選定から始めます。
ホームページを持つ上で、SEO対策を 制作者任せにしては本当の効果は望めません。私は施主様と二人三脚で・・・をモットーにしてますので、まずはオーナーさんの意識改革からお手伝いして、ゆくゆくは自分でアイデアを出して試行錯誤しながら更新していけるような、そんな運営を目指したいと思っています。

>SEO対策ホームページ作成・リニューアルの相談もお気軽にどうぞ

無料ブログサービスのメリットとデメリット

無料ブログサービスの利点と言えば・・・・「申し込んだその日から、手軽にすぐ公開」できることですよね。でもデメリットもあるので、両方吟味したうえで、無料ブログサービスを使うか、ブログツールを使って自分の借りているサーバーの中に設置するかを選んだ方が良いと思います。
>引用もとはこちら SEO対策に有利なビジネスブログの作り方


●無料ブログのメリット(あくまでこういう傾向がある・・ということで一般論です)

* 無料で利用できる(レンタルサーバーへの費用がいらない)
* 提供されているテンプレートが豊富で、おしゃれなブログを簡単に設置できる。また、テンプレートも簡単に変更できる。
* ブログ自体に 脆弱性 などが見つかった場合でも、サービス提供元でプログラムを修正してくれる
* スパムへ対策が簡単にできるようなサービスがある
* 同じブログサービスを使っている人同士で仲間で交流ができる
* 携帯からのメール投稿など、携帯利用も簡単にできる
* ブログに付随させるアクセサリー(お遊びパーツなど)が豊富に揃っていて、それがどんどん進化しており、簡単に自分のブログに追加することができる。

●無料ブログのデメリット

* ブログサービスの規約にそって使用しなければいけないので、関係ない広告が入ることがある
* 規約の中に「利用者の書いた原稿を当ブログサービスが利用する場合がある」という項目がある場合あり。将来ブログを元に出版しようとしたら、ブログサービス会社に先に出版されてしまった・・などのトラブルがないといいんですが・・・この当たり各社規約が微妙なのでしっかり調べてください。
* 独自ドメイン(自分だけのURL)が持てない。アドレスの中に、ブログサービスのアドレスが入ってますね。つまり利用ブログサービスを引っ越しした場合、アドレスが変わってしまうという意味です。アドレスが変わった場合、それまでこつこつ溜まってきた被リンクや検索順位の価値がいったんゼロに戻ります。
* 引っ越しするときに相性がある。
ログを書き出すことをエクスポート、他社のブログのログを読み込むことをインポートと言いますが、それぞれブログによって、エクスポートに対応してないもの、インポートできる形式が限られているものなどがあり、しかも画像はエクスポート、インポートできない場合が多い。
* 当然ながら、そのブログサービスが終了してしまったら、自分のブログを全部失ってしまう。それでも文句は言えないと(ふつう)規約に書いてある。無料で利用させてもらっているんだからしょうがないですよね。
* ブログサービスのサーバーが落ちてしまったときなどは、更新したり、表示したりできない。(なかなかそんなケースはないし、オリジナルブログでもサーバーダウンはありえますが)

●オリジナルブログのメリット

* 自分の(借りている)サーバーの中にデータがあるので安心感がある。
* 技術がある人なら、かなり凝ったオリジナルサイトも構築可能(ブログだけど一見ふつうのホームページにして、日記は改造することでCMSとして使えます)
* 独自ドメインが利用できるので、サーバー移転などしても、URLをそのまま使い続けることができる。
* ログなどのデータはデータベースに溜まっており、そのデータは自分のものなので自由に利用できる。
* 無料サービスの規約に縛られることはないので、出版など著作権の心配も無用。

●オリジナルブログのデメリット

* スクリプトはフリー利用できるものが配布されていますが、個人利用は無料で利用できるが、商用の場合、ライセンス料を支払わないといけない(ものが多い)。
私の知っている中では WordPress は、商用でも無料なのでおすすめです。日本でブログツールというと、 MovableType(ムーバブルタイプ) が有名ですが、商用は現在5万円〜、海外ではWordPressの方が多いので、今後日本でもWordPressが増えていくかもしれません。
* データベースを使用できるサーバーでないと使えない。レンタルサーバーを選ぶときに、ブログツールが設置できる環境にあるかどうかチェックしましょう。
* DB(データベース)を利用するので、初心者さんには敷居が高いかも。
これまた私の知っているブログツールの中では、 ぶろぐん+が初心者向け でおすすめです。DBを使ったブログも設置できますが、テキスト版もあり、テキスト版の方でインストールすると、データはDBには入らず、通常のサーバー領域の中にたまっていきます。DBの操作方法がわからない初心者さんでも簡単に引っ越しなどができますね。

ロングテール手法の意味

動画マニュアルでseesaaで作るビジネスブログというのを更新しています。
それに合わせて、わたしのサイトで、SEO対策に有利なビジネスブログの作り方・・というコンテンツを作ったので紹介します。



●「ロングテール手法」の意味

ブログを運営してみて、アクセス解析を見てみるとわかると思いますが、いろんな人が様々なキーワードでブログに来訪していることがわかります。
そのキーワードは、オーナーが思っても見なかった言葉だったりして、ほとんどが売上げ(成約)にはつながらない読者だったりしますが、もしかしたらその中に意外な隠れているユーザーがいたりして、ブログを玄関口にして、本サイトに訪れてくれるかもしれません。
この隠れているユーザーを大事にするのが、俗に「ロングテールの手法」って言われるものですね。

例えば、わたしの運営しているサイトで、「 環境問題・エコロジー講演会・宮崎学 」のサイトがあります。
このサイトは、もちろん「環境問題 講演」というキーワードで最適化しているので、そのキーワードで上位に来るような対策をしています。
でも、「環境問題 講演」で検索をしてくれる人は、環境問題の講演会を主催しようとしている主催者でない限り、こんなキーワードでは検索してくれませんよね。(そのかわりそのキーワードで検索してくれた人はかなりの高い確率でサイト内を満遍なく見てくれるのですが・・・)

でも「サル 農業被害」とか「カラス ゴミ 対策」みたいな獣害で困っている人は、 宮崎学が書いている動物に関するブログ を読みに来てくれる可能性があり、そういう人は講演の講師などは探していないかもしれない。
でも、いつか将来・・・この記事を読んだことを思い出して、地域の農業委員会の集まりがあったときに「そういえばゴミ問題についての面白いブログを書いていた先生が、講演をしてくれるっちゅう話しだに」などとお茶のみ話で出る可能性もありですよね。
宮崎学の書いているブログは、カラスや動物、ゴミ問題に限らず、旅、食べ物、本、カメラ、いろんな話題を出しているので、細かくいろんなキーワードを含んでいおり、どこで意外なお客さんが拾えるか、可能性は際限なく広いわけです。

この、細かいキーワードを大事にしよう・・というのが「ロングテール手法」
メインキーワードで検索してくれる人が1日に100人いるとしたら、メインではない細かいキーワードっで検索して来てくれる人が、1キーワードにつき1人か2人として。でもそれが500件とか1000件とかあったら、メインキーワードより余程重要な玄関口になるというわけです。

そして、普通のホームページでもこれは実現できるんですが、更新・ページ追加作業など面倒なので、それを手軽にできるのがブログというわけです。
業者に出して「この記事を追加して」とお願いすればそれなりに制作費がかかってしまいますが、自分で手軽に更新できるブログ、これを利用しない手はありませんね(^^

2008年3月20日木曜日

ホームページにブログの記事を新着表示させる方法

ホームページに、ブログの新着記事を自動で表示する方法は・・・?
検索で出てくる参考サイトは難しいものが多いので、初心者向きに整理してみました。


ブログの利点はいろいろありますが、その中でも特徴的なのが「RSS」といって、ネットの世界に共通の形式で出力される信号のようなものを配信できることです。このRSSを自動で取得できるスクリプトをサイトに埋め込むと、あなたが書いたブログの新着日記が自動でホームページに表示されます。多少のタイムラグがありますが、手動でHTMLに新着表示を出している手間からすると雲泥の差。
新着日記を表示させて、訪問者に楽しんで貰ってもいいですし、サイトからのお知らせのような、更新案内に使ってもイイデスね。
下記のページで見本のソースを置いておきますので、使ってみて下さい。

難易度としては、
HTMLをソースの方で編集出来る & スタイルシートがある程度わかる方なら設置可能かと思います。


※たまーに直接メッセージで質問が来るんですが、初対面の方にいきなり質問いだきましても対応しきれないので、このブログへのコメントでお願いします。

規約にも書いておきましたが、記事を見て参考になった方は、ご自身のブログで該当ページを紹介していただけると嬉しいです!

>webの森:ホームページにブログの記事を新着表示させる方法

2008年3月19日水曜日

FC2 無料ブログのテンプレート変更方法




動画マニュアルで無料ブログの使い方を更新しました。前編はこちら


(4)デザイン(テンプレート)を変更してみる

今回は、テンプレートの変更方法です。
FC2は豊富なテンプレートがあるのが特長で、公式テンプレートと共有テンプレートから選べます。
共有テンプレートは、デザイナーやweb制作の有志の方が、自分で作ったオリジナルテンプレートを公開して、誰でもダウンロードして使えるようになっています。
無料ですが、それぞれ規定があるので(アダルトサイトは禁止とか、作者へのリンクは削除しないとか・・)守りましょう。
素敵なテンプレートを無料で使わせてくれる制作者の方には感謝です(´∇`)

また、テンプレートの中には「SEO対策済み」とされているものもあり、メタタグやタイトルタグの配慮だとか、ソースの記述の順序、自分でキーワードを増やすためのフリースペースをいれてあったり、そんな対策が行われているものもあるので、便利に利用できます。
(もちろんオーソドックスなテンプレートを利用して、自分でSEO対策になるようにカスタムすることもできます)

↓わたしモモンガがお世話になっているSEO対策の先生のサイトです
SEO対策講座・SEOセミナー ハブネット
ブログを使った集客の方法についても、ここの講座でいろいろ学びました。
ブログを使いこなして、何か自分の目的が達成できたらいいですね♪

2008年3月14日金曜日

「無料ブログ」入門講座





動画マニュアルで、「無料ブログ入門」というシリーズを始めました。
(まだDwの方もやりたい機能あるんだけど〜・・・・移り気なもんで・スンマセン)


初心者対象の「無料ブログ」の使い方講座です。ブログ登録の仕方から、日記を投稿する方法、オリジナルっぽくカスタマイズする方法まで・・。

FC2ブログの使い方

(1)新規登録の方法

無料ブログサービスはいろいろありますが、まずはメジャーなところで、FC2ブログの使い方を紹介してみます。
FC2の良いところは、なんといっても豊富なテンプレートデザイン。おしゃれなテンプレートがたくさん登録されているので、デザインを選び放題。全部無料で使えるなんて素晴らしいですね。

新規ユーザー登録の前に、フリーメールを取得しておくことをおすすめします。
FC2からの重要なお知らせや、もしパスワードを忘れてしまったときなどは、この登録メールに届くので、忘れないように覚えておきましょう。



((2)記事を書いてみる

(1)で、新規ユーザー登録、ブログの初期登録、初期のテンプレートの選択、ここまでやりました。
次に、とにかく記事を書いてみましょう。
ブログが表示できたら成功です。
ブログの良いところは、あれこれ悩むより先に立ち上げてしまった方が良い・・ということですね。
デザインもカテゴリもパーツも、ブログのタイトルさえ、あとから簡単に変更できるので始めていってやっぱりちがう・・と思ったらどんどん変えていっていいわけです。


動画では、すぐに管理画面に入れましたが、
パスワードを忘れてしまった人は、ログインのボタンの下にある「パスワードを忘れたら」という青い字をクリックして、メールアドレスを入れて送信してください。
そのアドレスにパスワードが届くはずです。


(3)日記に写真をつける方法

(2)では、日記を投稿してみました。
今回は、その記事に写真をつけてみましょう。
ログインして記事を書いたばかりのときは、まだログアウトされていないので、ブログの管理用というボタンから、再度管理画面に入ることができます。

写真は、デジカメから取り込んだままだと大きすぎる場合が多いので、事前に適度な大きさに縮小しておきましょう。(FC2の場合は500KBまで・・と指定があります)
デジカメからとりこんだ写真の上で右クリック>編集 を押すと(ウィンドウズXPの場合)ペイントが立ち上がるので、メニューの「変形」から「伸縮と傾き」
100%になっているのを、縦30% 横30% などと指定すれば縮小できます。

もちろん、最初からデジカメのモードを640pxなどにしておけば楽ですが。
今度は写真をプリント出ししたい時などに解像度不足だったら悲しいです。。。

********

パソコンに不慣れな方は「とてもブログなんて〜・・・!難しそうだし書くこともないし・・・」と敷居が高い方もいるかもしれませんが、初めて見ると日常生活の中でも「あ、これブログのネタにしよ」などと思えるようになってくるし、案外簡単だし、面白いですよ。友だちもできるし。。。

ぜひ気軽にチャレンジしてみてください。

2008年3月8日土曜日

「いきなりだけど超特急でコーディングお願い!」



最近、とある女性ディレクターさんと知り合いになれまして・・「いきなりだけど超特急でコーディングお願い!」と頼まれたので引き受けました。
特急でゴメンゴメンとしきりに恐縮されたんだけど、時間が長引くような仕事ほど赤字になりやすいので、特急は返ってありがたかったりします。(もちろん他の仕事と重ならなければ。。)

てことで、木・金でコーディングして土曜日にはプログラマーに引き渡したいとの予定だったんだけど、木曜日待てど暮らせどデザインが来ない・・
仕方ないので昼寝して万全の体制を整えて(昔は連続徹夜くらい平気だったのに~。。。)やっとこさデザインが届いたのが木曜夜の11時くらい。
スカイプで打ち合わせして、0時頃から朝まで作業して、間に家事やら仮眠やらも挟んだけど、結局金曜深夜には全14ページ完了しました。\(~o~)/お疲れさま~。。


そのディレクターさんと担当のデザイナーさんは、スタイルシートでの構築は初めてだったということで、「ぶっ飛びました~!!もう土曜は絶対無理って思っていたんだけど、こんな早いコーダーさん初めてみた!CSSで作るのってテーブルデザインでやる方法よりホントに早くできるんだねぇ」といたく感動してくれました。

「こんなに早くできて、しかもソースがめちゃきれいだし、プログラマーさんもマージしやすいって喜んでたよ。やっぱりスタイルシートの方法覚えたい」と言って、講習会に通うことにしたそうです。
なーんか普通に特急の仕事しただけですが、やたら感激して貰えて恐縮というか、いいお仕事が一緒にできてこちらほうが嬉しかったデス。。

担当のデザイナーさんとも初対面だったんだけど、「動画マニュアルのモモンガさんとお仕事ができるなんて~!モモンガさんを目指したいです!」なんて言ってくれましたが。
若いデザイナーさんですが、とってもきれいなボタンやらアイコンやら超スピードで作ってくれて、ファイヤーワークスのテクニックは私の方が勉強になったくらい。

ディレクターさんは、ものすごいパワーがあっていつもあちこち走り回っては、次々に新しいアイデアが浮かんでしまって「モモンガさん、今度こんなことやろう!」なんて携帯からメールしてくるような面白い人。
こういう元気が貰えるような人との出会いがあるとなんだか嬉しくナリマス。。。。


というわけで、楽しい仕事できたし、いい人たちと知り合えてほんとにヨカッタ。。信州の庭にも春が来たしなぁ・・・と、風景も気持ちもあったかくなった土曜の一日でした。

2008年3月1日土曜日

Fireworksのコマンドの使い方

例えば、デジカメから取り込んだ写真を、リサイズして、右と下に余白をつけて、ドロップシャドウで影をつけ、書き出し・・・同じ処理を複数のファイルに一括で施したいことがありますね。
そんなとき、いちいちファイルを開かなくても、Fireworksのバッチ処理機能で行えます。
順番としては、オリジナルでコマンドを作る、次にバッチ処理をする・・となるんですが、

Fireworksのコマンド(自動処理)の作り方は簡単です。
同じような機能で、Photoshopのアクションがありますが、それよりかなり簡単に登録できます。
ただ、Photoshopのアクションは、登録したあとに、間に作業を追加したり、一時停止したり細かい編集ができるんですが、Fireworksはその機能がないので、
物足りないというか不便と思いました。

コツとしては、細かい動作をひとつずつコマンド登録しておいて、
バッチ処理の時に、使いたいコマンドを編集(いくつも組みあわせたり、順番を変えたりできるので)すれば
かなり高度なことができると思います。

動画マニュアル「Fireworksの使い方」でこの方法を更新しましたので
興味のあるかたは覗いてみてください。

Fireworksのコマンド登録とバッチ処理
1〜3までで完結してます。



動画の例では、思いつきで一つ作業を登録してみたんですが、これはクリップボードに入っている記録をペーストするのであとで再現してみたら大いに不具合があることがわかりました。なのでそっくりマネしないでくださいね(^_^;
どんなことができるのかがわかっていただけるかと思います。

2008年2月24日日曜日

Fireworksでのスライス使用方法




Fireworksの使い方 動画マニュアルを更新しました。
今回は、ファイヤーワークスでのスライスの使用方法です。


一昔前のスライスの使い方というと、デザインを全面、画像作成ソフトで作って、それをスライスで1画面全部書き出ししてから、HTMLにテーブルごと取り込み・・・
という方法が主流でしたね。
とくにDTPなどのデザイン畑からweb制作に入ったデザイナーさんにとっては、HTMLソースを覚えなくても自由自在にデザインができるという素晴らしい機能でした。
同時に、5年も前にはまだネットの回線の速度が遅く、どうやって軽い画面を制作するかに、とても神経を使わなければいけない時代だったので、大きな画像は、スライスで切り刻んで部分的に高画質で出力したり、広い余白はスペーサーを入れて無駄な画像が入らないようにするなど、
画面を軽くするテクニックも重要でした。

しかし時は流れ、今やWEB標準に合わせた制作方法が主流に・・・・
大きな画像は1枚で背景用に書き出して、そのうえにテキストやパーツを配置していく・・。
こちらが主流になってから、スライス機能の使用方法も使い方が変わってきました。

全画面テーブルで書き出ししてしまうと、修正があったときに大変ですが
後のメンテナンスを考えると、こういった背景画像にHTMLでテキストをのせるといった方法をとったほうがだんぜん効率が良いですね。

というわけで、作例では、1画面で作ったweb用背景を、ヘッダー用、フッター用、メイン部分用の3つに切り分けて、さらにロゴは別で書き出しする方法です。
(1)から(3)までで完結してます。

Fireworksのスライスの使い方 >> (1)背景画像用に切り抜きする方法

2008年2月9日土曜日

フォトコンテスト「伝えたいもの—無形文化遺産」



(財)ユネスコ・アジア文化センターが主催しているフォトメッセージ・コンテ
ストについてご案内します。
詳細は下記のURLをご覧ください。

ACCUアジア太平洋ESDフォトメッセージ・コンテスト『明日への手紙2007』

締切が2月15日(金)と迫ってますが、関心がありましたら是非ご応募ください。
テーマは「伝えたいもの—無形文化遺産」です。
「家族の記念行事や地域の祭りや芸能、受け継がれてきた手工芸、誇りに思う習慣や人々の暮らしなど・・・・・」の写真がテーマだそうです。

オンライン応募が可能です。入賞作品はパネル化され、アジア各国で巡回展示するそうです。

友人の友人が担当していて、日本からの応募者が少ないため締切を延長したものの、期待どおりに応募がないようです。
ぜひ、何か手持ちの写真があるかた、応募してみてください。

2008年1月27日日曜日

Web2.0風素材を作る方法・Fireworks編

Web2.0風素材を作る方法で検索するといろんな参考ページが出てきて役に立つんですが、
ファイヤーワークスでの方法があまり見あたらなかったので、動画マニュアルでやってみました。

FireworksでWEB2.0風の素材を作る方法



こんな感じで、ふんわりした膨らみのついたボタン、ほんのりと透明感と立体感があるナビゲーション、ワンポイントに使う丸ボタンも、WEB2.0風を意識して、透明感・つや・ふくらみ・・を演出してみます。

実は、いつもは使い慣れてるillustratorで作ってるんですが、この動画のために、ファイヤーワークスで作ったらどんな手順かな・・と自分で考えながらやったので、
もしかしたらもっと簡単な方法があるかもしれないし、私もファイヤーワークスのベテランというわけではないので、、熟練の方から見たら突っ込み処があるかもしれません。
仕上がり具合はやっぱりillustrator(私が持ってるバージョンではCS)で書き出したjpgの方がきれいな感じがしますが・・・・作業はファイヤーワークスの方が簡単でした。

そういえば、一昔前のwebデザインの流行といえば、背景に一面にパターンや模様が敷いてあるのとか、テキストが自動で動いて案内してるのとか、blinkでピカピカしてるのもありましたね。
今時そういうホームページ見ると「おぉ~~、きっと10年前に開設しそのまま放置されてるのか知らないけど、どうやら高齢のHP(?)にちがいない」などと印象受けますが、
今作っている、こんなふうにふわっと膨らみのあるナビゲーションなど・・・5年後に見たら古くさく感じるんでしょうか・・・。タイムトラベルして見てみたい気がします。

2008年1月23日水曜日

フロートさせたら崩れた・゜゜(>_<)゜゜・。




スタイルシートでのデザインを勉強しはじめたとたん、「フロートさせたら背景が出ないor崩れた!」という壁にぶつかってパニックになってる方は多いんじゃないでしょうか。
わたしもかつて・・・。背景に画像をしいたのに
下まで表示されなくて、いろんなブラウザで表示しながら一日つぶしてしまったことが・・・

これは、このフロートの後のクリア(解除)ができてないために、フロートのボックスが乗っかっている元のボックスの中に何も入ってない状態になってしまうことから(表現に語弊があるかもしれないけど、なるべく初心者さんにわかりやすい言い方を探しながら書いてます)
元のボックスに指定した背景画像や色などが表示できなかったり、次のブロックが入り込んでしまい崩れたりします。

では、「フロートの後の解除」ってどうやればいいの?という話ですが、
クリアの方法はいろんなやり方があるらしく(ハックを使う、クリアフィックス、hrタグを入れてそこにスタイル指定・・・など・・検索するといろいろ出てきます)
わたしは一番簡単な、
フロートの外側のブロックの閉じタグの前に、クリアするブロックを入れる、というのをよく使っています。

余分なdivを増やしたくない人は他の方法をとったほうが良いと思いますが、初心者さんにはかなり簡単なのでおすすめです。

このやり方は、動画マニュアル Dreamweaverでのスタイルシートの使い方 フロートの後をクリアする方法に書いてますので、
興味のある人は見てみてください。



この動画では、スニペットを使って便利に使い回す・・・という方法を紹介しています。
わたしはスニペットを知らない頃はなんでもかんでも単語登録してて、
くりあ@ で変換すると<div style="clear: both;"></div>
がでることになってます (ノ_<。)

2008年1月18日金曜日

遠山郷の町並みイラスト



お正月に向けて、遠山郷・和田宿(わだじゅく)の町並みのイラストを描きました。
これは、友達でもある、肉のスズキヤさんの若女将が、
自分の町を取材してくれたものをイラストにしたんですが、
スズキヤさんのHPでダウンロードできるようになってるので
もし遠山郷ふぁんの方がいらっしゃいましたら、よかったら貰ってあげてください。


ジンギスカンと山肉の通販 肉のスズキヤ


遠山郷に関してはいろんなところで紹介してるんだけど、
わたしがとっても好きな場所のひとつ。
正当派ニッポンの田舎町というか・・・映画「三丁目の夕日」よりも、リアルに昭和の雰囲気を味わえる町並みが残っています。
ちょっと山奥に入ると、原田泰治の世界・・・かな。

トンネルが開通して便利になって、どんどん人が流出してしまい、高齢化に伴いお店を継ぐ人がいなくなっちゃったら
あのタクシー会社とか自転車やさんとか、雑貨やさんとか、
あの町並みはどうなるのか・・・何もできないくせに心配してる一人です。

あたしが和田宿の町並みを取材したときの様子はこちらに載ってます(photo byうちの相方さん)
信州遠山郷 和田宿



わざとモノクロ写真にしたんだけど、なんとなく・・・いいら。

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