以前は、管理画面のビジュアル投稿画面からでも表の編集ってできた気がするんですが、今日見たらできなくなってたのでプラグインで解決。

以下、管理画面からの操作手順。

1. 「プラグイン」 → 「新規追加」 → 「TinyMCE Advanced」 を検索してインストール。
2. 「設定」 → 「TinyMCE Advanced」 から、以下図のように表のボタンをツールバーに設置
3. 「Save」

編集画面はこんな感じになります

普通にブログエディタから再編集すればいいだけなんですが、最近はちょっとした編集なら WEB からでもいいかな。と、思い始めています。

_{参考サイト：WordPressのツールを追加・編集できるプラグイン「TinyMCE Advanced」 – はじめてのWordPress}

うちのブログでたまに出てた「Ajax Error」ってエラーダイアログですが、ここ最近のサイト改修作業時にやっと原因を解明したので、自分用メモです。

原因は、WordPress 用プラグインの「Where did they go from here」でした。

具体的には、ページのロードが終わらない内に他記事のリンクをクリックすると稀にこのエラーダイアログが出る。という症状だったんですが、ここ最近 Firefox をフリーズさせる原因にもなっていたように見えたので、これは看過できないよね。という事で追ったわけです。

とりあえずはプラグインを「停止」すればエラーは出なくなるのですが、結構気に入っていてしばらく使いたいので、エラーダイアログだけ出ないようにやっつけ対応しました。

プラグインのソース修正は where-did-they-go-from-here.php 内160行目の

where_go_count.onError = function() { alert('Ajax error' )};

を

where_go_count.onError = function() { };

にしただけ。

どのみち動いてないケースなんだから、エラーダイアログ出すのやめたらいいじゃん。という割り切りですが、しかし本当にやっつけで恥ずかしいですね。

以下、作者のサイトを見ると、リダイレクト処理がちゃんとされて無いのが原因なんじゃない？というやり取りもあるのですが、他にもたくさんやりたいことがあったので、とりあえず、やっつけ対応となりました。

• Where did they go from here? | Ajay - On the Road called Life
  http://ajaydsouza.com/wordpress/plugins/where-did-they-go-from-here/

ちなみに、うちのサイトでは「この記事を見た人はこんな記事も見ています」欄でこれを使っています。

オススメ記事のプラグインは色々ありますけど、ユーザーの行動からデータを取るものの方がウケがいいような気がします。

※ この記事は将来更新する可能性があります。って他の記事もそうですけど。

Facebookのuseridの調べ方。

いろいろ方法はあるんですが、この方法が一番簡単かなぁと思ったので、自分用メモ。

以下URLの「username」部分をfacebookユーザーネームに置き換えて、ブラウザからアクセスするだけです。

http://graph.facebook.com/username

次のようにJSON形式のデータが返ってきます。

{

"id": "999999999999",
"name": "XXXXXXXX XXXXXXX",
"first_name": "XXXXXXXX",
"last_name": "XXXXXXX",
"link": http://www.facebook.com/username,
"username": "username",
"gender": "male",
"locale": "ja_JP"
}

この、id部分(=999999999999)部分がfacebookのuseridです。

ブログの背景に思い入れのある画像を選ぶ人は多そうですが、なんと、実際に動くゲームを背景にしているブログがあるようです。

パッと見、普通のブログですが…下の方にどこかで見覚えのあるゲーム画面が透けて見えます。

よく見ると、ファミコン版の初代スーパーマリオブラザーズのステージ構成によく似ています。

キーボードの十字キーを操作すると、なんと ←→でマリオらしきキャラが左右に動き、また↑キーで土管らしきものを飛び越えたりもできます。

ゴールするとどうなるか…は、あなたの目で確かめてくださいw

Nihilogic – JavaScript, games and other things that matter

http://blog.nihilogic.dk/

WordPress で記事を分割する場合 more タグを使い「続きを読む」 リンクを表示させるのですが、このリンクにはアンカが設定されていて、記事の先頭じゃなく more タグ以降に飛ばされてしまうというお節介な仕様になっています。

