手作りウェディングフォトを探しているカップルさんへ

かねてより準備中だった「オリジナル結婚写真撮影とかわいい手作り結婚写真アルバム」のサイトが公開になりましたので紹介させてください。

★結婚写真のエクー（東京・横浜）:本当にかわいい結婚写真撮影とアルバム制作



まず、サイト内のどのページをみても、絵本のようなかわいい手作り感いっぱいのページに魅せられてしまいます。
結婚を前にした女性や若いカップルがターゲットなだけあって、サイトの作りにはかなりこだわりました。

そして、各カメラマンの作品の魅力を存分に引き出せるようなギャラリーや、作品紹介にかなり力を入れています。
ページをめくっていろんな写真を見ているだけで楽しめて、「かわいい！わたしもこんな風に撮ってもらいたい！こんなアルバムが欲しい！」そう思ってくれる若い女の子が増えたらいいな・・・そんな思いでコツコツとページを増やしています。



サイト全体の雰囲気を統一している絵本のような動きにはこだわりがありまして、実は元サイトは、一昔前に流行ったjavascriptのロールオーバーを使って表現していたので・・・様々な問題点が。

１）ソースコードがものすごく長大になり、SEO対策がとてもやりにくく・・検索エンジン対策のできていないページに

２）年齢の長いサイトなので、徐々に規模も大きくなってきたので、ページ増設もかなりの手間に

３）年毎に増設を重ねた結果、サイト全体の見渡しも悪くわかりにくい状態になって、ユーザーに意味が伝わりにくく、結果的に検索エンジンにも意味を伝えにくいという困った二重構造に・・・・

今回のリフォームでは、それをすべてweb標準で作り替え、読者にも検索エンジンにもわかりやすいサイトになるように、
ナビゲーションや構成を整備しなおし、なおかつCMSにすることで、今後の更新を楽に、しかも携帯でも同時に表示できるように・・・ということを目指しました。
（あぁ、、、書いていて何かのフレーズに似てると思ったら、劇的ビフォーアフターみたい・・・などと図々しくも思ってしまった）



というわけで、私は全体ディレクションと、SEO対策、CSS調整やxoopsのテンプレート制作でお手伝いさせていただきまして、サイトデザインはエクーさん専属のイラストレーターとデザイナーの方とチームで制作しました。

こんな凝ったサイトがxoopsで出来るんだ・・ということで、びっくりされる方もいらっしゃるのではないでしょうか。



一生に一度のことだから、信頼できるカメラマンに頼みたいし、心を込めてアルバムを作ってくれるスタジオに頼んでみたいですよね。
結婚間近のあなたも、結婚夢見るお嬢さんも、とうの昔に結婚しちゃったのでもう写真の撮り直しができない元お嬢さんもｗ、
かわいくて素敵な結婚写真の世界をおたのしみ下さい(*^_^*)
　

競馬予想の楽しいブログ（WordPress）

競馬予想　解析オヤジのデータSX

またまた楽しいお友達が増えてしまいました。
「解析オヤジさん」という方です。
なんの解析かって・・・・ハイ、タイトル通り競馬予想の達人さんです。
友人の紹介で知り合ったんですが、まずは「モモンガさん、ボクのイラスト描いてくれない？」から始まって、
解析オヤジさんのキャラクターをつくり、
Flashも作って本サイトのお手伝いをさせて貰っていました。
本サイトは以前からオープンされていたのですが、このたびブログを作ることになり、WordPressにて構築させていただきました。


解析オヤジの競馬予想ブログ

↓Ktai-Styleにて携帯対応


今、本サイトではメンバーサイトの準備中（webの森制作です）ということもあり、無料公開中です。
せっかくの無料公開のときにお試し入会してみませんか？
解析オヤジさんの楽しいお人柄や、競馬は楽しまなくっちゃというポリシーみたいなものも感じることができると思います。
ちょっと競馬素人のわたしからみると、どのサイトも気迫がこもっていて迫力満点の競馬予想業界にて、ほっとできるような楽しいサイトになったらいいなとお手伝いさせて貰っています。
何よりデータSXの良心的な価格と解析オヤジさんの個性が出るサイトに・・・。そして使いやすさにこだわって作ってますので、競馬ファンの方も、ちょっと競馬の世界をのぞいてみたいと思っている初心者さんも、メンバーサイト公開をぜひ楽しみにお待ち下さい。


WordPressブログ／キャラクターイラスト／アニメ／ディレクション／デザイン　webの森

WordPress制作はWEB　MIYACO様に協力いただきました。

