Labrid WP

晩翠通沿いに12月25日、猫カフェ「ねこ・ねこ・ねこ」がオープンした。

13匹の「猫スタッフ」が常駐し、客をもてなしてくれるらしい。
実に行ってみたいと思うが、残念ながら妻が猫アレルギーだ。
男一人で行くのはちょっと勇気がいる。。

詳しくはこちら→仙台に猫カフェ?猫好きオーナーが開業、ミックスなど13匹が「常勤」

カスタムフィールドとは？

カスタムフィールドとは、投稿記事に情報（メタデータ）を付加できる機能です。

• Wordpress Codex 日本語版：カスタムフィールドの使い方

これを使うと、例えば、本文とは別に投稿記事に「タイトル」「URL」「評価」「コメント」「キャプチャ画像」を登録して、投稿者がレイアウトを毎回調整することなく、定型のレイアウト（テンプレート）を利用して投稿することができるようになります。

この例の投稿機能の拡張を、カスタムフィールドを使って実装する方法を説明します。
(続きを読む…)

CSSでマウスオーバー効果を得るのに非常に便利な :hover 疑似クラス。

こんなに便利なのに、IE6以前では A 要素にしか対応していない。不便。

例えば、フォームの input ボタンに マウスオーバー効果を付加したい。

なんて時には、泣く泣くCSSは諦めて、マウスオーバー用の画像を用意してonmouseover=”this.src=’button_over.gif’”
なんて事をしないといけなかった。

が、ここで朗報！
この問題だけをクリティカルに解決してくれる素晴らしい方法がありました。

• IEでa要素以外に:hover擬似クラスを適用させる

要するに、
Whatever:hover で配布している csshover.htc をダウンロードして、
これを body { behavior:url(“csshover.htc”); } で読込む。以上！

なんて簡単な・・いや、この htc を開発した開発者さんに感謝。

UNIQLO

ユニクロ。

シンプルなトップページだが、各特集コンテンツは非常に斬新＆スペシャル。
流行に流されない、真の意味で中身のある、斬新な企画はユニクロの商品に対する哲学に通じるものがある気がする。

PICNIC

ホームページを簡単にキャプチャしてWEB上で加工し、さらに好みの画像共有サービス（Flickerなど）にアップロードできるサービス。

キャプチャする範囲は、ブラウザで表示中の範囲 or 上から下まで全て から選択可能。

Firefox のプラグインもあり、これを導入すると、Firefox のブラウザから右クリックから任意のサービスを利用できる。

↓の画像は、Labrid のホームページの上から下までキャプチャし、PICNICでリサイズ、ローカルPCに保存し、アップロードした画像。

Labrid

編集機能も豊富で、回転・リサイズ・切抜きはもちろん、セピア・モノクロ・角丸などの加工の他、多様なスペシャルエフェクトもあり（無料はβ版の間だけ？）

最近始めた、かっこいいサイトを紹介するコンテンツ「Cool Design」のキャプチャ画像は、このサービスを利用させていただいています。
Labrid WP のコンテンツは、メインマシンではなく、あえて非力なノートPCで更新しているので、Photoshop のような重い画像編集ソフトを起動せず、簡単に、ちょっと手を加えたキャプチャ画像を用意できるのはとても便利です。

ちょっと重いですが、待つ価値はあり。

——————————————-

追記：
より高機能な Firefox キャプチャプラグイン FireShot もあります。
こちらは Flash も問題なくキャプチャできる上、ローカル動作なので軽い。
無料版と有料版があるが、無料版でも十分すぎるほど高機能。
紹介記事はこちら→FireShot – WEBキャプチャプラグイン for Firefox

Cam with me（カム ウィズ ミー）｜デジタルビデオカメラ Handycam “ハンディカム” | ソニー.

「Cam with me」は、ソニー “ハンディカム”のエクスペリエンス・ムービー。子どもから大人に成長していく子供の、様々な思い出を「映像」として残す「感動」を提供。サイトは、ブログに丸ごとエンベッド可能で、「感動」の共有を促進している。

http://www.lovedistance.jp/

オールフラッシュで作られた企画系サイト。
最初に男か女かを選択し、選択結果によってそれぞれの立場に応じたコンテンツを閲覧することになる。
ブログ・リアルタイム中継・チャットなど、いろいろなコンテンツがFlash上で融合・展開されている。

メディアライブラリに画像をアップすると、サムネイル画像が自動で作られます。

このファイル名が

（元ファイル名）-150x150.jpg

のように、ファイル名の後にリサイズされたサイズが付くのです。

これをどうにか自由にしたい！

thumb-（元ファイル名）.jpg

のようにしたい！

なんとかならないものかと調べまくってますが、なかなか情報がない。
とりあえず、今後の課題としてメモ。

ヤマダ電機LABI仙台駅前店。

