カテゴリー別アーカイブ: wordpress

サイト構築関係の話題
wordpress、css、プラグイン、ウィジェット、etc…

WordPressとTwitterを連携させる

WordPressとTwitterを連携させる。
とはいえ、私が探していたのは、単にWordpressのサイドバーにTwitterを表示させるプラグインだったのだけど。
まずいいなと思ったのがこれ。
Lifestream
Twitterに限らず、Feedを取得して、表示してくれる。
もちろんTwitterは公式に対応している他、著名ブログ、「The blog of H.Fujimoto」で、(WP)「Lifestreamプラグインではてなブックマークの情報を表示する」が公開されるなど、フォロワーも多そうだし増えそう。
だけど、

Requirements:

  • PHP 5.x
  • WordPress 2.5+
  • MySQL 5.x

という非常に初歩的なところに私の環境は引っかかってしまった。
ロリポはMySQLのバージョンが4.2なので、Lifestreamの要求するMySQL 5.xに合致しない。
知識があればバージョンアップしたり、回避できるのかもしれないけれど、私には敷居が高そうなので、パス。
でもこのプラグインは多くの人にはたぶんお薦めです。

さてさて、結局私が選んだのはこれ。
Twitter Tools
定番みたいですね。
日本語化されていませんが、ググると日本語化ファイルを配布している方もいるようです。

で、詳しく書こうと思ったのですが、ここで既に詳しく解説されていますね……思いっきり引用させて頂くと

  • WP記事更新時にTwitterに投稿する。
  • サイドバーにTwitter投稿を表示する。
  • サイドバーからTwitterに投稿する。
  • Twitter投稿をWP記事として投稿する。

と、多彩なことが出来ます。

あと、ややブログの表示が遅くなるなどの問題点やアンインストールの方法を掲載している方も。
使わなくなった Twitter 系 WordPress プラグインまとめ / Twitter Tools をインストールすると 1秒遅くなる – Nire.Com

さて、このサイトにTwitterを表示させようと思った理由です。

私はこのブログをある程度公的な情報というか、日記的な物ではなく記事的なものにしたいと思っているのですが、いきおい更新頻度が落ちてしまう。
それに他人のブログを読むと、意外と何を食べたとかそんなくだらないことが楽しかったりもする。
でもそればかりだと、芸能人のブログのように情報として限りなく無価値になっていく。
二律背反。

それでTwitterに日記的な部分を担わせて、サイドバーに表示させるようにしました。
もちろん記事自体ももうちょっと今後更新頻度を上げていきます。

WordPressを2.5にアップデート

このサイトのCMS、WordPressのバージョンを2.3.2から2.5にアップデートしました。
2.2MEから2.3本家版へのアップデートに比べると、特に面倒くさくもなく、スムーズに終了。
もちろんバックアップはとりましたが。

もう既に多くの方が感想を書かれていますが、ダッシュボードをはじめとして、管理画面がかなりすっきりしましたね。キレイです。

アップデートで気をつけることがあるとしたら、公式サイトにあるとおり、/wp-admin/upgrade.phpにアクセスするということでしょうか。クセで普通にログインしてしまうと、下のような画面にたどり着けません。

で、うまくいくとこの画面に遷移。

ってあれ……あたらしいバージョンは画像やマルチメディア系のアップロードが改善されているのだけれど、サムネイルの切り取られ方がなんだかなあ……このへんはflexible uploadが2.5に対応するのを待つしかないですね。

……と思ったら、プレビューやビジュアル編集画面だけの現象で、記事を公開したらちゃんと切り取られていました(プレビューでは画像の一部が正方形に切り取られていた)。うん、これならまあ大丈夫かな。

PageRank更新・1から3へ!

なんとこのサイトのPageRank(ページランク)が1から3になりました!
あくまで指標のひとつに過ぎませんが、嬉しいです。

PageRankは数ヶ月ごとに更新があって、前回は昨年10月だったそうです。
このサイトは12月にPhotoshopのブラシの記事を書いてから、訪問者数が伸びたり、リンクやブックマークがつきだしたので、それを評価されたということなんでしょうね。
個人サイトだと3から4が人気サイト、5でアルファブロガー級だそうなので、まあここから上がることはそうそう無いと思いますが……

