ホームページ制作のアレ

このブログは、ホームページ制作関連やwordpressなどのCMS関連の話題で書いているのですが、いかんせん、テーマのセレクトの関係で 「画像」に乏しいのが弱点です（内容云々は置いておいて、写真が無くて文字ばかりだと単純に読みにくいですよね）
そこで、FlickrからCCライセンスの写真をキーワードで探して、貼り込んでくれるプラグイン「PHOTO DROPPER」を導入してみました。

参考にしたサイトはこちら
http://phpspot.org/blog/archives/2008/10/photo_dropper.html

http://www.photodropper.com/wordpress-plugin/
こちらからダウンロードして、 解凍してできたフォルダを、ブックマークプラグインの時と同じように、wp-content/pluginsフォルダに放り込みます。

次に、管理画面の「プラグイン」で、今導入したプラグインを使用する設定にするだけでＯＫ。
記事を書く画面のアップロード/挿入の一番右に、黒地の「Pu」というアイコンが追加されます。

あとは、記事を書いていて、「ここに写真を入れたいな」というところで、「Pu」アイコンを押して、出てきたフォームにキーワードを入れて検索。
すると、写真一覧が表示されるので、使いたい写真の下のS|M|Lのどれか（大きさですね）をクリックすると、 ↓このように挿入されます。ちゃんと必要なクレジット表記もしてもらえます。

photo credit: John Kratz 欠点としては、XHTML的にちょっとよろしくないタグを使ってしまっている（align=”absmiddle”とか）という点が上げられますが、まぁ、これくらいは眼を瞑るとして…

ちなみに導入すると、管理画面の「設定」メニューの一番下に、PHOTO DROPPER用の設定が追加されています。

「eコマースサイトの利用に関する調査–一番のストレスは「サイトの重さ」」
C-Netジャパンの記事より。
http://japan.cnet.com/marketing/story/0,3800080523,20401260,00.htm?ref=rss
ここで注目したいのは、勿論Ｑ１の貴重なアンケート結果も然ることながら、Ｑ２のアンケート結果２位の
「個人情報の記入が多すぎた」。
こちら、ショッピングサイトに限らず、前から気になっていて、常にご提案もさせて頂いているのですが、 「本当にそのデータは必要なのですか」という事まで、フォームで聞いてしまうパターンが多い気がします。

聞く側のお客様にとっては、折角のデータ収集チャンスなので、少しでも多くのデータを集めようというのは 大変良く分かります。が、フォームを使用する方にとっては、あまりに長い入力フォームが現れると、 たしかにそこでＵターンしたくなるのも厳然たる事実です（私自身、Ｕターンした経験が何度もあります）
以前、とあるＴＶゲームのアンケートフォームが「４画面分もある」と変な方向に話題になりましたが、 あれ、全部答えた人は、はたして、アンケートに挑戦しようと思った人の何割くらいなのでしょう。

誕生日…くらいは、パスワードを忘れた時の質問につかうのかな、くらいには思いますが、
やはり、あまりにも「手続きが面倒くさい」のは、他の部分でいくらユーザービリティを高めても、ゴールの部分で台無しにしてしまう事になると思います。
「お役所にいくのが面倒だ」と思うこと、ありませんか？あれも「手続きが面倒くさい」のが原因だと思うんですよね。

photo credit: philentropist

http://pc.nikkeibp.co.jp/article/news/20091007/1019217/
こちらのニュースをみて、ふと、いつも疑問に思っている（けどすぐ忘れる）事をまた思い出したのですが…
なぜ、銀行やカードなんかの「暗証番号」は「数字のみ」しか使えないのでしょうか。
よく、「暗証番号は生年月日、電話番号などは使わないでください」と注意書きがありますが、他に４～８ケタの数字の羅列で、大抵の人が持てる「意味のある数字列」ってあるでしょうか？
以前、スーパー記憶法とやらの内容を見た事があるのですが、記憶を成功させる為には対象の事項に「意味を持たせる」「関連づける」事が重要らしいですね。
それなのに、意味を持たせづらい数列を使用させるのは、ユーザービリティ最悪といってもいいんじゃないでしょうか。