本サイト　キャラクターイラスト／gifアニメ制作　webの森

Flash制作は　R&Mデザイン様に協力いただきました。

WordPressでの携帯サイト変換プラグイン

WordPressでの携帯サイト変換プラグインはいくつか出ていますが、
なかでも有名なKtai Styleの設置方法を動画マニュアルで紹介しました。

Ktai Styleプラグインの導入

プラグインのダウンロードと解説はこちらから
Ktai Style (携帯対応プラグイン)
使い方はとても簡単で、プラグイン設定画面にて有効にして、設定画面から文字色などを整えるだけで、あなたのWordPressブログも携帯対応にできます！

Ktai Style配布元　yuriko.net　様

今回は遠山郷観光協会様のブログを携帯対応にする例を動画にしてみました。
ヘッダ画像の入れ方はこちらで紹介しています。

（3）Ktai Styleのカスタム



（以下付録・・・というか余談というか・・・）

実は、宮崎学のツキノワグマ事件簿も試してみたんですが、
自作テーマを使っている場合は簡単にいかなかったです。
KtaiStyleのテーマを見てみるとわかるのですが、WordPressデフォルトテーマのように、基本的にheaderやfooterを読み込む形のテーマになってるんですが（sidenaviは長くなるので読み込まずにKtaiStyele独自の方法のメニューで表示されるようになっている）
独自テーマはそんな通常のテーマの作り方を思いっきり無視して、通常のホームページを作るように作成したHTMLに、WordPressのタグを埋め込んだテーマなので
自動で変換するには無理があるようで、特に個別PAGE機能を使って作ったページはまったく内容が表示されていませんでした。



そんなこんなで、、自作テーマを作るときは、基本的に通常のテーマと同じ作り方でやっておかないと後々いろんなことに対応できなくて苦労しますよ。。。という付録でした。

携帯画面のシミュレーションに便利なサイト

携帯サイトを作るのにどうやってチェックしようか・・・。
自分の持ってる携帯ではチェックできますが、なかなか携帯各社全機種を揃えるのは難しい・・・・というわけで、
携帯画面のシミレーションをしてくれるツールを探していて良いサービスを発見したので紹介します。

＞goo　モバイル　携帯サイトビューワ

ここの携帯サイトビューワはとても簡単で便利です。
使い方は簡単でURLを入れて表示ボタンを押すだけ。
ためしに
京橋タウンガイド様を表示させてみたところ、ちゃんと絵文字対応も出ていて安心しました。
（・・・と、思ったらauでは絵文字が出てないですね・・・・実際の携帯でチェックするときれいに表示できてるんですが・・・）

下記のサイトはxoopsでつくってあるので、PCサイトを管理画面から更新するだけで、自動的にケータイ対応のページも生成されます。
それなりにケータイ用のテンプレート作成などの手間は必要です。


携帯サイトではないPC用サイトを表示してみると
web標準（テーブルデザインではないサイト）で作ってあればなんとか、見栄えは悪いなりにも表示でき、サイトの中身は読めるようになっています。
下記のサイトはwebの森で、ケータイ対応になってないんですが、xhtml＋cssで作ってあるので一応読むことはできます。



ただし、携帯電話の公式サイトのトップページからの検索では、
１　公式登録サイト
２　広告
３　携帯サイト
４　広告
５　PCサイト
の順番に並ぶので（ezwebの場合ですが、他各社も似たような並び順ですよね・・）
やはり携帯対応のサイトをちゃんと作っておかないといけないな・・・とは、思います。

Googleモバイルから直接検索すると、
１　携帯サイト
２　PCサイトをGoogleモバイルが読みやすいように変換してくれたサイト
の順番に並びます。
この「Googleモバイルが読みやすいように変換してくれたサイト」での表示と、gooモバイルでの携帯サイトビューワの表示が、
まったく同じとは言えないけど、かなり近いので
チェックにも役に立ちますね。

この件、動画マニュアルでも紹介しています

＞＞gooモバイルを使った携帯シミュレーション　動画マニュアル

・・・・・・・・シミュレーション・・・・　シュミレーション・・・いまだによく迷います（＾＿＾；

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

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

１）ケータイ用振り分けスクリプト

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

＞携帯振り分けＰＨＰ

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


２）キャッシュの問題

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



４）ケータイ用サイトに地図を設置する

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

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

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

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

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

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

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


５）ケータイにて電話をかけるタグ（普通に知ってると思いますが）

telタグ　＜a href="tel:xxxxxxxxx"＞

６）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＞


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

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

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


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

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

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

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

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

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