Photoshop関連、書きかけの記事がいっぱいあるので、さぼらずアップしていきたいと思います。

Yahoo! ブログ検索にインデックスされなくなった?

WordPress ME 2.2.3をWordPress 2.3.2 日本語版にアップグレードしたら、Yahoo! ブログ検索にインデックスされなくなった気がします。
リクエストを送信してもだめで、ウェブ検索エンジンにクロールされると、やっとインデックスされるといった状態です。だから、だいたい週1回リフレッシュされる。
反対にTechnorati (テクノラティ) とGoogle ブログ検索には以前よりもすばやくインデックスされるようになりました。

MEと本家版の違いのせいなんでしょうか?
とはいえ、Yahoo!ブログ検索ヘルプにある、Yahoo!ブログ検索の検索結果に表示されるにはを読んでみても、要件は満たしているように思えます。言語指定は日本語だし、Feedburnerは使ってないし。
国内のブログ検索エンジンはどれも一長一短で、くまなくカバーできているものは無いように思うのですが、その中でYahoo!ブログ検索はいちばんキーワードあたりのヒット数が多いと感じていたので残念。
理由を知ってる方がいたら教えてください。

Vicuna – WordPress テーマをリニューアル

Vicuna – WordPress テーマを使ってこのブログサイトを構築してきたけど、いかんせんいじり過ぎてにっちもさっちもいかなくなっていたので、思い切って一から作り直すことにしました。
新しいデザインは同じVicunaのNinja Styleをベースにしています。

しばらくの間、ちょこちょこデザインが変わるかもしれませんが、我慢していただければ幸いです。

WordPress ME 2.2.3をWordPress 2.3.2 日本語版にアップグレード

WordPress ME 2.2.3WordPress 2.3.2 日本語版にアップグレードしました。
理由は、まああんまりこれといって無かったんですが、アップグレードしてみたらなかなか便利になっており、やって良かった。
素人目には、

  • タグのサポート
  • ビジュアルエディタの機能追加
  • プラグインのアップデート通知機能

あたりが目立った改良点です。

アップグレードに関しては既にいろんなところでいろんな方が書かれているので下記以外にも参照してみてください。
WordPressサーバ移転まとめ – Odysseygate.com —DBのバックアップの仕方
WordPress のアップグレード/詳細 – ps*wiki —この手順にそってうまくいきました。

ただ、私はもともとタグを使っていなかったのですが、プラグインを使ってタグを付けていた人はもっと大変かもしれません。

で、Vicunaのテーマ(Movable Typeでいうテンプレート)もだいぶバージョン番号が上がっているので、これを機にアップデートしようと思ったのですが、PHPファイルをカスタマイズし過ぎちゃって、そう簡単に変えられない……どうしよう。
これを機に一から作り直そうか……だとしたら転職先が決まらないと、これ以上時間をとれそうにありません。

Amazonからアフィリエイトのクローズ通知

ITmedia Newsより

「アカウントを停止した」――Amazonアフィリエイト会員に間違いメール

私のところにも届きました。

あなたのアソシエイトアカウントはすでにクローズされておりますので、今回が最後のお支払いとなります

という内容のメールが。

でもビックリしてAmazonのアカウントにログインしたら、別にクローズされているわけでもなかったので、変だなあと思ってた次第。

謝罪メールがこのあと届くらしい。
まあひとまずよかった。

Google AdSenseの「もっと表示」、スクロールアロー

Google AdSenseを導入しましたが、まあもちろん今のところクリック数は限りなくゼロに近いです。
それはさておき、いろんな表示のされ方がされて面白いです。

ad_more.jpg

「もっと表示」と出たり、
(「他の広告を表示」と出ることもある)

ad_arrow.jpg

矢印が出たり。
矢印の形も複数あるっぽい。

(「もっと表示」も矢印も出ないこともあります)

サイト運営者のクリックは禁止されているので、押してはいないんですが、
他サイトのAdSenseで試したところ、「もっと表示」をクリックすると、Googleの別ページに遷移して、広告が10個表示されます。