私はWebデザイン専門で、プログラムはブログなどのCMSの実装や有り物の改造程度、プログラム作成、DB構築はプログラマーさんに任せてしまう人間なので、データベースの詳しい事はわかりませんが、やはり「数字以外に英文字までいれると、データの件数が半端ないだけに、扱うデータ量が半端じゃなく増える」んでしょうか。
例えもしそうだとしても、暗証番号に「英文字」をつかえるようにすれば、電話番号や生年月日なんていうありきたりのデータを使う人は激減して、絶対にセキュリティは上がるとおもうんですが…やっぱり無理なんでしょうかね。

仕事とは関係ないけど、時々みているサイト、レスポンス（http://response.jp/）もリニューアルされました。
リニューアル前のほうが、情報が絞り込まれていて見易かったな…というのは置いておいて、
やはりJ-CASTモノウォッチ同様、Javascriptをオフにしていると、レイアウトが豪快に崩れてしまうようになったのですが…
（リニューアル前は崩れなかった）
原因は、ブラウザ判定→IE6かそれ以外かでcssを分岐するJavascriptの為だと思われます。
これは、「IE6を使っている人よりJavascriptをオフにしている人のほうが少ない」「IE6対応のコーディングをするよりJavascriptオフ対応のコーディングをするほうが工数的に大変だ」と判断されたという事なのでしょう。
確かに、Firefoxユーザーで、noscriptを導入している人…どれくらいいるのか、ちょっと時間がなくて調べられませんが、 今「Javascriptをオフにしている人」というのは、それくらいなのかもしれませんね。

各記事の右下にあるやつです。押すとその記事が各ブックマークに送られます。

まず、 http://wp.graphact.com/2007/07/11/96 こちかからwp-hatenaプラグインをDLさせて頂いて、wp-content/pluginsフォルダに放り込みます。 次に、管理画面の「プラグイン」で、今導入したプラグインを使用する設定にして、あとは所定の場所にソースを書くだけです。 このブログでは、さすがに全部ならぶとうざそうなので、弊社で利用しているものを中心にということで <div class=”bookmarklink”>
<?php if(isset($wph)) {
$wph->addHatena();
$wph->adddelicious();
$wph->addLivedoor();
$wph->addYahoo();
$wph->addBuzzurl();
$wph->addnewsing();
}?>
</div>
こんな感じにしてみました。

XHTML文法チェッカーで見たところ、多少怪しい記述が書かれてしまうようですが…

photo credit: Kai Hendry

昨日、とあるマッチングサイトで話題になっているのを見て、夏ころに「IE6追放キャンペーン」という話題があったのを思い出しました。
http://www.infoq.com/jp/news/2009/08/IE6-No-More
ニュースです、まだ残っていました↑

弊社では、確認用ブラウザは主にIE6、IE7、Firfox3.5、Safari4を使用していますが…やはり、製作時に圧倒的に手間がかかるのはIE6です。
特にデザイン時に直接的な問題になるのが
（１）寸法の絶対値とパディング・マージンの相対値が同居できない（解釈の仕様が間違っている）
（２）透過pngが使えない
の２点で、不必要な入れ子や回避用のCSSが増えてしまうし、特に背景画像の位置指定関連、png画像、…いちいちハックを書かなくてはいけないのは、「綺麗なソースコードマニア」としては辛いの一言です。
※業務的にはまるで関係ないのですが、ソースコードをとにかく綺麗に、短く簡略に書くのが大好きなのです

でも、弊社のアクセス解析でも、未だに30%近くの人がIE6を使用しています。

マッチングサイトの返答でも、思わず書かせて頂いたのですが（普段はQ&Aサイトはあまり参加しないのですが）
Web製作を発注して頂くお客様にとっては、Web制作費というのは「手にとって確かめられないもの」だけに、一層「割高」に感じてしまうものだと思います。（かかった時間で考えて頂ければ、とても専門職・技術職とは言えないレベルの安価なのですが）
ですから、依頼して頂いた以上、お客様は「変な理由で一人のお客様も逃したくない」と考えるのが普通だと思います。