ヨドバシカメラ以外の大型電気店は、全滅な仙台中心地。
ヤマダは生き残れるのか！？

右隣には BOOK-OFF＆モスバーガー、
左隣には 松屋、
最上階にはアイカフェ（マンガ喫茶）と、
お好きな人にはたまらないポイントでございます。

アクセス解析に、Google Analytics を利用していましたが、これだけではリアルタイムな解析はできない。
もっと Spider の巡回状況とかそういう生々しいデータも見たい、と思い、WebTecNote さんのこちらの記事を参考に、WassUp というプラグインを導入してみました。

• [WP]wordpressアクセス解析プラグインメモ

そこまでするか！ってくらい詳細にアクセス解析結果を報告してくれるプラグイン。
スパムや検索エンジンのアクセスまでしっかり報告してくれるのはこの紹介の中ではWassUpだけです。
しっかりしすぎてるだけにデータベースを結構食いますが、保存容量等は設定で変えれる。

どうやら本当に詳細です。
が、なんといっても公開して数日のこのサイトのこと。
プラグインを導入して数時間、自分のアクセスを除外したら、残ったログはSPIDER のみ。
「Too few records to print chart…：レコードが少なすぎて、チャートを表示できません。」
・・・しばらく様子を見ます。

Googleから消されました – 服部 哲也 : Webサイト制作 [All About プロファイル].

SEO を業務としている方のサイトが Google の検索対象から消されたというなんとも笑えない話。
検索アルゴリズムの中でも一番の謎がペナルティの発生条件なわけですが、この方が推定している原因がこれ。

でも、「え、もしかしてコレ？」というのを発見しました。
メニューにテキストではなく、画像を使い、マウスの動きでbackgroundを変化させていました。リストタグで画像を並べているので、メニューのテキストが、そのままでは上に乗ってしまいます。それを回避するために、
text-indent: -9999px
としてテキストが見えないようにしていました。
コレは、SEOがどうこうと言うことではなく、CSSでコーディングするのに仕方なくやってられる方も多いテクニックの一つだと思います。
ただ、今回Googleから消されたサイトで怪しいと思われる部分はここだけなんです。

これは、Javascriptに頼らないマウスオーバー処理として、現在の主流のコーディング手法となっており、既にかなり多くのサイトが採用していると思います。
確かに、マイナスマージンやマイナスインデントでコンテンツを画面外にとばしてしまえば、ソース内のテキストを表示上では見えなくすることが可能なので、悪徳 SEO 業者の温床になりそうなテクニックだとは思っていましたが。

が、本当にこれが理由だとしたら、多くの有用なサイトが Google のインデックスから消えてしまうことになります。
そんなことになったら、サイト管理者はもちろん、情報を求めるユーザーにとっても不利益になることは間違いなく、最近の Google の不振な挙動もあいまって、ユーザー離れの要因になりかねないと私は思うのですが・・・。

実際のところがどうなのか、非常に気になるところです。

先日、お問い合わせページを編集してみて実感。
このプラグイン「Contact Form 7」が便利すぎます。

フォームの制作は、いろいろと面倒なのですが、その面倒なもろもろをバックグラウンドで全てプラグインがやってくれます。

管理者は、HTMLタグなど意識することなく、Contact Form 7 の設定画面で、項目を設定。
自動でできあがった専用タグを、ソースエディタ部分にコピペしていくだけ。

といっても、WEB制作の中身をあまり知らない方にとっては、十分に面倒かもしれませんが

フォームからの送信先は複数指定可能。
自分と送信してくれた方に、同時送信したい、という要望にも応えられます。

ここで設定したフォームは、通常の投稿記事やPageにも簡単に埋め込み可能。
この機能も、問い合わせを多くもらいたい場合には非常に便利。

ただし、エラー出力／送信完了は、ページ遷移をせず、AJAXで同一画面上に出力されるので、「問い合わせ完了画面を Google Analytics の目標対象ページにしたい」といった場合は不便です。
エラー＆未入力項目の指摘は、このAJAX方式は非常にわかりやすくていいんですけどね。

各種ソーシャルブックマーク（SBM）への追加ボタンをテンプレートに追加。

このボタンについてはあまり好ましく思えない人もいるかと思いますが、SBMを積極的に利用しているユーザーの立場からすると、これがあると便利なんですよね。
※私は「Buzzurl」を便利に利用させていただいてます。

Labrid WP では以下のソースを追加。
※画像のパスはアップする場所によって適宜変更。