矢印をクリックすると、表示されている広告が矢印とは反対方向にスクロールしつつフェードアウト、新しい広告がフェードインします。
JavaScriptのアニメーションに慣れている方にとってはなんてことないのでしょうが、なかなか面白い。

コンテンツマッチ型なので、自分のこの記事にはどんな広告が表示されるのだろうということも興味深いです。

WordPressでGoogle AdSenseを導入する(2.2、2.3対応版) ― 彦左虎肉丸

WordPressでGoogle AdSenseを導入する(2.2、2.3対応版)

ほとんど人のこないサイトですが、Google AdSenseを導入しました。
その際、WordPress上での導入の仕方を紹介したサイトのほとんどが、バージョン2.0以前で説明されており、試行錯誤の上で発見もあったので書いておきます。

まず、WordPressの話に入る前に、Google AdSenseを始めるにあたって、以下のサイトがとても参考になりました。

Google AdSenseの始め方 その1「審査を突破する」 – GIGAZINE
Google AdSenseの始め方 その2「広告を最適化する」 – GIGAZINE

GIGAZINEさんありがとう。

しかしリンク先を読んだり、実際に設定を始めてみると解るのですが、なかなかに長い道のりです。しかしそれに見合う見返りがあるとも書いてあります。

次にWordPressへの導入ですが、これが割と新しめの情報でしょうか。

WordPressユーザのためのGoogle Adsenseプラグイン17選『17 WordPress Plugins For AdSense』 | CREAMU

ここでも紹介されているAdSense-Deluxeというプラグインをまずは導入。
検索をかければ日本語で使い方を書いてあるページも出てくるので、そんなに難しくはない。
記事の本文中にAdSenseを表示させたい人にはお薦めです。

で、私はというと実は実際には使っていません。
私は記事の前後やサイドバーに表示させたかったのですが、プラグインを使っても使わなくても、結局テーマ上の各PHPファイルを編集する必要があるからです。
まあ使った方がコードが短くはなりますが。

プラグインを使わない場合は、Google AdSenseから生成されたコードを、テーマ上のindex.phpをはじめとする各PHPファイルを開いて、挿入したい場所にペーストするだけ。
私の場合は、

  • index.php
  • archive.php
  • category.php
  • single.php

のトップ記事タイトルの上に挿入しました。
たぶん前は、例えばカラーパレットとかちょっといじる度に全ての挿入されたコードを編集する必要があったから、プラグインがすごくありがたかったんだろうけど、今のAdSenseは設定画面でそのへんは一括管理できるので、ちょっと微妙かな。

そして上のリンク先にある、AdSense Widget for WordPress Sidebarを使ってサイドバーにもAdSenseを表示!
……と思ったらなんかうまくいかない。
なんか必要のないAdSenseのパレット設定がある。

結論としては、WordPress 2.2以降のユーザーにはAdSense Widgetは必要ありません。
なんと標準のTEXTウィジェットにコードをペーストするだけで表示されます。
adsense_sidebar
プラグインもPHPの編集も必要なく、初心者にも
(私がそうです)お薦めです。

今は下記のやり方がうまくいかず、試行錯誤しています。

Google Adsenseの代替広告にAdsense紹介プログラムを使う方法 – GIGAZINE

そんなに難しくないはずなんだけど、なぜか空白になってしまう。
404エラーでもないし、ソースは読み込まれてるっぽいんだけど……
うまく表示されるようになったら追記で書きます。

追記
表示されるようになりました。
表示されるようになるまで1週間くらいかかりましたが、そのあいだ特になにもやっておりません。
Googleの内部での手続きなり認証なりの期間だったのでしょうか?
結局よくわかりませんが、空白になってしまうという方は、しばらく放置しておいてみてください。

画材としてのPhotoshop

私が人に対して何かを教えることができるか?
考えた結果、それはPhotoshopのことくらいだな、と思い至りました。

今後、画材としてのPhotoshopのTipsを書いていきます。
特にブラシの具体的なカスタマイズ方法などのノウハウを中心に紹介します。

画材という意味ではやっぱりPhotoshopよりPainterでしょ!
……という方にこそ読んでいただきたいと思います。

Adobe Photoshop CS5 Windows版 (32/64bit) Adobe Photoshopシリーズ
アドビシステムズ