そこで、このプラグインをインストールして WordPress のお節介に “Say good bye” しましょう。

more タグのリンクからアンカを削除するだけなら、以前、WordPress の more タグリンク先をパーマリンクにするプラグイン で紹介したプラグインが便利だったのですが、現在は公開中止になっていたので、新しいプラグインを探していて見つけたのがこのプラグイン。

「Custom More Link」

http://wordpress.org/extend/plugins/cy-custom-morelink/

アンカの削除だけじゃなく、カスタマイズができるプラグインです。

プラグインインストール後、プラグインを有効にし、

• wordpress ダッシュボード → 「設定」 → 「Custom More Link」

で、こんな感じの設定画面になります。

ここで、「More Link Pattern」の %anchor% 部分を削除すると、more をパーマリンクにできます。

Widnows Live Essentials は、マイクロソフトが配布している多数の無料アプリを束ねたアプリケーションパッケージです。

これには、かつて Windows/MSN メッセンジャーとして知られた Windows Live Messenger や、懐かしの Outlook Express / Windows メールの系統を受け継ぐ Windows  Live メール 等々、多数の無料アプリが含まれています。

また、これに含まれる Windows Live Writer は Windows 派ブログライター必携の秀作アプリで、私も長い間愛用させてもらっていたりします。

で、この Windows Live Essentials のインストール。

普通だと、wlsetup-web.exe という「WEBインストーラー」（要ネット接続）で行うのですが、探してみたところ、実はオフラインインストーラーも正式公開されていました。

※ 2012/4/17 ダウンロードリンク最新確認。
※ 2011/7/18 初出

オフラインインストーラーのファイル名は、wlsetup-all.exe で、以下、公式サイトからダウンロードできます。

Windows Live Essentials (旧名: おすすめパック) ヘルプ センター

http://explore.live.com/windows-live-essentials-install-offline-faq

以下、インストーラー直リンク（2012/4/17現在）

• Windows 7 / Vista / Windows Server 2008用 日本語版
  http://g.live.com/1rewlive4-all/ja/wlsetup-all.exe
• Windows XP用 日本語版
  http://g.live.com/1rewlive3/ja/wlsetup-all.exe

ちなみに、Windows Live Essentials では、全てのアプリを強制的にインストールされる事はなく、自分が必要なものだけを選択してインストール出来るようになっています。

以上。

ちびちび進めているブログ改修内容と運営に関するまとめページです。しこしこと書き貯めています。

うちは WordPress を使っているので、技術的な内容は WordPress 絡みが中心です。また、ソーシャルメディア連携に関する情報へのポインタも示しておきます。

概要のみ列挙し、細かい事は書かない前提で。

※ サイト改修に合わせてこの記事も気が向いたら更新します。

※ 2012/4/26 「Google+ 共有」、ヘッダカスタマイズ、Facebook デバッガ(URL Linter)、コアモジュール改修ポリシーなど追記。文章大幅修正。タグ変更。URL最新化。
※ 2011/7/4 初出

ソーシャルメディア連携

Facebook ソーシャルプラグイン

• 「いいね！」ボタンの解説
• Facebook Social Plugins「いいね!」

→ Facebook ボタン設置時は OGP 対応もセット（次項参照）。

Open Graph Protocol (OGP) 対応

Facebook, mixi, Gree 等で使われているWEBページのメタデータ形式。

• WordPress 用プラグイン「WP-OGP」は og:description が文字化けするのでお蔵入り。
  
• WordPress 用プラグイン「Open Graph Pro」 なら og:description も文字化けしない。というわけで、2011年夏くらいから OGP 対応はこれ一択。
• 「Facebook Developers デバッガ」（旧URL Linter）
  OGP が Facebook から正しく認識されるか、の確認ツール。
  誤った OGP が Facebook にキャッシュされた場合のキャッシュクリア（リフレッシュ）も可。