<a href="http://b.hatena.ne.jp/append?<?php the_permalink() ?>" rel="nofollow" title="はてなにブックマーク"><img alt="はてなにブックマーク" src="/wp/wp-includes/images/sbm/append.gif" /></a>
<a href="javascript:location.href='http://del.icio.us/post?v=4;url='+encodeURIComponent(location.href)+';title='+encodeURIComponent(document.title)" rel="nofollow" title="このページをdel.icio.usに登録"><img alt="このページをdel.icio.usに登録" src="/wp/wp-includes/images/sbm/delicious.small.gif" /></a>
<a href="http://buzzurl.jp/entry/<?php the_permalink() ?>" rel="nofollow" title="このエントリをBuzzurlにブックマーク"><img alt="このエントリをBuzzurlにブックマーク" src="/wp/wp-includes/images/sbm/icon_pencil.gif" /></a>
<a href="http://clip.livedoor.com/redirect?link=<?php the_permalink() ?>&title=<?= urlencode(mb_convert_encoding(the_title("","",false),"UTF-8")) ?>&jump=ref" class="ldclip-redirect" title="この記事をLivedoorクリップ！"><img src="/wp/wp-includes/images/sbm/clip_16_16_w.gif" alt="この記事をLivedoorクリップ！" /></a>
<a href="http://www.google.com/bookmarks/mark?op=edit&hl=ja&bkmk=<?php urlencode(the_permalink()) ?>&title=<?php urlencode(the_title()) ?>" title="この記事をGoogleブックマーク"><img src="http://www.google.co.jp/favicon.ico" alt="この記事をGoogleブックマーク" /></a>
<a href="javascript:void window.open('http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t='+encodeURIComponent(document.title)+'&amp;u='+encodeURIComponent(window.location.href)+'&amp;opener=bm&amp;ei=UTF-8','popup','width=550px,height=480px,status=1,location=0,resizable=1,scrollbars=0,left=100,top=50',0);" title="Yahoo!ブックマークに登録"><img src="/wp/wp-includes/images/sbm/yahoo.gif" alt="Yahoo!ブックマークに登録" /></a>
<a href="javascript:(function(){location.href='http://clip.nifty.com/create?url='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title);})()" rel="nofollow" title="このエントリをニフティクリップに登録"><img alt="このエントリをニフティクリップに登録" src="/wp/wp-includes/images/sbm/addclip_icn.gif" /></a>
<a href="javascript:window.location='http://pookmark.jp/post?url='+encodeURIComponent('<?php the_permalink() ?>')+'&title='+encodeURIComponent('<?php the_title() ?>');" title="このページを POOKMARK Airlines の行き先に登録する"><img src="/wp/wp-includes/images/sbm/addpookmark.gif" alt="このページを POOKMARK Airlines の行き先に登録する" /></a>
<a href="javascript:void(window.open('http://www.blogpeople.net/ib_addlink.jsp?u='+escape(location.href)+'&amp;t='+escape(document.title),'blog_ib','scrollbars=no,width=475,height=350,left=100,top=100,status=yes,resizable=yes'))" rel="nofollow" title="このエントリを BlogPeople Instant Bookmark に登録"><img alt="このエントリを BlogPeople Instant Bookmark に登録" src="/wp/wp-includes/images/sbm/tags_ib.gif" /></a>
<a href="javascript:location.href='http://pingking.jp/bookmark/create?url='+encodeURIComponent(location.href)+';title='+encodeURIComponent(document.title)" rel="nofollow" title="PingKingポッケに追加"><img alt="PingKingポッケに追加" src="/wp/wp-includes/images/sbm/pingking.gif" /></a>

Wordpressのデータベースをバックアップするプラグイン WP-DBManager を導入しました。
phpMyAdmin などを使わなくても、データベースのバックアップ・レストアが視覚的に簡単に行えます。
自動バックアップ、バックアップデータを指定したメールアドレスへ自動送信、も可能。

• WP-DBManager

日本語版もありますが、英語版で十分。

バックアップ作業は、忙しいとついさぼりがちになってしまいますが、これで自動化させておけば安心ですね。

余談ですが、このサーバーでは契約上、DBは１個のみなので、他のプログラムでも共用しています。
それらのデータも一緒にバックアップしてくれるので、一石二鳥です。

各カテゴリーには説明文を設定できますが、一般的なテーマではこれを表示しません。

Labrid WP では、この説明文を「設定されているときのみ表示」するように、カテゴリートップを表示するテンプレート [ archive.php ] をカスタマイズしてみました。

この説明文を表示したいところに

<?php
if (category_description() != "<br />\n") {
echo '<div>', category_description(), '</div>';
} ?>

と記述。以上！

category_description(); が説明文が格納されるWordpress タグ。
説明文が無い場合は「<br />\n」の値を返します。
()内には、カテゴリーIDを指定すると、指定されたカテゴリーの説明文を表示。
指定しない場合は、表示しているカテゴリーの説明文を表示します。

※説明文は<p>・・説明文・・</p> の形式で出力されるので、注意。

?
追記！
archive.php を編集してしまうと、カテゴリートップ以外の一覧表示画面でエラーになるので、カテゴリートップのみで使用するテンプレート category.php としてこのカスタムを行います。