周りから何周か遅れて、やっとフェイスブックやツイッターのボタンをワードプレスのブログにつけようと思いプラグインを物色してみた。
一番使いやすかったのはWP Social Bookmarking Lightというプラグイン。WORDPRESSの管理画面内のプラグインの新規追加より、検索してインストールまでできる。

メインの機能はシンプルでわかりやすく、よくできてるんだけど、ボタンを表示する位置の基本が左側になっていて、WP Social Bookmarking Light内の設定画面内では変更できない。
デザインの関係でどうしても右寄せで表示したかったので、いろいろいじってたら取り敢えず解決したのでメモ。

WORDPRESSダッシュボード内の左下にある、「プラグイン」のメニュー内にある、「プラグインの編集」をクリック
↓
「プラグイン編集」の画面が出てくるので、右上にある「編集するプラグインを選択」から、「WP Social Bookmarking Light」を選び、すぐ右横にある「選択」ボタンを押す。
↓
WP Social Bookmarking Lightの編集画面が出てくる
↓
ダッシュボード内の一番右側に表示されている「プラグインファイル」という文字の下にあるファイル名のリスト内にある「wp-social-bookmarking-light/modules/content.php」をクリック。
↓
「wp-social-bookmarking-light/modules/content.php の編集」という画面が出てくる。
↓
ファイルの内容が表示されているので、真ん中より少し下にある、
<style type=”text/css”>
で始まり、
</style>
で終わる部分を見つける。
↓
その中で、表示位置を決めてあるので、
div.wp_social_bookmarking_light div{float:left !important;border:0 !important;padding:0 4px 0px 0 !important;margin:0 !important;height:21px !important;text-indent:0 !important;}
上記の太線の部分を以下のようにleftからrightに変更する（わかりやすいように太線にしただけで、実際は太線ではない）
↓
float:left→float:right
↓
最後に下の方にある青っぽい色の「ファイルを更新」ボタンを押して全て終了。
ちゃんとfacebookとtwitterのボタンが右側に表示されているはず。

サンプルが用意されているので、一部分を書き換えるだけで後はコピーして貼り付けるとすぐ使えます。
例えば、タグにtokyoと書くと、東京で撮影された写真、東京に関する写真を表示できます。
あまり日本語の解説がないようなので、使い方のメモを残しておきます。

左：東京(Tokyo)　右：上海(Shanghai)

左：ドバイ(Dubai)　右：アフガニスタン(Afghanistan)

各写真をクリックすると、パノラミオのサイトに移動し、大きいサイズの写真と、写真が撮影された場所をグーグルマップ上で見ることができます。
風景写真が多いですが、動物や、車、飛行機、などの写真もあります。

以下のような写真の一覧を貼り付けることもできます。
左右の矢印部分をクリックすると、ちゃんと写真がスライドします。

パノラミオ公式サイト
パノラミオは2005年にスペインで作られたサイトで、2年後にグーグルが買収し、今は、グーグルマップ（Google Maps）やグーグルアース（Google Earth）の写真にこのパノラミオの写真が採用されています。写真を撮影した人が、緯度経度の位置情報や、地名などのタグとともに投稿できるのが特徴のようです。

毎月、アップされた写真の中からグーグルアースに掲載される写真が選ばれるので、それを目指して、写真好きの人が質の高い写真を投稿されているため、綺麗だなぁと感じる写真が多く、個人的には気に入っています。

Panoramio Widget APIの使い方

Panoramio Widget API公式サイト
利用条件は最下部のConditions of Useの部分。

いくつか利用方法がありますが、一番簡単なのはiframeというものを使う方法です。
iframeを使うと、写真を表示したい部分にコードを貼り付けるだけでＯＫです。

ただし、公式サイトにあるサンプルをそのまま貼り付けると、wordpressの記事の中の場合は、表示されませんでした（サイドバーはそのまま貼り付けて使えた）。

調べてみると、wordpressの記事の中でiframeを使う場合は別にプラグインを入れる必要があるという情報もありましたが、コードの中にある余計な空白を削除してあげると、プラグイン無しでちゃんと表示されました。wordpressの場合は、ビジュアルエディタの方に一度でも切り替えると、iframe部分は消えてしまうので、この点は注意が必要です。

余分な空白を削除したコードが以下

<iframe src="http://www.panoramio.com/wapi/template/slideshow.html?amp;width=200&height=190&tag=shanghai" frameborder="0" width="250" height="200" scrolling="no" marginwidth="0" marginheight="0"></iframe>

上のコードをコピペして記事中に貼り付けたのが以下