• その他参考資料
  ・Open Graph Protocol について – Facebook 開発者向けドキュメントの日本語訳とTips
  ・IT戦記 - フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か

はてなブックマーク

• はてなブックマークボタン

Twitter

• Twitterボタン

 Google +1 (Plus One)

• Google +1 ボタン
• Google+ 共有
• Google+ バッジ

mixi

• mixiチェックボタン
• mixi イイネ！ボタン

ブログ収益化

AdSense 最適化

Adsense バナーは調整に調整を重ねて今のサイズ・場所に落ち着いています。「Master Post Advert」重要。

• WordPress › Master Post Advert « WordPress Plugins

広告サイズと収益には相関がある（200px < 250px << 300px << 336px）。

AdSense は1ページあたり9つまで（内訳は以下）。→ソース

• 動画ユニット 1つ
• 検索向けAdSense 2つ
• コンテンツ向けAdSense（標準広告ユニット） 3つ
• コンテンツ向けAdSense（リンクユニット） 3つ

収益は、336x280px、ビッグバナー、スカイスクレイパーが高いが、これらは設置面積が大きくサイトデザインに制約を与えるため、可能ならこれらのバナーの設置を前提にしてサイトデザインするのがよい。

が、試行錯誤しながらやってみないと分からない面も多いです。

この要素と、1ユーザー当たりの閲覧ページ数を上げるための施策との関係で、（PV、インカムともに）運営がうまく行っているサイトのデザインはいくつかのパターンはあるものの、似たものになる傾向がある。

Amazon

紹介記事はクリック数も多くコンバージョン率も高い。特に、記者お気に入り商品の気合の入った紹介記事は高コンバージョン率。

サイドバーにある管理人オススメ商品はコンバージョン率低い。同じように気に入ったものばかり並べてるのに…。

楽天市場

紹介料率はかなり低いが広告面積の割りに高額商品が売れる。

支払いは 3000 円以内が楽天スーパーポイント、3000円を超える部分が楽天キャッシュというショッパい仕組み。楽天キャッシュの受け取りには楽天銀行の口座開設が必要。

しつこく楽天クレカを作らせようとさせられるが、楽天クレカを作らなくても楽天銀行口座は開設可能。ただし、キャッシュカード無し。

モバイルでの収益管理

は、別記事にて。Adsense , Analytics はAndroidアプリ有り。

トラフィック誘導とSEO

検索エンジン経由のトラフィックはバカにできない

時代遅れとも思われがちな検索エンジン経由のトラフィックですが、検索需要に対応したキーワード入り記事を座布団のように少しづつ積み上げていく事で、今でも安定したトラフィック源になります。

もちろん、検索者が何を求めているのか、を把握して、それに対応した記事を用意する必要がありますが。

ググれカスの向こう側に

言葉は悪いですが「ググれカス」と言われた人の画面の向こうにいる「人」として記事を書くようにしています。

また、「困っている人や持たざる人の気付きや工夫の手助けになる事」という運営の基本理念がありますので、ノウハウものに関してはそれに沿った記事になるように心がけています。

一方で、そういう理念がムンムン漂いまくる感じだとそれはそれで気持ちが悪がられそうですし、自分自身大した人間でもないので、さじ加減を考えつつ気分で変な記事も書きながら、という感じです。

ソーシャルメディア経由トラフィックの特性

ソーシャルメディアからの流入は「サージ」の形で観測され、週間～ヶ月単位の継続性がないものがほとんどです。

流入時間はFacebook 経由で数日、Twitter だと数時間という感じ。

Headタグのカスタマイズ

SEO の基本中の基本。

当初は Add Meta Tags とか色々試したけど、OGP タグへの悪影響など色々あって 2011 年夏から All in One SEO Pack に落ち着いてる。

• WordPress 用プラグイン「All in One SEO Pack」
  Post Title Format 等を「%post_title% | %blog_title%」に設定。TITLEタグ内で記事名が先、ブログ名は後に。
• WordPress 用プラグイン「Aioseo Multibyte Descriptions」
  ヘッダ内の description タグの文字化けだか何だかの対策。詳細忘れた。

