ホームページ作成技術の最近のブログ記事

伊勢崎銘菓「花林日記」のホームページ(http://www.karin-nikki.com/)に「買い物かご」を付けさせていただきました。

6月26日夜8時からの加藤先生の「ほたる撮影会」に参加して、

午前2時に帰ってきて、

それから作業して午前3時にアップしました。

「花林日記」を販売している「きくや」のご主人から、

「午前8時には富山県から大量注文がネット経由であった」!と喜びのメールをいただきました。

 

技術的には、フリーの買い物かごを改造しました。

改造点は、全数予約制なので、配送だけでなく。取り置き機能も追加しました。

メールもPCと携帯の両方に発信されます。

CGIの中身を解析して、テストを繰り返し結構時間がかかりました。

今後の、「買い物かご」対応に参考になる技術の応用で皆様のお役に立ちたいと思っております。

おめでとうございます。

(有)三島屋商店のホームページ「ねしゃか」(弊社シニアPCサポート群馬制作)が「群馬 酒蔵」のキーワードでyahoo検索でトップページに入りました。

(有)三島屋商店さんは、ホームページに併設したブログ「有限会社 三島屋商店主の妻のブログ」をほぼ毎日書かれており

楽しい話題で大変盛り上がっています。

「ねしゃかの妻」さんの努力に敬意を表します。

弊社は、ブログが簡単に書ける「Live writer」を提供して支援しています。

なお、「群馬 銘酒」では既にyahoo4位、「ねしゃか」ではyahoo7位を達成しております。

これからが楽しみです。

盛り上げていただいている皆様に感謝申し上げます。

ありがとうございます。

ホームページを作成した場合にブラウザによって表示がずれる事がある。

このずれに対応するのを「CSS」ハックと言う

IE7用のCSSハック: *:first-child*html セレクタ {.....}

IE6用のCSSハック: * html セレクタ{ ..... }

条件コンコメントの例:(IEだけにCSSファイルを読み込ませる)

<!-- [if  ie ] >

<link rel="stylesheet" type="text/css" href="css/ie7.css" />

<![end if]-->

 

ie

渡良瀬渓谷鉄道をゆく(水沼駅)の解像度が低いので解像度を高めてみた。

やり方は、簡単ななのだが、そこにたどり着くまでは大変だった。

VIDEO編集ソフトでAVIで出力して、FLV変換を行うために

・youtubeへアップ、

・yuoutubeからCarvingExplorerでダウンロード(無変換でダウンロードするとFLVになっている)

・FTPでブログサーバーにアップ・longtailで埋め込みソースを作成・埋め込みソースをブログに貼りつけこれでOK、なんだかんだ3日ぐらいかかった。

 

パンパカパーン 早くも「花林日記」がyahoo2位 148万ページ中2位です。

パンパカパーンは少し古いギャグですが 「手作りかりんとう「花林日記」のきくや」は、12月24日にアップしました出来たてのホームページです。

まだ5日しかたってないのにキーワード「手作りかりんとう」および「手作り かりんとう」で堂々の2位です。

しかも、148万ページ中2位です。

弊社「シニアPCサポート群馬」のSEO技術がまたまた証明されました。

同、ホームページの画像は一部 canon EOS 5D markⅡを使用しました。

制作中だった伊勢崎銘菓「花林日記」のホームページが

本日、零時をもって立ち上あがりました。

URLはhttp://www.karin-nikki.com/

制作は、弊社「シニアPCサポート群馬

伊勢崎銘菓「花林日記」は、伊勢崎市今泉町の「きくや」が製造販売している

ラスク風かりんとうです。

パンの耳を材料に油で揚げてない風味で

発売当初から、そのユニークな製法と、おいし味、店主の人柄から人気を呼び

開店して1時間で売り切れる程の人気店です。

ホームページ立ち上げの目的は

発売当初から各種のブログに取り上げられていますが

一部誤解に基ずく情報も掲載されていることから

正し情報を発信しいということと、遠くから来店される方にたいして

アクセス等を案内したいとい所にありました。

ご愛顧のほどをお願いいたします。

といっても、年内予約は、いっぱいで、店頭販売でも個数制限になっております。

ホームページの制作的には

構想1年、制作2カ月、ロングランの制作になりました。。

今回は、移動式撮影スタジオとcanon D5mark2での出張撮影を行いました。

それなりに良い画が撮れました。

画面的には、ヘッダーにgifアニメを入れました。

お正月には、スチール写真ではない

本格的な実写ビデオを組み込んだflash画像のページを用意しております。

なお、ホームペーでの買い物かご機能は、お店の体制が出来るまで、保留になっております。

当面、電話受注で対応するとのことです。

イアリングなどの細かい撮影をする事になって

eos 5D Marak Ⅱ のライブビュー機能を使ってみた。

ライブビューと言うのは、カメラの裏ぶたについている表示部に

レンズを通った光を、確認する機能である。

画面にグリッドという縦横の線を表示できるので傾きをチェック出来る。

但し、線が黒だけなので黒い物を撮るときは白い線が出るなど、線の色を変えられると楽しいのだが

残念ながら黒い線だけである。

通常のAF機能ではなく、AFボタンを押す。

ピント合わせをマニュアルにすると、ピントを合わせる場所を選んで

拡大して、表示できる。拡大率は5倍と10倍が選べる。

商品撮影にはこれが重宝だ。

g111 502

mx5000で撮影

 

g111 494

eos 5D mk2 でラブビューでピント合わせ。

株式会社 ショップオール のホームページがリニューアルしました。

リニューアルの目的は、同社が経営する夢書房コミックランドとの役割分担を明確にして

認知度の向上を図るということでした。

リニューアルは弊社(シニアPCサポート群馬)が担当させていただきました。

ツールは、既に入っていたMovable Typeの商用版を使用してテンプレートやウイジット機能をカスタマイズして

SEO対策を施すとともに、メンテナンス性を向上させることにしました。

手法として目新しいものは、

1、トップページヘッダーのh2部分にCSSを適用して、右部分と左部分の2つに分割するとともに別々のデザインにしております。

2、ヘッダーのバックグラウンドイメージをメニュー項目のバックグラウンドイメージに利用しました。

3、ウエブページで作成した部品をブログ内でMTタグで参照して構成しています。(営業事例)

この事によって、営業事例の表示順番を変更したり、追加する自由度が向上します。

(通常ブログ内でMTタグを使用するとエラーになってしまいます、コン辺の解決に苦労しました)

苦労したと言えば、各ブラウザによって表示が違って表示される事です。

特にIE6以前とIE7以降は全然違う表示をします。

例えば、フッターが最後ではなく途中に表示されるなどとんでもない現象が発生します。

IE7では左側に表示されているテキストがファイアーフォックスではセンター表示になるなど

結構、苦労するところです。

リニューアルにあたり、株式会社ショップオールの伊東店長さん、ショップ・オールIT事業部 織田様には大変お世話になりました。

この場をお借りして、御礼申し上げます。

いざ!!出陣と言えば大げさですが

今朝、出張撮影に出かけました。

そのときの持ち物

カメラは映ってません。

来週には、フルフォーマットのカメラが来る予定ですが

今回は、例のビデオの静止画機能で撮影します。

g111 010

「長太郎農園の藤九郎銀杏」が完売したので

完売御礼の表示をした。

その後、注文が入ってくるので

ホームページをみたら

サイドバーが表示されていない。

ウエブページの段階では、ちゃんとサイドバーが表示されているので安心していたのであるが、

肝心のホームページのメインエリアが表示されているがサイドバーが表示されない状態になっていたらしい。

昨夜夜中まで掛かって原因を追求した。

メインエリアはテンプレートで5つのウェブページをタグで引っ張っている。

テンプレートとウエブページを何回も点検して最終的に分かったのは

デブが締まっていなかった事が分かりました。

デブと言っても</div>が一個たりなかった。

ホームページを作成する内部コードに<DIV>タグというのがあります。

<div>~</div>という具合に、書き出しと書き終わりをきちんとしなければならない。

今回は、いくつもネストした関係で訂正を何回かやっているうちに

</div>を一個落としてしまいました。

メタボの体重を落とすのも大変ですが<div>をきちんと締めるのを忘れると

大変な苦労をすることがあるので気をつけたいものです。

リンク

経営革新塾