ちゃんと表示されています。

あとは、自分が表示したいようにカスタマイズします。

写真の大きさや、種類を決める方法

width=200&height=190

コードの中のこの部分で、写真の大きさを決めます。
width　横
height　高さ
縦横設定する箇所が2個ずつありますが、普通は同じにしておいて問題ないと思います。

tag=shanghai

この部分で、写真の種類を決めます。上の例だと上海関連の写真を表示しているので、タグに上海の英語表記であるshanghaiを指定しています。
英語しか受け付けないので、英語表記がわからない場合は、表示したい地名の英語を和英辞書か、検索エンジンで調べる必要があります。

tagには地名以外にも、natureやsunsetなどの単語も使えます。写真の数が多いのは圧倒的に地名です。

tagの代わりにsetを使うこともできます。
tag=shanghaiの部分を消して以下に代えると、それぞれ

set=all　
（すべての写真）
set=public
（グーグルアースに採用されている写真すべて）
set=recent
（最近投稿された写真から順に表示）

となっています。

スライドショーの写真が切り替わる速度を変更することもできます。（標準設定を使う場合は何も設定しなくていい）
delay=2.5
（何も設定しないと標準のこの2.5秒）
変更したい場合は、タグの後ろに&を入れて以下のように付け加えます。

tag=shanghai&delay=1.5

以上で、スライドショーの設定は終わり。

次は写真の一覧をリスト形式で表示する方法。

まず、余分な空白を除いたコードが以下。

<iframe src="http://www.panoramio.com/wapi/template/list.html?tag=beach&width=400&height=200&columns=6&rows=3&orientation=horizontal" frameborder="0" width="400" height="200" scrolling="no" marginwidth="0" marginheight="0"></iframe>

上のコードをそのまま貼り付けたのが以下

設定項目は以下

tag=beach
（これはスライドショーの時と同じ）

width=400&height=200
（これもスライドショーの時とやり方は同じ）

columns=6&rows=3
（columnsは、横に並べる写真の数。rowsは縦に並べる写真の数。）

orientation=horizontal
（写真をスライドさせる方向、horizontal（水平方向）かvertical（垂直方向）のどちらかを必ず選択）

他にもいくつか設定ができるので、さらに興味がある人は、公式サイトを参考にするといいと思います。

以上、Panoramio Widget API（パノラミオ　ウィジェット　API）の使い方のメモ。

サイト名＞カテゴリ名＞記事タイトル

ブログでよく見かける、このようなリストをパンくずリストと呼ぶらしい。

WORDPRESSを使っている場合は、Breadcrumb NavXTというプラグインを使うと簡単に、パンくずリストを作成できる。（Bread crumbは、英語でパンくずという意味）

ダッシュボード内のプラグインの新規追加画面で、Breadcrumb NavXTという名前で検索。
自動インストールして、プラグインを有効にする。

あとは、テーマ編集画面にて、パンくずリストを表示したい場所に以下のコードを貼り付ける。

<div class=”breadcrumb”>
<?php
if(function_exists(’bcn_display’)){
bcn_display();
}
?>
</div>

私の場合は、single.php内のブログ記事タイトルの真下に貼り付けた。（こんな感じに表示される）

ヘッダーに貼り付けると、トップページでもパンくずリストの余計な文字が表示されるので、個別記事だけに表示するか、サイドバーのウジェットを使うのがいいと思う。見た目は、スタイルシート内にて「breadcrumb」というクラス名で指定してあげると好きにカスタマイズできる。

設定画面は、何もいじらなくても使える。一応トップページの表記が標準では「blog」になっているので、そこだけ「HOME」に切り替えた。SEOに気を使うならちゃんとした名前をつけるのがいいと思う。

関係ないですが、パンくずリストって、グリム童話の「ヘンゼルとグレーテル」の話からきているらしい。
グリム童話というのは、ドイツのグリム兄弟が集めた童話集のことで、
ヘンゼルとグレーテルというのは、その中の童話の一つ。

話のあらすじは、捨てられた二人の兄弟が、森の中に入り、森の魔女に捕まり食べられそうになるが、結局返り討ちにしてしまう、というもの（半分想像）

で、森の中に入るときに、二人の兄弟が道に迷わないように、ポケットの中のパンを、ちぎっては捨て、ちぎっては捨て、帰るときに、道に迷わないように、目印にしていたらしい。

これがパンくずリストの由来らしいです。

冷静に考えると、パンは食料なので、森の中に捨てたら、他の生き物たちが（例えばアリとか）、あっという間に食べたり、運んだりしてしまうから目印にはならないと思いました。