URL形式は最初に決めておく

Google Analytics で解析しやすくするため、2011年2月あたりにURLの最後に「/（スラッシュ）」を付けました。

具体的には、Wordpress の「パーマリンク設定」を「/archives/%post_id%/」 に変更しました。

その関係で、それ以前の「はてブ数」はカウントされていません。URLに記事番号を使うのか、任意の文字にするのか、等は、事前に決めておくのがよいと思います。

サイトの技術ポリシー

コアモジュールハック、プラグイン修正は極力行わない

以下のポリシーで運営しています。

• WordPress コアモジュール修正は禁止
  → バージョンアップなどの妨げになる
• プラグインのPHP修正は極力行わない
  → QF-GetThumb の切り取り比率変更、Where did they go from here の Ajax error 表示対応など一部例外あり
• やりたいことはプラグイン追加・設定やテンプレート改修で実現
• サイトパフォーマンスよりコアモジュール・プラグイン修正をしない事を重視
• この範囲において実用的パフォーマンスが見込めない場合は機能を諦める

対応ブラウザは「CSS3 対応ブラウザ+IE8.0」

サイト改修コストもあまりかけられないし、実験的な意味合いのあるサイトなので、ちょっと先を見据えて Internet Explorer は 8.0以上のみ対応。

2011年夏時点でもIE7.0以前からのアクセスは微々たる物だったので、うちなら問題ないとの判断。

本当は、IE8.0 も切りたかったんだけど、さすがにWindows XPを切るわけにはいかず仕方なく対応。
（※参考「Wikipedia - Internet Explorer - バージョン別のOS対応」）

要 CSS3 メディアクエリなので IE8.0 は厳密に期待した表示ではないけど、近い表示にはなるようにしています。最近はプログレッシブエンハンスメントなんて考え方もあるようなので、アリなんでしょう。

Firefox, Chrome, Safari, Android ブラウザ等は最新版でのみ動作確認。

まとめると、CSS3 対応ブラウザ + IE8.0 がターゲット。という事。

アイキャッチ画像の管理・生成

レイアウト未確定時は自由の効く「QF-GetThumb」を使い、記事の1枚目の画像からアイキャッチ画像を動的生成をしています。が、キャッシュを効かせまくっているので、その場合でも負荷は一定以内です。

ある程度レイアウトが固まって来たら、Wordpress 標準のサムネイル機能を使います。

WordPress 標準のサムネイル機能についてはこちらのサイトが詳しいです。

サムネイル画像サイズの管理には「Additional Image Sizes(ZUI)」を使っています。

当サイトの特殊サイズ画像は全てこのプラグインから登録しており、レイアウト変更時など、新規サイズ追加時のサムネイル追加生成や、画像サイズ削除時の生成済みサムネイル画像削除もこのプラグインから行なっています。

この場合も、記事のいち枚目の画像からアイキャッチ画像を生成しています。

なお、投稿時の自動サムネイル登録は「Generate Post Thumbnails」を試用していますが、Additional Image Sizes とうまく連携してくれるかはまだ分かっていません。

 余談

とりあえず、自分用のメモなので、このページは状況に応じて更新すると思いますが、長くなってきたので将来分割するかもしれません。

WordPress ではタグ <!—more—> により記事を分割できますが、分割時のリンク先が記事の途中になってしまうのが「こそばゆい」と思っていたところ、便利なプラグインがあったので紹介します。

（※ 2011/07/18 時点でこのプラグインは公開されていません。新記事 WordPress で more タグのリンクをカスタマイズできるプラグイン をご覧ください。）

WordPressのmoreタグを変更するプラグイン | debeso

このプラグインを使用することによって、「<a href=”[hoge]#more-[huga]“>」を「<a href=”[hoge]“>」に変換することができます！コアファイルもいじっていないので、WordPressのアップグレードも容易にできます。

との事。

これで、記事分割時でもテンプレートタグ the_permalink() 相当のパーマリンクが出力されるようになり、大変便利です。