Wacom プロフェッショナルペンタブレット Mサイズ 紙とペンに迫る書き味 Intuos4 PTK-640/K0 Wacom ペンタブレットシリーズ
ワコム

アイキャッチ完成

サイドバーにマークを表示。
とりあえずこれで当初考えていた要素がそろったという事で、表面的なデザインは完成。
仕事の忙しさも相まってエンブレムのデザインに思ったより時間がかかってしまいました。
医の紋章「カドゥケウス(ヘルメスの杖)」、家紋の「丸に梅鉢」、「虎の顔」という要素で作りました。

……あとはコンテンツの充実ですね。書きたい事、やりたいことは溜まってます。
形にする時間がなかなかありませんが、頑張ります。

IE6への対応に四苦八苦

ヘッダー下のナビゲーションバーを、アイコンと文字で構成した画像で置き換え、
苦労してカレントのページがわかりやすいようにしました。

その経緯は後でまとめて書くけど、問題は、今日何気なく会社のPCから、このサイトを見てみたときでした。
……ナビゲーションバーが表示されていません。
Windows版のFirefoxではちゃんと表示されるけど、Internet Explorer 6では、ヘッダーのすぐ下に、メインコンテンツ部分が来てしまっています。

やられました。
自宅では、Mac版のFirefoxとSafariで確認しているのですが、やっぱりMacでサイトを作るのは限界があるなあ……と痛感した瞬間でした。

調べてみて、IE6.0のCSSバグだとなんとなく確認、ホーリーハックと呼ばれる、IE6.0 の配置に関連する問題をほとんど何でも解決してくれると言われる、

/*Hides from IE5-mac ¥*/
 *html セレクタ{ height: 1% }
 /*End hide from IE5-mac */

というコードを挿入して、無事解決。

しかし、ここ2日くらいの間に来た多くの人は、あのナビを目にしていなかったのかと思うと、残念。

IE6.0での表示は他にも驚きの連続でした。

  • サイドバーのテキスト部分のサイズ指定が反映されない。

「このサイトについて」以下の部分、

moboの日々の雑記や過去の絵を晒す場所。
今のところコンテンツの多くは、過去にmixiやYahoo!ブログに書いてきたものをまとめただけですが、今後少しづつ充実させていく予定です。

が、おかしな大きさになっています。英語の「mobo」、「mixi」、「Yahoo!」部分はちゃんと指定サイズが反映されているっぽいのですが、日本語は逆に大きくなっているような感じ…。
試行錯誤の末、現在、Text-size: 12ptとすることでとりあえずほどほどの見た目になっています。でも11ptにすると逆に文字が大きくなったりするので、正直わけがわかりません。

  • テーブル指定の行間の「空き」が、表示されてしまう

WordPressでは、2行以上の連続した改行や、2文字以上の連続したスペースは、全て無視されます。なので、文章上、「間」を作りたい時に困るのですが、当座の対策として、テーブル指定の見えないボーダーを作っていました。

<hr style="border: 0pt none ; margin-top: 2em; margin-bottom: 2em" />

ですが、IE6.0で見たら、このボーダー、表示されちゃっているじゃないですか!
がっかり……
テーブル指定は消しました。

  • ヘッダーにある文字サイズ変更ボタンの色が変わらない

先日導入したボタン、気に入っているんですが、IE6.0だと、選択されたボタンの色が変わりません。

Internet Explorer 6、シェアを考えなければ、無視したい…
まあそれを言ったらほとんどのWinユーザーの方々はフォント指定などで、Macユーザーを無視したいんだろうな……

ここに挙げたような問題も、Webデザイナーさんは全て把握して、簡単に回避できるんだろう。
精進あるのみですね。

Mac版 Firefoxにおける Litebox 1.0 の不具合

緑男ブログさんの記事、Litebox1.0のちょっとした事・修正版の記事を見つけてすっきり。

私の常用ブラウザが Mac版 Firefox であるために、この問題、激しく気になってました。
あの小粋空間さまでもサイトを読み込む時に同じ症状が出ていたので、
こりゃMacのFirefox使ってる限りしょうがないんだな、とあきらめていたので、直ってすごく嬉しいです。