パンくずリストって、私は、何か生き物をおびき寄せるための撒き餌の例え、だと思っていたので少し意外でした。

勉強しようと思ったきっかけは単純です。私がよく見ているブログ真人間ノートのgoukouさんがphpの勉強を開始されたのをみて、私もやってみようと思ったのが理由です。goukouさんの真人間ノートは、面白いですけど、それだけじゃなくて役に立つことが書かれているから、以前からよく参考にさせてもらっています。

私はプログラミングの経験はないので、こういうある程度最初に敷居がある分野は、衝動が湧いたときに一気に最初の山を超えてしまうのがいいと思い、あえて便乗させてもらい勉強することにしました。

とりあえずブログの記事でおすすめされていた「やさしいPHP やさしいシリーズ 高橋 麻奈」という本を注文しておいた。
ダラダラやるのは苦手なので、短期集中で勉強する予定。
まず今週いっぱいで全体像把握、来週１週間で簡単なサイトを作る。という計画。

http://wordpress.org/extend/themes/browse/popular/

ランキングを見ると”Thematic”というテーマがいつも上位に入っている。
この”Thematic”というテーマは以前使ってみたけど、どこがそんなに人気なのかさっぱりわからなかった。けど、今日久しぶりに使ってみたら、凄くいいテーマだとわかった。カスタマイズの自由度が高いから、テーマを自分でいじりたい人にとっては好きにできる部分が多くて魅力的。

カラーイメージスケールという本を買ってきた。
人間が色に対してもつイメージを言葉で表現しまとめた本。

中はこんな感じ。
例えば、「アプリコット（あんず色）」なら「親しみやすいイメージ」という説明が書いてあり
アプリコットに合う配色パターンが紹介してある。

色の配色とか自分で考えるのが好きなんですが、どの分野にも先行者がいるので一度素直に知恵を借りてみようと思い買いました。
いくつか作りたいサイトがあるので、その作成に利用するつもりです。
色は人間の無意識に働きかける作用があるから、興味がある分野です。

カラーイメージスケール 関連商品 配色イメージワーク カラーリスト―色彩心理ハンドブック カラーシステム デザイナーのためのBEST COLOR配色チャート事典 配色イメージブック

ネットを見ていていいな、と思った色を調べるときに便利なソフト。
RGBの配色とHTML色番号がわかる。
昔から使っていてシンプル＆使いやすいから気に入っている。インストールも必要なし。
もっと高機能なソフトはたくさんあるだろうけど、こういう的を絞ったソフトは何気に凄いと思う。

while (have_posts()) : the_post();

の部分が最初の辺にあるから

while (have_posts()) : the_post(); $counter++;

と書き換える。
そして、表示したい部分に

<?php if ($counter <= 1) {
print <<<EOD
ここに表示したいもののコードを入れる
EOD;
} ?>

を入れてやる（これは１番目の記事のみに表示する場合）

ここから本題で、

counter <= 1

の

<= 1

ここで表示位置を決めているからここを変えれば順番は自由に設定できた
この条件を決める式が今までわかっていなかった

counter > A: Aより大きい
counter < A: Aより小さい
counter >= A: A以上
counter <= A: A以下
counter == A: Aと同じ
counter != A: Aと違う

さらに以下のものが使える

&& : かつ
|| : または

だから

($counter >= 2 && $counter <= 5)

とすれば
２番目以上５番目以下にのみ表示することができる。

phpのことはわからないし、覚えるつもりもないんだけど、自分がやりたい目的から逆算して調べると理解しやすいのかもと思いました。

トップページ、個別記事、アーガイブなどでウィジェットの表示を変えることができます。
ある特定の記事のみに希望のウィジェットを表示したいときは、URLをまるごと入れてやればOK。

他にもいろいろできそうだけど、カテゴリーのURLを入れて設定する方法がまだあまり理解できない。
このプラグインは工夫次第で使い道はかなり多そう。

使い方は簡単なので、感想だけ書くと、まったく不満はないです。
ついでにアクセス解析についていうと、ＰＣサイトの方は、グーグル検索からの人が9割ですが、携帯はヤフー検索からが9割。アクセス数は携帯版の方が少し少ないくらいで予想以上に携帯を使っている人が多いんだなという印象。以前は携帯でネット見る人なんてほとんどいないだろうと思っていたけど、きちんとしたデータを見ると考えが変わりますね。

試しに携帯サイトを作ってみたんですが、いい手ごたえを感じているので、もっと集中してみるつもりです。