実は、Wordpress のプログラムを改造してしまう手もあるのですが、記事分割用テンプレートタグ the_content() の処理は、/wp-includes/post-template.php に書かれており、これを直接修正するとバージョンアップ時に上書きされてしまい、扱いづらかったのです。

プラグインならそういう不便もなくとても便利です。開発者様に感謝です。

関連記事

WordPress の勝手な文字変換を無効にするプラグイン

別の記事でご指摘いただいた件です。

このブログは WordPress を使わせてもらっているのですが、どうやら投稿したのとは違う文字列に勝手に変換しちゃうフィルタが有効になっているようで、ハタと困ってしまいました。

意図しない変換はソースコードなどを載せるとき邪魔になるし、そもそも変換の法則自体、納得いかないので、これを無効化するプラグインを探してみました。

ご指摘いただいた別の記事では、「1280x720」という部分の「x」（半角英字のエックス）が、勝手に「×」（全角の掛ける）に変換されていたため、記事の定義ファイルをそのままでは使えなったようです。

この変換法則は全く納得できません。

で、調べてみたら、こういった変換を無効化するプラグインとして、以下のURLを紹介しているサイトがあったので、ダウンロードしようと思ったらリンク切れ。

kill-wptexturize – Multimeter 

http://phoenixonline.co.uk/multimeter/kill-wptexturize/

仕方ないので、別のプラグインを探してきました。

”Disable wptexturize” at Utter Ramblings

やってる事は単純で、

remove_filter('the_content', 'wptexturize');
remove_filter('the_excerpt', 'wptexturize');
remove_filter('comment_text', 'wptexturize');

をしているだけ。

WordPress.org >> Disabling wptexturize()

によると、同じようなコードをテーマファイルに入れてやるのも手。とあるのですが、Wordpress 本体の機能をテーマとして定義するのはおかしいと思ったので、プラグインを探したのでした。

関連記事

腰が抜けるほど便利な PukiWiki 向けの GUI編集プラグイン「guiedit」

WordPress の more タグリンク先をパーマリンクにするプラグイン

以前、Windows Live のアップデートの予兆についてお伝えしましたが、ついに長らくベータ版だったWindows Live クライアントの正式版が公開されました。

これには、Windows Live Call や Windows Live Messenger など様々なソフトが含まれており、合わせて、気軽に使えるブログツール「Windows Live Writer」の正式版もリリースされました。

詳しくは以下から。

今回リリースされた Windows Live Writer の Build は 14.0.8050.1202 ja のようです。

この記事自体も最新版のWindows Live Writer で書いていますが、特に問題も見当たらず、相変わらず快適なブログ編集ツールと思います。

気のせいかもしれませんが、多少高速化されているような気が。。。。

Windows Live Writer のベータ版で使っていたブログの設定がそのまま移行されるので、旧バージョンを使っていた方にもオススメです。

しかし、Windows Live Call の商魂たくましさとサービス構成の出来の悪さは一体何なんでしょうか。。。

• ただ発信するだけでも月額料金が必要
• 着信は自前の固定電話かケータイで可だが、別途月額料金が必要
• 自前の固定電話やケータイへは着信時は、転送料がまた別途必要

と散々な状態。やる気が疑われます。

着信は、相手から直接固定や携帯にかけてもらえばよいのではないでしょうか。

全体的にみて、Skype In や Skype 月額プランの方がオトク感があります。

まだ、Windows Live Call を使ってないのでわかりませんが、国内サービスという事と、何せ「天下のNTT様」が絡んだサービスなので、通話の遅延は少なく品質がいいのかもしれません。

ただ、ソフトフォンの遅延対策には、PC上で動作するソフトのバッファリングなど、結構なノウハウが必要なので、そう簡単にSkype の牙城が崩れるのかは疑問です。

Skype の音声遅延改善も最近は目覚ましいですし。

関連記事

ブログ更新に便利な Windows Live Writer 最新ベータ版の入手