この症状、うまく説明するのが難しいんですが、LiteboxのJavascriptが埋め込まれているページを読み込む時に、一瞬ブラウザ内の画面上半分が、Liteboxのオーバーレイの色(デフォルトでは半透明のブラック)で埋め尽くされるというものです。
すぐにその色は消えて、普通にページが表示されるようにはなるのですが、「あーこのサイト、Litebox 使ってるんだ」となんかタネばらしされるような気になります。

結局、Mac版 Firefox のユーザー数が少ないから野放しになってるんでしょうね…

Liteboxを使われている方は、Winユーザーの方で再現できない方も、上の記事を読んで修正すると、よりスマートなプレゼンテーションにつながると思います。

2007-09-14 追記:
書いて数日ですが、すでに小粋空間さまのページでは、この不具合は出なくなっています。早い!
もしこの記事を読んでお気を悪くされたなら申し訳ないです。

タイトルロゴ案

なかなかいいロゴ案が思い浮かばない。

ともあれ、ああでもない、こうでもない、と、
字を眺めたり、しばらく放っておいたりする作業はとても楽しい。

title2_draft.jpg

今日のサイトの変更、改善点。

Vicuna Blogの記事、

を読んで、とりあえずまんまやってみた。
サイト上部(ヘッダー)右上にある、S M Lのボタンを押すと、フォントサイズが変わります。すごい。

その他、CSSをぼちぼちいじる。

ここにきて、サイトデザインはおおまかに当初のイメージに近づきつつあるけど、むしろ行き詰まりつつあるような感じもする。
行き当たりばったりでなく、しっかりとビジョンを持たないと、これ以上完成度があがっていかないなあ。

プラグインでのカスタマイズ