そのため、弊社は、IE6が「絶滅した」といえるレベルになる日まで、頑張ってIE6対応を続けていきます。
※本当は、セキュリティの問題で、IE6はもう強制バージョンアップになってしかるべきなのですが…

記事の右上に表示していた日付を、カレンダーのようにしてみました。

カレンダーの元となる画像は、
http://www.smashingmagazine.com/2008/02/22/gallery-of-date-stamps-and-calendars/
ここに沢山あるので、頑張ってここにあるものと被らないように日めくりの画像を作成します。

こんな風になりました。

次に、日付の部分のソースを
<div class=”entry-date”><?php the_time(‘Y/m/d’) ?></div>
から
<div class=”entry-date”>
<span class=”entry-month”><?php the_time(‘M’) ?></span>
<span class=”entry-day”><?php the_time(‘d’) ?></span>
</div>
に変更。
※最初、<span>のところを<div>にしようとして失敗しました。divの「d」が、wordpressに「日」の引数 として判断されて、タグが崩れてしまったのが原因な気がします（深く調べなかった）

次に、css（弊社のは、オリジナルのテンプレートですので、クラス名やパスはお使いのテーマにそって変更してください)に、
.entry-date {
text-align: center;
color: #666666;
background: url(images/blog_date.gif) no-repeat right top;
height: 56px;
float: right;
margin-right: 15px;
margin-left: 15px;
}
.entry-date .entry-month {
display: block;
padding-top: 15px;
font-weight: bold;
font-size: 10px;
color: #999999;
width: 56px;
}
.entry-date .entry-day {
display: block;
color: #0096cc;
font-weight: bold;
font-size: 16px;
width: 56px;
}

こんな感じで書いてしました。で、完成。IE6とFirefoxで確認してあります。
こんなんで一時間くらいかかってしまいました。ホームページデザインの仕事の合間を縫ってwordpressの修行はまだ続きます。

さっきから、画像の挿入の動作がおかしく（画像の挿入ボタンをおしたら、ダイアログウィンドウが真っ白になる）、調べてみたところ、lolipopサーバーでwordpressを導入している方で、似たような事が起こっている模様。（XAREAのとは別の問題で、見て回った限りではこの問題に明確な解決法は見出せませんでした）

追記：lolipop以外のサーバーでも同様の問題が起こっています。また、「Firefoxなら平気」という書き込みもありましたが、弊社では、 Firefox、IE6ともにアウトです。

中には、「2.5にアップデートで解決します」という一年前の投稿がありましたが、このブログのバージョンは2.8.4であり… これはちょっと、次のバージョンがでるまでは、お客様にwordpressをお勧めするときはlolipopは避ける、という選択肢になってしまうかもしれません。

ちなみに、URLを直接打ち込みなら、当然表示されます。

なので自社用で使用している分には全然問題なし。

たまにはURLやTIPS以外に「ホームページ制作の仕事の姿勢、ポリシー」関連の事も書こうと思っているこのブログ、 本サイトにご訪問して頂いたお客様以外にも読んで頂きたいので、数箇所のpingサーバーに登録してみる事にしました。

リンクボタンは、どうせならオフィシャルのものを使おうと思ったので、まずADD Yahoo!ボタンを設置してみることに。
参考URLはこちら
http://my.yahoo.co.jp/s/guide/button/addtomy/index.html

しかしなんか、その後追加してみたボタンを並べたけど、どれもサイズが微妙に違う…やはり自作したほうがよいかもしれません。

とりあえづ、プレーンな感じのテンプレート（Wordpressではテーマと呼ぶらしいですが、どうにもMTの癖が抜けない）を作成し終わったので、これからすこしづつ改造してゆきます。

一回めは、「トラックバックURL表示BOX」を記事の下につけてみることにしました。
参考にしたURLはこちら
http://www.techdego.com/2007/03/wordpresstrackback-url.php
一発ですんなりできました（当たり前か）
条件分岐はMTタグのほうが理解し易いですが、wordpressもまた、別の方向での分かり易さがありますね。