現在、有効化しているプラグインを書き出してみました。

  • About Me widget
    サイドバーにHTML形式の
    テキストウィジェットを表示できる
    画像も入れられる
  • Contact Form ][
    [Contact Form]と入力するだけで、
    コンタクトフォームを作ることができる
  • Flexible upload
    画像をアップロードする際の、リサイズ、
    サムネイルの作成、
    ウォーターマークの埋め込み、
    LiteBoxへのリンク作成などができる
  • Litebox plugin for WordPress
    リンク画像をスタイリッシュに表示できる
    元は黒バックに白枠で、ポラロイド写真のような見た目になるものだったので、
    CSS、imageに変更を加え、ポートフォリオ用に濃紺のバック、グレーの枠に変更
  • Ultimate Google Analytics
    アクセス解析の「Google Analytics」用のテキスト埋め込みプラグイン
    多岐の設定ができる(やってないけど)

…コメントや、トラックバックや、タグなどについてのプラグインが皆無なのが、
特徴といえば特徴でしょうか。

サイトの外観をVicunaに

WordPressでいう「テーマ」、Movable Typeでいう「テンプレート」、
…つまりブログサイトのデザインを選ぶのはかなり難航しました。

Webデザインのことも、HTMLやCSSのことも全く
(このサイトを立ち上げる時点ではCSSという言葉を聞いた事すらなかった)
知りませんでしたが、ゆくゆくは自分のオリジナルのデザインにしたいと考えており、
まずはプレーンなテーマにしようと考えました。
そして、カスタマイズしやすいこと。

いろいろ調べてこれはいいと思って最初に選んだのは「K2」というテーマ。
今でもデザインは非常に気に入っています。
ヘッダー下にあるタブがいい感じ。
カスタマイズもしやすそうで、実際にかなり(自分の中では)進めていました。
やめてしまった理由は、自分の環境では気がつかなかったのですが、
Internet Explorer 6 では JavaScript エラーが出ること。
これは私の使っている WordPress ME2.2 上で出る問題のようです。
回避方法があるようですが、なんとなくやめて、他のテーマを探す事にしました。

そして紆余曲折の末、行き着いたのが、wp.Vicuna でした。
Vicuna は、Web標準にそってXHTMLが書かれており、
様々なCMSで同じテーマが使えるというプロジェクトです。
現在のテーマは wp.Vicuna Ext の style-origin を下敷きにしたものですが、
いじればいじるほど、XHTML といい、CSS といい、
Webデザインのプロによって、よく考えられて、作り込まれているなあ、と感心します。

Web標準や、CSSの考え方も概念としてはだいたいわかってきました。
「あ、マークアップとかCSSって QuarkXPress のマスターページみたいだな」
「テキストエディタでの記述って難しそうと思ってたけど、なんとかなるな」
というのが今の感じです。
面白いわ。当分このおもちゃで遊べそうです。

WordPressでのサイト立ち上げ

ドメインを取得し、ブログツールを使ってサイトを立ち上げて3週間。

イメージとしては、いわゆる日記や雑記を書く、メインのブログとともに、
過去の作品(ポートフォリオ)や、自己紹介、連絡フォーム等を静的なページで構成、
という感じでした。

企業の提供するブログだと、やっぱりこのへんの自由度が低い事、
著作権の問題などが微妙な事、
企業名のドメインを名詞等に刷りたくない事、
あともちろんデザインの自由度が低い等の理由でやめました。

というより以前Yahoo!ブログをやってたんだけど、
そのときの不満点から、ブログを離れて、mixiで日記を書いていたのです。
まあこの時の最大の不満は、機能的な部分よりも、
ネット上での人間関係の面倒臭さ、しんどさだったんですが。

でもmixiで書いていると、たまに、
「この日記はfeed検索やGoogleであとあと検索できて欲しいなあ」
と思うことが出てきました。

つまり僕にとっては、知り合いに読んで欲しい近況、日記は、mixiが適している。
(mixiはしんどくならないように、直接の知り合い、友人しかマイミクに登録していない)

一方、ある程度、公共的な意味合いがありそうな内容…
日記というよりは記事とでもいうべきもの、
これはブログが適しているなあと思ったわけです。
自分勝手といえばホントにその通りなんですが。

最初はリリースされたばかりのMovable Type 4で構築しようと試みるも、
WebデザインやHTMLもろくに知らない初心者にはつらいバグの数々。
出たばかりということで対策などの情報も探すのに一苦労。
(既にその後バグフィックスのマイナーバージョンアップはされたので、
今は良くなってきているのでしょう)
それでもまあなんとかこれで行こうかなあ〜と思ってたとき、
WordPressのことを知りました。
へえ!Movable Typeって日本以外じゃシェアをWordPressってやつに奪われているんだ。
じゃあ一回使ってみようかな…

1時間後にはうん、こっちで行こう!と決めてました。
Movable Type、WordPress、それぞれメリット、デメリットあるのはわかりますが、
私のようなWebサイト構築の知識、技術が無い者にとっては、
今のところWordPressに軍配があがります。

どちらも最新バージョンはブログツールというよりは、
CMS(コンテンツ・マネージメント・システム)として、
総合的なサイト管理ができますが、ユーザーフレンドリーなのは後者かなあ…
使い込むとPHPなど、プログラミング言語の壁にぶち当たる予感はプンプンしますけどね。

あとは私のような、個人と個人事業者の分け目がどこにあるかわからない職種の場合、
オープンソースのWordPressの方が、ぶっちゃけ安心だというのもあります。
Movable Typeに50,000円払うくらいなら、Adobe Dreamweaverを買うかも、と言いたくなります。
まあジャンルは違うんですけど…

長くなったんで、デザインテーマの紆余曲折、カスタム、CSSなどについては、また次のエントリーで。

ハリボー -Liteboxのテスト

Liteboxのテスト。
画像をjavascriptでかっこ良く表示するプラグイン。
リンク先はそれをWordPress用にカスタマイズしたパッケージ。

ハリボーのアイコンをクリックすると、
大きい画像を表示。
大きい画像のみウォーターマークを埋め込み。
これはFlexible Uploadという別のプラグインで、
サイズや埋め込みを自動制御しています。

大きい画像から、グループ化した画像を、NEXT、PREVボタンを押す事で、
簡易スライドショー。
でも今回はなんの脈絡もない画像が出てきます。すいません。

haribo.jpg

画像は全部サムネイルを表示してもいいけど、こうすることで、
タイトル絵だけ表示して、紙芝居や絵本、4コママンガを展開するなど、
用途は広そう。
画像のカジュアルコピーを防ぐ効果もあるし。