カスタマイズ

Serene Bach から WordPress にしました。

　取りあえず詳しいことは後々書くとして、取りあえず当サイトを構築していたブログ構築ツールをSereneBachからWordPressに変更しました。

　今までのblogツール歴はこんな感じ。

1. Teacup　AutoPage（レンタル）：2004.09〜
2. ロリポブログ：2006.01〜
3. SereneBach：2006.06〜
4. WordPress：2008.06〜

　実は５月下旬か少しずつblogツールの引っ越し準備をしてました。さすがに色々やることも多くて、時間もないので毎日少しずつごにょごにょダラダラと作業を進めてきまして、本当ならもう少し早く引っ越しできたかもしれないんですが、あれもこれもと準備してたらこんなに日数かかっちゃった。まぁSereneBachには丸２年お世話になりまして、良いツールだったのですが、現在レンタル中のCORESERVERに引っ越してからエントリーを投稿するときのServererror、再構築時も丸ごと一発での再構築が出来なくなって、色々手間がかかる。SereneBachのサーバー負荷が洒落にならなくなっちゃった。さらにSereneBach3.×が正式版出のを１年近く待ってましたが中々出ない。そんなわけでWordPressへの移行に相成りました。

　でも、SereneBachを使わなくなった訳じゃなく、もう１個の完全に眠っている放置blog「Mac＆Lovers」がSereneBachだし、さらにはと有るところでもう１個使わせていただいてるので、まだまだ世話になるだろうし、3.×系の安定版が出たらまたSBで構築してるblogをUPしたりするでしょうし、色々ですね。もちろん他でSereneBach弄ってもそのエントリーはこのブログで書きますよ！ああ、今回のWordPressへ移ったのも書いた方が良いのかしら。

　まだWordPressでの投稿になれてないので、いまいち使いにくい部分はある物の、そのうち慣れるんだろうと思ってダラダラこれからもブログは続けていきますよ！

　Serene Bachのスパム対策を色々やってきましたが、結構TBスパムは既にスパマーに登録されてしまったsb.cgiからリネームさせ.htaccessでUserAgentを指定し弾くことで98％は弾けるようになりました。残りの2％は普通に関係のないTBを送ってくるスパマーなのでそれはたいしたcgiへの負荷にはならないから良しとしましょう。

　さて、次はコメント。コメントも同じように個別にcgi名を変え新たに設置して.htaccessでpost攻撃を遮断すればいいのでしょうけれどそこまでしてしまうと一般の方や海外在住日本人の方からのコメントまで弾きかねません。それにcgiを一杯設置してもなんだっけ？と私のようなずぼらな性格の場合忘れてしまいそうなので増やすのはtb用にとどめておき、コメントは通常のcgiを使っておきたいわけです。しかし、コメントフォームには見事にsb.cgiのパスが挿入されます。もちろんこれがないとコメントが受け付けられなくなるのですが、Formに書いてあるとスパマーにばれてしまいダイレクトにpost攻撃でコメントスパムの嵐になります。

　そこで、要するにFormソースの中にコメント受信するためのcgi名が無ければスパマーが自動で収集する事が出来なくなるわけです。そんなこんなでJavaScriptでForm内のcgi名を隠すことにしました。色々SB系サイトさんでは利用されている方もいらっしゃるようですね。

Continue reading

　いい加減勘弁してくれ。サーバーの負荷軽減と戦いつつ、対策してはすり抜けてくるスパムと追いかけっこ状態だが、随分とCORESERVER.JP移転当初から比べるとかなり負荷は激減させることに成功した。しかしねぇ・・・百度さんコリャ厳しいaccessですよ。cgiにばっかりアクセスしているのは何故ですか？

　百度とは中国の検索エンジンで、日本でも運営されているのですが、ここのサイト収集ロボット君が激しいアクセスを繰り返しています。以前もSERVERに過負荷をかけるということで問題になり百度も対策したという話ですが、最近また激しい気がしています。以前のように毎秒アクセスではないけれど、cgiへのアクセスが困る。Yahoo!やGoogleのロボットが収集しないアドレスにまでアクセスしかけてくるので困りものです。SereneBachを利用していますが、なぜadmin.cgi（管理画面）やcnt.cgi（カウンター）にまで・・・最近一番多いのは携帯電話用の表示を司っているmb.cgiへの異常なアクセスが見受けられます。１日で一番アクセスされているFileがmb.cgiでしたから・・・。

　一応検索エンジンでスパムじゃないですから弾くのには若干抵抗もあり、対策するという話でしたから放置していましたけど、無理ですね。正直百度検索で検索し来る人は居ません。70％がGoogleから、25％がYahoo!から、残りがその他のMSN等の検索エンジンやリンクたどったりRSSからだったりと言う感じで百度からは見たこと無いです。試しに百度でうちのサイト検索したら何でこのアドレスまで拾って居るんだよ！と思われるような管理用アドレスやら携帯用やら出るわ出るわ・・・。

　そんなわけでロボットに巡回されても「百害あって一利なし」と判断し完全に弾くことにしました。しばらく.htaccessで全面的に弾いておきます。時間がたって落ち着いたらcgiFileへのaccessを禁止するような.htaccessに書き換えようかなとは思いますけどね。

　GIGAZIN「ランダムな英字トラックバックスパムをブロックする方法」と、NOBODY:PLACE「トラックバックSPAM対策。」等を参考に私もこの方法で弾いてみようかと思います。

　ログを見てみると通常トラックバックで表示されるPOSTに含まれているUserAgentではないことが解ります。そんなわけで間違いなくスパムで有ると思われるUserAgentを指定し弾いてみます。

　しかし検索して解りましたが、e2.bd.5546.static.theplanet.comっていうのが物凄く多いです。調べてみるとあちらこちらで被害を出している様子。cgiにだけpost攻撃しているのかと思いきや、見つけたアドレス全てにpost攻撃してます。スタイルシートにまでpost攻撃しているので下手な鉄砲数打ちゃ当たる的な攻撃方法ですね・・・・。counter用cgi、カテゴリー用アドレスにまで攻撃しかけてますよ。

Continue reading

　さくらでもCORESERVER.JPでも生ログが見られるのですが、さくらの時はまーったくきにしていませんでした。

　Serene Bachではスパムコメントとスパムトラックバックはプラグインでほぼ完璧に弾けています。しかしプラグインで弾いているのは一度cgiにアクセスし解析されスパムと判定してから破棄されています。したがってsb.cgiにはスパムのアクセスした回数分負荷がかかることになります。そんなわけで生ログ見てみると１秒に１件３時間ほど連続で打ち込んでくれていました。いやいや参った。そんなわけでsb.cgiの名前を変えて、さらにトラックバック用も名前を別途変えることにしました。

Continue reading

別SBからの更新情報取得

　今までもトップページにもうひとつのブログの更新情報を掲載していたのですが、それはRSSをFeed2JS読み込んでリスト表示させていました。でも、よーく考えてみたらと言うか、SB出来た頃から読み込めるんじゃん、別のSereneBachブログから更新履歴を。気がついたのは人のソース覗いてて気がついたんだけど検索かけたら一杯やり方書いてあった。うーん　知らなかったよ〜こういう使い方どこかにマニュアルサイト作って書いておいて欲しいなぁ。MTやWPは意外と多いんだけど、逆に日本語のSBはそう言うの少ないのよね。Forumで堂々巡りするしかないのかねぇ。てか俺の探し方が悪いっぽいな。

　そんなわけでやり方の覚え書きを書くほどでもないけど一応自分でやった事を覚え書き。

1. 元々あるlog/entry.jsを読み込めば良いだけです。
2. うちのもうひとつのブログのlog/entry.jsを読み込むので以下のように表示させたい部分に記述。
   

   <script type="text/javascript" src="http://mac.planting-field.com/log/entry.js"></script>

3. 出来上がり。
   

4. 表示させたいサイトの文字コードと違う場合はそのブログで使っている文字コードをcharsetで指定すると他の文字コードを使ってるサイトでも表示できました。
   たとえば、うちのトップページはMovableTypeでUTF-8で生成させているのでそのままだと文字化けしちゃいます。ちなみにこのブログもMacのブログもeuc-jpで生成させていますのでUTF-8のサイトに表示させる場合は以下のようにしたら表示できました。

   <script type="text/javascript" src="http://mac.planting-field.com/log/entry.js" charset="euc-jp"></script>

   出来上がり！

エントリー分けるほどでもないのでまとめて何やったか続けて記載します。

Continue reading

　せっかく今のテンプレをWordPress用に移植したのに使わないのは勿体ない気もするなぁ。。。今のSBでの環境をそのままWordPressへ的な考えの基テンプレ移植したのだけれども、忘れないようにメモしておこう。あくまで自分用ですが。

Continue reading

＊このエントリーは情報が古くなっております。確認してからご利用下さい。

　まだ移行していませんが、色々WordPressをいじくって遊んでいます。そんななかで一応忘れないようにメモ書きをしておきます。

　まだテスト中ですが、ほとんどcustomizeも終わりいつでも移行可能です、でも迷いますなぁ。

Continue reading

　標準機能なのに使っていませんでしたが、コメント欄用に新たに小さな丸型アイコンを作りましたので使いたい方はコメント投稿時にご利用下さい。

サイズは今まで公開していたアイコンの1/4サイズで33×33pixelです。これでも大きいかもしれませんが、以外と良い感じです。

　久々にテンプレ弄ったので覚え書き。ロリポブログにもトラックバックにサムネイル画像でサムネイルを付けましたが、Serene Bachにしてから変更しました。

　たまたまSereneBach Customize Forumを覗いていたら同じようにこの事を質問されている方がいらっしゃったので、ちょうど私も探していた内容だったのでチャレンジしてみました。

Serene Bachではありがたいことにプラグインが有りますので、それを利用しています。使っているのは凪さんの「comment、trackback タグ拡張プラグイン」です。これを利用することによりSerene Bachの独自タグ{trackback_title}や{comment_name}からURLのみ抽出することが出来るようになります。

　私がやったのはトラックバックされたサイトのサムネイルと、そのサイトに登録されているfaviconとコメント投稿時に入力したサイトのfaviconを自動的に掲載させることです。今までもサムネイルはやっていましたが、faviconもせっかくだからくっつけてみました。　

　まずは、「comment、trackback タグ拡張プラグイン」をインストールし、使えるようにします。すると独自タグ{trackback_entry_url}と{comment_url}が使えますのでそれを利用します。{trackback_title}や{comment_name}からURLだけを抜き出した物です。

　で、thumbnailはSimpleAPI、faviconはFavicon API α版を使わせていただきます。

と、言うわけで実際に挿入するとこんな感じのソースになりました。

Continue reading

　各エントリーの最下部にアイコンが色々くっついたと思いますが、各ソーシャルブックマークとnewsingへの登録リンクを張りました。

　Serene Bachで設置する方法を忘れないように記載しておきます。

　まず、Hatena::Bookmarkとdel.icio.usへのリンク設置はThe blog of H.Fujimotoさんのこちらの記事で配布されているプラグイン「BookmarkLink」を利用させていただきました。独自タグが何個か追加されるので楽ちんちんです。
ソースはこんな感じ

はてな用
<a href="{entry_hatena_bookmark}" target="_blank"><img src="画像のURL" /></a>
del.icio.us用
<a href="{entry_delicious_bookmark}" target="_blank"><img src="画像のURL" /></a>

　追加するのはこれだけでも良かったのですが、せっかくだしついでに何個かつけてしまえと思い、利用頻度が高いかな？と思われるソーシャルBookmarkへのリンクも追加してみました。結構色々有るんですね、この手のサービス。

Continue reading

＊現在当ブログでは下記のエントリーの内容では運営していません。下記はSereneBach用のもので、現在当サイトはwordpressにて運営されています。2008-08-03

　このブログで使ってるシステムSerene Bachには動的でRSSやATOMを出力する機能がついている。前から使ってはいた（アイコンの所とか/右メニュー参照）でも、それは手書きでそのコードを記入していただけでした。たとえばこんな感じ。

<a href="http://blog.planting-field.com/sb.cgi?feed=rss2&cid=28">RSS</a>

　上記は本を買うとついてくるキャストマスターの機能の一つであるRSS2.0用のソースだけれども、RSS1.0、ATOMでも同じように緑の部分をsb.cgi?feed=rssやsb.cgi?feed=atomにすると動的出力される。通常独自タグを使うとRSS1.0とatomは静的出力されたアドレスが書き出されるが、手入力すれば動的に出力可能だ。この動的出力することにより、個別カテゴリーごとにRSS出力が出来る。さらには月別カテゴリーや個別記事だけでもRSS配信が可能になるのだ。
2006年9月分ならこんな感じ。

http://blog.planting-field.com/sb.cgi?feed=rss2&month=200609

　で、今回はカテゴリー別のRSSを自動で出力させたいのでその方法を探していたら標準の独自タグに「カテゴリーID」だけを出力するタグがあった。それを使ってみる。以下のように記述。（ただRSS2.0用）

<!– BEGIN additional_feed –>

<a href="{site_rss2}&cid={category_id}">RSS</a>

<!– END additional_feed –>

　と、こんな感じにカテゴリーIDが出力されれば自動的にそのカテゴリーのRSSだけが出力されます。rss1.0やatomの場合動的生成させる独自タグがないので、上記に書いたようなアドレスの後に&cid={category_id}を入力したら同じように出力されます。

　で、このタグ何処に貼り付けようとしたかと言うと、うちのブログはメインページ、個別ページ、Archive用ページとテンプレートを分けて使っている。使いたかったのはArchiveページ。うちのblogはArchiveの所はタイトルだけが表示される目次ページになっているのです。そこの個別カテゴリーのRSS配信させるのが一番好都合と思ってそこに貼り付けてみた。結果は物の見事にカテゴリーページはカテゴリーごとのRSS配信が可能となった！が！しかし、Archiveページを割り当てているのは月別アーカイブ、日別アーカイブ、検索結果、も同じテンプレ割り当てていた。こうなると表示された一件目の記事が登録されているカテゴリーのRSSが配信されてしまう。がっくり。このカテゴリーIDと月別、日別、検索結果を自動でRSS配信できるようにならないかな？１個の独自タグで・・・。

　仕方がないから先日丸型アイコンと日本代表カテゴリーだけテンプレを分けていたので、その部分にだけカテゴリーアーカイブページにRSS配信をさせてみた。こんな感じ。（現在非適用。）

「カテゴリー：丸型アイコン」以下の階層全てに適用
「サブカテゴリー：サッカー日本代表」に適用。

　月別、日別、検索結果にRSS配信させない様にし、カテゴリーにだけRSS配信させるにはカテゴリーのテンプレートを新たに作り、そこのRSSコード貼り付け、カテゴリーの設定をするところで１個ずつそのカテゴリーにカテゴリー用テンプレートを割り当てていかないといけない。うーん。めんどくさい。このブログはカテゴリーが多いのでそんなめんどくさいことやりたくない。

　そんなわけでこの方法は諦めた。でもせっかくだったので個別エントリーのページに「同一カテゴリー内の最新記事」という部分を新たに設置し、そこに個別カテゴリーのRSSを設置してみた。この記事の下に目を移すと有ります。同一カテゴリーの最新記事はプラグインを利用しています。こちら

そんなわけで、目的としていたような表示形態、頑張れば出来るけどめんどくさいから挫折。自動的に月別アーカイブ、日別アーカイブ、検索結果、カテゴリーのRSS配信切り替える独自タグ作ってくれないかしら？もしくはプラグインでsb.cgi?feed=rss&xxxxx←この赤字の部分を自動化してくれる奴が欲しいね！

　うーん、でも月別アーカイブのRSSなんて誰もいらないか、カテゴリーだよな。必要有るって言えば。やっぱりめんどくさいけどカテゴリー用のテンプレを割り当てていかなきゃいけないのか。

　そう言えばこのSerene Bachはカテゴリーごとにテンプレートを分ける機能がついている。今まで特に使っていなくて、使っているのはメインページ、アーカイブページ、個別ページの３種類だけ。そんなわけでせっかくだからカテゴリーごとに切り替えてみた。全部のカテゴリーに切り替え適用するのはいかがな物かと思うので、ちょっと記事数が多いカテゴリーに限り適用してみました。

　適用したのは以下の２つのカテゴリー、及びその下階層にあるサブカテゴリー、その中の個別ページに適用した。
＊現在非適用
「カテゴリー：丸型アイコン」以下の階層全てに適用
「サブカテゴリー：サッカー日本代表」に適用。

　アイコンページはトップのタイトル画像のみ変更してみた。それとは別にサッカー日本代表関係の記事には全体的な色を変えてみた。せっかくなのでジャパンブルーに変更してみました。基本的レイアウトは全く弄らないで色だけ変更。

　この機能使い分けると結構面白そう。でも、ちょっと全体的にじりたいところが出てきたら変更するテンプレが多くなりすぎるのはめんどくさいので、ちょっとだけにとどめておきます。

　あ、ついでにメインのテンプレも少し変更してみました、

Serene Bachにはモブログ機能が標準搭載されていないので少し前からどうしようかな？なんて考えては居たのですが、オフィシャルガイドに書いてある方法でやってみることにしました。

　オフィシャルガイドに記載されている方法は２種類で、１つめはその利用規約の解釈により以前問題になっていた「moblog.uva.ne.jp: moblog gateway」を使う方法（現在では利用することに問題ないという結果が出ています）と、「サイドバーJP」を使う方法です。私は後者の「サイドバーJP」を利用してみることにしました。理由は以前もうひとつのMacのブログでこちらのサービスを利用していた時期があり、アカウントを持っていたからです。

　そんなわけでひとつ前の記事でさっそくチャレンジしてみました。無事カテゴリーも指定したとおりになってますし、画像の保存先フォルダもブログ側設定で標準に指定したフォルダになっていました。うんうん、意外と簡単に携帯からの投稿ができるようになりました、成功。

　今更かよ！って感じですがつい最近Serene Bachに移行したばっかりですからね。

以下モブログテスト部分

参考までに上記２つ以外のモブログツールとしてはMTmailなんて言う物もあります。

　Serene Bach 2.05RのUpDataが公開されていましたが、先ほどやっとこさここのブログでもアップデートしました。プラグインも忘れずにアップデートしました、

私が行ったアップデート忘れないように記載。

1. lib/を入れ替える。
2. doc/を入れ替える。
3. 標準プラグインを2.05に付属の物と入れ替え
4. キャストマスター・パッチでアップデート
5. スパムフィルター(簡易版) を1.1.3にアップデート

2.05Rにアップデートしたのは以上です。

ついでにごめぷろぐさんで公開されているカラーピッカーも搭載してみました。

　記事に書かれているとおりに編集したところ無事記事編集画面に文字色を変えるカラーピッカーを搭載することに成功しました。この機能は非常にありがたいので利用させていただきます。

色とりどりですね〜

Serene Bachにしてロリポから変わったこと・・・・そうなのよ、アーカイブやカテゴリーにしたときにいままで表示されていた一覧表示がされなくなりました。原因は記事の一覧表示はロリポブログの独自タグの為Serene Bachでは適用されません。

ロリポブログではこの様に記述させていました。

<!– BEGIN entry_list –>

<div class="entry_title"> </div>
<div class="entry_body">
<img src="http://blog.planting-field.com/images/pf_ico.gif" border="0"> Title <a href="{entry_list_permalink}">{entry_list_title}</a> | {entry_list_date} | <br/>
　　Category / {entry_list_category_name}
</div>

<!– END entry_list –>

これでカテゴリー表示やアーカイブ表示が全て記事タイトルのリスト表示になっていました。

これに似たようにするために色々探してみるとどうやらテンプレートの切り替えで行っているらしかったので、その方法で色々試してみました。mainのテンプレを別名で保存しEntry部分の記述を替えます。
カテゴリーページ様にはこんな感じ

<div class="entry">

<div class="entry_title"><img src="http://blog.planting-field.com/images/pf_ico.gif" border="0"> {selected_archive}</div>

<!–サブカテゴリーがある場合表示–>
<!– BEGIN category –>
<div class="entry_body">
{subcategory_list}
</div>
<!– END category –>
<!–サブカテゴリーがある場合表示ここまで–>

<!– BEGIN entry –>

<div class="entry_body"><img src="http://blog.planting-field.com/images/pf_ico.gif" border="0">

{entry_date}　<a href="{entry_permalink}">{entry_title}</a>
</div>

<!– END entry –>

</div>

サブカテゴリーがある場合はサブカテゴリーリストも表示されるように独自タグを色々と並べ替えてみました。

ちゃんとタイトル部分に選んだページのアーカイブネームやSearchワードが出るようにしました。

独自タグの種類や機能についてはヘルプの独自タグ部分をご覧下さい。

別々にテンプレートを保存したら管理メニューでテンプレートの設定画面でテンプレートをアーカイブに割り当てればアーカイブに適用されます。

これにより、今までみたいに各アーカイブ、検索結果、カテゴリーの表示が記事のタイトル一覧になりました。

追記
色々検索したらプラグインでこの様に表示させるのがこちらにあるんでやんの。苦労したのが馬鹿みたい。おほほ

と！言うわけでServerを契約し、DNSの設定も完了したらこのブログのお引っ越しです。

Serene BachとはロリポブログやＪＵＧＥＭと９５％位互換性のあるサーバーインストール型のブログ構築ツールです。同じようにサーバーインストール型のブログ構築ツールと言えばMovable Typeが有名ですが、Serene Bachの方が簡単かもしれないですね。さらにはレンタルブログのロリポブログやＪＵＧＥＭとは違い、カスタマイズは細かいところへ手が届きやすいと言う利点もあります。

　ロリポブログやＪＵＧＥＭと９５％位互換が有るって言うのは、ロリポブログやＪＵＧＥＭで使っている独自ブロック、独自タグがほぼ使えるからです。ロリポブログやＪＵＧＥＭだけでしか使えない物、反対にSerene Bach専用の物もありますが、Serene Bach専用のはほんと細かいところに手が届きありがたいタグが何個か有ります。

　まずはSerene BachをServerにインストールします。

• sb開発研究所　ダウンロードセンターから必要ファイルをダウンロード
  • 正式版(zipアーカイブ)EUC-JP版
  • sb ext

私の場合は上記のようにZIPアーカイブで圧縮されていて、文字コードはEUC-JP版を選びました。理由は今まで使っていたロリポブログがEUC-JPで使っていたのでそのデータをインポートするから余計なリスクを避けるため同じ文字コードとしました。

ダウンロード後はインストールヘルプに従ってそのまんまやれば誰でも簡単にインストールできると思います。パーミッションの変更は忘れずに！

インストールするのはブログを設置したい階層にインストールすること。そのアドレスがブログのURLになります。

無事インストールできたらテンプレートをいじります。今までロリポで使っていた私の自作テンプレ、自作なので問題ないです。（ロリポやＪＵＧＥＭで公開されているものをそのままSerene Bachで使うのは辞めましょう、著作権侵害のおそれがあります。）

Serene Bachの管理画面のテンプレートからデフォルトのテンプレートを選ぶ（それしかないから）で、そのテンプレートを自分の好きな名前に変え別名保存する。別名保存したテンプレを編集する画面で「ベースHTMLテンプレート」と「CSSテンプレート」部分に自分が今まで使っていたテンプレのソースをHTML、CSSそれぞれを丸ごとコピー！で保存する。これで取りあえず表示するとほぼ100％問題なくそのまんまの環境に戻る。でもこれだけだと不具合が出ます。ブログ記事検索とコメント投稿部分です。詳しくは「テンプレートヘルプＪＵＧＥＭとの差異」に記載されていますのでコメントフォームと検索フォームのaction属性に{site_cgi}をくっつけてください。早速自分でつけて修正した結果、無事検索も出来るしコメントも投稿できました。

テンプレートの基本的な修正が終わったので、次は記事のインポートです。ロリポブログで書き出した記事のログ、xmlファイルとなっています。（ＪＵＧＥＭ形式で書き出すことを間違えないように！）このファイルを管理メニューの「データ移行」から読み込みます。

　やってみた・・・・エラー・・・エラー・・・何度やってもエラーとなりました。そう、原因は記事の総数か、書き出したファイルの容量か、おそらく書き出したファイルの容量が引っかかってうまくインポート処理が出来ません。そんなわけでロリポブログで書き出したxmlファイルを分割します。テキストエディタなどで開いて修正するのが手っ取り早いのでその方法で行う。私の場合はMacで作業してますので使ったソフトは「mi」・・・と！思いきやなんか文字コード間違えそうで恐かったから「Dreamweaver MX 2004」を使って４分割しました。ただ４分割じゃだめですよ。

<?xml version="1.0" encoding="utf-8" ?>
<blog>
<entries>

略

</entries></blog>

上記部分は消さないように各ファイルの上下にちゃんと入れておきます。
分割するのは各記事の<entry>〜</entry>ごとに分割しました。

私の場合は４分割で済みましたがもっと記事を書かれている場合はさらに分割しないと入らないかもしれません。おおよそ250kb位ならいけるんじゃないかしら？（定かではない）

４分割したファイルを古い記事の順番でSerene Bachにインポートしていく。記事のid番号が古い方から順に0.1.2.3.4….と自動で設定されるので、解りやすくインポートするにはこれがbetter、無事４分割ファイル全てがインポートできました。ちゃんとコメントやトラックバック部分もカテゴリーも日付も問題なく完璧にインポートできました。

次に、画像です。ロリポブログにアップしていた画像を１個ずつちゃんとバックアップしましょう。そのファイルをロリポブログで画像を入れていたのと同じ階層に同じ名前で画像用フォルダを設置します。そう、ブログがおいてある階層に「images」フォルダを制作します、そのなかにバックアップしていた画像データを丸ごとアップします。この様にすることにより、インポートした記事で表示させていた画像ファイルのパスを１個１個修正する必要は無くなります。ただし、ロリポブログで画像アップロード時にサムネイル化し、縮小させた状態で記事に表示させ画像リンクにし、クリックすると元ファイルの大きさで表示させる様にしていた場合は各記事のリンクや画像を修正する必要があるので注意してください。（サムネイル化した画像もバックアップしておけば問題ないと思います、私はそれを忘れたため結局その部分の記事を１個ずつ修正しました。）

そんなわけでこの様な方法で私のブログお引っ越しが完了しました。

これでブログの引っ越しはほぼ終了、後は細かい点のカスタマイズです。なんか簡単なんだか難しいんだか。

　前々からくっつけようと思っていたメールフォームを設置してみた。ロリポップの奴はCGIのサービスでcandyboxってのが有るんだけど、どうにも使いづらいし、何しろ別ページとしてリンクしなきゃいけないのが嫌で、仕方ないからフリーのCGIを探して見たらCGI設置しなくても使えるのがあるんじゃないの！　ちょっとしたHTMLいじれたら誰にでも付けられる感じのを見つけ出し、設置してみた。右メニューバーのプロフィールの所にテキストで書いてある「メールフォーム」クリックすると出てきます！

レンタルしたのはこれ！フューチャースピリッツ フォームメーラー

　ただ、このサービスほんとCGIを利用させてくれるって言うだけで、何にもソースとか自動で作ってくれて貼り付けなさい！てな過保護なサービスではなく、自分でタグは書け！一応例は出しとくよ。みたいな感じなので、しょーがなくタグ作った。

私のソースはこんな感じ

<form action="http://form3.future-s.com/cgi/form3.cgi" method="post">
<input type="hidden" name="formid" value="0××××××××××0">
<input type="hidden" name="formsubject" value="　1stBlogフォームメール　">
メールアドレス：<br>
<input type="text" name="mail" style="width:150px;"><br>
名前：<br>
<input type="text" name="名前" maxlength="50" style="width:150px;"><br>
件名：<br>
<input type="text" size="10" name="件名" value="" maxlength="150" style="width:150px;"><br>
本文<br>
<textarea name="本文" cols="10" rows="6" style="width:150px;"></textarea>
<input type="submit" value="　送　信　"><input type="reset" value="　リセット　">
<input type="hidden" name="formreq" value="mail">
<input type="hidden" name="formreq" value="名前">
<input type="hidden" name="formreq" value="本文">
<input type="hidden" name="formcheck" value="1">
</form>

　先日の記事で「lightbox導入してみた。」と言うの書きましたが、そのなかで本当はLightboxの新しいVersion２を使いたいのだけれどもrel=”lightbox”を回避する修正方法が解らなかったのでVersion1にしましたって所で終わってましたが、今回Version2でもrel=”lightbox”を入れなくてもLightbox2を起動する方法を公開してくださっている方がいらっしゃったので、早速導入してみました。

参考にしたのはblog@slightlyblueさんで、修正版JavaScriptを公開されています。

修正指示されている部分を修正し、無事導入することが出来ました。さらにVersion2ではグループ化も出来るのですが、その部分もちゃんと残っています。これはありがたいですね。

[デフォルト]
rel=”lightbox” を入れると、Lightboxが起動。単品画像版
rel=”lightbox[001]” 等を複数の画像に対して指定すると同じIDでグループ化がされます。

[変更した後]
画像の拡張子がjpg,gif,png,bmpなら無条件でLightboxが起動
rel=”lightbox[001]” を複数の画像に入れると、デフォルトの時と同じようにグループになる。

と、言うことでこんな感じです。ただ、画像リンク貼り付けたとき

グループ化rel=”lightbox[001]“を指定するとこんな感じ。

Lightbox2の導入の仕方はもうひとつのブログのこちらの記事に書いてあります。

　なんか２つのブログでこの数記事、ずっとブログカスタマイズ書いてるね。ま、FC2とLOLIPOP!ではちょっと違うのもあるので良いとしてくださいな。

　そんな訳で、FC2ブログの方で使い始めたTB部分の画像のサムネイル表示。（それについての記事はこちら）これをロリポップでも使ってみようと思った。

　利用するのはSimpleAPIで、これを利用するとこういう事が出来ます。私のブログの例↓

こんな感じに繋げる。
http://img.simpleapi.net/small/http://blog.planting-field.com/
　　　↓こうなる

　全くFC2で適用した物と同じようにここのロリポブログでもやってみようと思ったところ、ロリポブログにはFC2の様にTBをしたサイトのURLだけを取得する独自タグがないのだ。ロリポブログや同型のJUGEMブログ、さらにはほぼ互換のSerene BachとかのTBした先のURLが書かれているはずの独自タグは{trackback_title}なのですが、この中身は
<a href="(URL)" target="_blank">(トラックバック記事の題名)</a>
なのです。要するに、{trackback_title}に、ブログのURL、トラックバックの題名、リンクタグ全てが１パッケージにまとめられてしまっているのです。これだとFC2のブログで行った方法は使えません、さて、困ったと思い、色々検索したらたどり着きました。stroll::blogさんのブログで「指定したaタグorURLの画像を表示するスクリプトβ」と、言う記事で、このロリポやJUGEMで使われている{trackback_title}からURL部分を抜き出し、SimpleAPIを利用し、サムネイル画像を作る！っていうやつです。これをJavaScriptを使って可能にされていました。

　で、この「指定したaタグorURLの画像を表示するスクリプトβ」に書かれている方法を使わせていただきさっそくチャレンジ！

いつものように<head></head>内にJavaScriptを挿入と指示されていますが、ロリポブログのHTML部分の制限数に引っかからないために外部ファイルとしてServerにJavaScriptを保存し<head></head>内にリンクさせます。

　次にサムネイル画像を表示させたい部分に

2.画像を表示したい場所に以下のスクリプトを追加してください。
（↓はJUGEMでトラックバック元のblogの画像を表示する場合。）

と書かれている部分の下に記載されているJavaScriptを突っ込みます。するとバッチリ！下に記載した写真のようになります。

参考リンク
stroll::blogさんのブログで「指定したaタグorURLの画像を表示するスクリプトβ」
私のFC2ブログ「トラックバックにサムネイル画像装着！」

追記
　現在このサムネイル化するJavaScriptを外部ファイルとしてリンク記述しているのですが、この方法をとっているためWindowsのInternetExplorerではTBのサムネイル画像が表示されません。html内に直接記述すると表示されるのですが、JavaScriptは外部ファイルにしておきたいので対応予定はありません。サムネイルをご覧になりたい方はFirefoxで閲覧してみてください。Macの場合はsafari、Firefox共に見ることが出来ます。

＊現在このblogはロリポブログではありません。Serene Bachを利用しています。しかし、独自タグなどがほとんど同じですので上記に書いた方法でSerene BachでもTBのサムネイル化が出来ます。でも、plug-in「コメント、トラックバックタグ拡張」を利用すれば上記の方法を使うよりも簡単にできますので、そちらでやってください。

紹介記事はこちら：Serene BachでTBとかのthumbnailとFaviconを表示

　またまたカスタマイズで今更な感じはやっぱりあるんですが、サイドメニューの折りたたみを出来るようにカスタマイズしました。

　なんか色々なカスタマイズ調べて導入するのもめんどくさかったので、たまたま持っていたテンプレートからJavaScript移設し、タグ挿入しておしまい。意外に簡単でしたね。FC2で前やったときのJavaScriptとはちょっと違うんですけど、ほとんど一緒です。

　ロリポブログはテンプレ内のhtmlが長くなると最後の方が切れちゃうと言う不具合って言いますか、規制数があるのでJavaScripthは外部ファイルにして行いました。

１，外部ファイルを作り、サーバーに保存する。
これ

２，テンプレートの<head></head>内にリンクを記載する

<script type="text/javascript" src="http://あなたのドメイン/oritatami.js"></script>

３，折りたたみを適用する部分にHTMLを追加して書き込む
私のブログのサイドメニュー構成はこんな感じなので以下のようになる。

<div class="sidefree">
<a href="javascript:void(0);" onClick="showHide(’000′);" title="CLICK OPEN/CLOSE" /><h3 class="linktitle">■メニュータイトル■</h3></a>
<div class="linktext" align="center" id="000" style="display: block;">
</div>
</div>

上記のようにあかい部分が新たに挿入した部分。どの部分のクリックしたら動くようにするのかを考えて<a href="javascript:void(0);" onClick="showHide(’000′);" title="CLICK OPEN/CLOSE" />を挿入する(’000′)の部分はid番号を振る、他に開閉する物とidがかぶらないようにする。このidをクリックしたときにどのぶぶんを開閉させるかを記している部分がid="000" style="display: block;"です。idの部分は同じidになるようにしてください。私の場合は番号を振っていますが、半角英数文字で言葉を入れることも可能です、自分の解りやすい様にし、ほかの開閉部分とidがかぶらないようにしてください。

最初から開いておく場合は
id="000" style="display: block;"
最初から閉じておく場合は
id="000" style="display: none;"
と設定してください。

と、言うことでこのブログのサイドにある緑のメニューバー部分をクリックするとメニューが開閉するようになりました。

　今更感はあるのだが、色々なところで結構前からlightboxを使っている人が多く、興味を持ってたのだが、なかなか導入していなかった。でもこの度なんとなく気が向いたので突っ込んでみることにした。

　まずはlightbox”を導入するとこんな感じに画像が表示される。
←画像をクリックしてみてください。

web2.0風な感じに表示されちょっと格好いいのです。では導入したのを忘れないように記録しておく。

1「Lightbox JS」から必要な構成ファイルをダウンロードする。

* lightbox.js
* lightbox.css
* overlay.png
* loading.gif
* close.gif

２、ダウンロードした構成ファイルのlightbox.jsとlightbox.cssのfileを指定している部分のパスを自分のサーバーにあったようにパスを書き換える。ロリポップブログの場合はブログからアップロードできるファイルの種類はjpg、gif、png、swfに限られているので私の場合は自分のロリポップ内のplanting-field.comドメインサーバー内にファイルをアップしたので、そのlightbox.jsとlightbox.cssの該当部署を絶対パスに書き換える。
３、ダウンロードしたファイルをサーバーにアップする。もちろん自分用に書き換えたファイル
４、テンプレートを書き換える。書き換える場所は

<head></head>内に<link rel="stylesheet" href="http://planting-field.com/blog/light_v01/lightbox2.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://planting-field.com/blog/light_v01/lightbox2.js"></script>

上記のタグは私のブログ用です。ご自身のパスになるようちゃんと記載しましょう。私の場合はjs、css共にファイル名に番号を振っていますのでダウンロードしたファイルとは名前が変わっています。

これで設置は完了です。ノーマルな使い方の場合ですがこれで終わり。

このlightboxを使うにはリンク画像のパスにrel=”lightbox”というのを入れないと起動しません。要するにこんな感じ

<a href="http://■■" target="_blank" rel="lightbox"><img src="http://" border="0"></a>

このrel=”lightbox”が有ることによりスイッチになりlightboxが動くようになります。ただ、長いことブログをやっている場合は昔書いた記事の画像などはいちいち「rel=”lightbox”」を付け加えないと行けないわけです。それはめんどくさい。そんなわけで色々検索すると出てきました。

使ったカスタマイズ方法は小粋空間さんの「Lightbox JS の rel 属性を自動付与する」の中にある「１．rel 属性なしで Lightbox JS を起動する」と言うのを適用することにしてみます。これ以外の方法は「Movable Type」のブログ用ですので私のような普通のブログサービスを使っている場合は使えないと思います。

　で、「１．rel 属性なしで Lightbox JS を起動する」を使うために「lightbox.js」を書き換えます。保存後再アップしたところ一応はrel=”lightbox”を入れていない画像リンクでもlightboxが起動するようになりました。ただ、「１．rel 属性なしで Lightbox JS を起動する」の方法に書いてあるパスだと拡張子「.jpg.gif.png」の小文字と大文字の区別がされてしまい、デジカメの種類によっては自動的に拡張子が大文字のJPG等になっている場合があるのでそれだと起動されません。そんなわけでちょっとコードに追加してみました。

if (anchor.getAttribute(”href”) && anchor.getAttribute(”href”).match(/jpg$|gif$|png$|JPG$|GIF$|PNG$/)){

上記のように拡張子で大文字を追加し、同じようにやったところ無事に全ての画像リンク部分が拡張子の大文字小文字関係なくrel=”lightbox”記述が無くてもlightboxが起動するようになりました。

　本当は最新版のLightbox JS v2.0を最初導入し、いろいろテストをし使えるようになったのですが、今までの記事にrel=”lightbox”を再入力するのが面倒で小粋空間さんの「Lightbox JS の rel 属性を自動付与する」を使ってその手間を省こうと思った場合、最初のバージョンのLightbox JSじゃないと私はやり方が解らなかったのでこっちのバージョンに戻して導入してみました。基本的にはLightbox JS v2.0のほうが格好いいですね。機能もアップしていますから・・・。2.0でも同じ方法使えないかいろいろチャレンジしてみましたが、私にはさっぱり解りませんでした。そんなわけでとりあえず今のような状態で行きたいと思います。

＊もうひとつのブログで使ってるFC2の方にはLightbox v2.0を導入してみました。その記事はこちら

2006.5/29追記
上記でLightbox2でのrel=”lightbox”を入れないで使う方法が解らないって書きましたが、その回避方法が判明したのでこちらの記事で記載しておきます。　と、言うことで現在このブログではLightbox2を使っております。

もう１個のMacBlogのデザイン変更に伴い、このblogのトップheader部分にもサイトリンクメニューバーを追加してみました。

　まぁ、ただの画像ボタンによるリンクですけどね。一応JavaScriptも使っているけどたいした物じゃないですね。

W杯間近って事でBlogタイトル画像をサッカーにしてみた。

うーん、何か変だけど、まぁいっか。他になんか良さそうなのが出来たら変えるかもだけど、サッカー祭り中はこんな感じで行くべ！

　以前の記事で、コメントの投稿時に画像認証システムがついた！って書きましたが、ずっとOFFにしていました、しかし、英字のみのコメントを弾く機能だけでは、未だにちょろちょろと投稿されてくる英字スパムに困っているため、認証制も採っているのですが、やっぱりだめなので画像認証機能をONにします。ご了承下さいませ。

上記のような画面が表示されますので、画像に書かれている数字を入力し、投稿してください。

＊現在はSerene bachを使っているため画像認証は行っておりません。

このblogの右側メニューの下の方にあるShop Link部分なんだけど、今までは

<div style="overflow: auto; height: 200px;"></div>

と言うようなタグで囲って表示部分が縦に伸びないようにしていたのだけれども、実はshop部分のHTMLは物凄く量が多いのである。で、他の部分にhtmlとか書き込んでいたら何故か、このblogのソースの一番下にあたる

</body>
</html>

が消えてしまうって言う現象が起こった。なんだろう？と色々探った結果ソースの空欄部分を削除してHTML全文の長さを短くしたところ更新後も表示されるようになった。・・・どうやらここのロリポップブログにはhtmlの長さに制限があるようだ。あんまり長いと制限オーバー分は勝手に削除されてしまう感じですね。

　しかしこれはまずい。今の状態よりサイドバー部分のコンテンツが増えた場合ソースの下の方が勝手に切られてしまう。そうするとhtmlとしてタグが閉じられない。うーん。

　あ！インラインフレームにすりゃいいんじゃん。って事でそのshopList部分にインラインフレームを使うことにした。こんな感じのタグを挿入した。

<iframe src="http://planting-field.com/shop_link/shoplist.html" width="180px" height="200px"></iframe>

width="180px" height="200pxの部分で横と縦のサイズを指定し
別に作ったshopList部分だけの単独ページを読み込むように変更した。こうすることにより、blog自体のHTML全長が短くできる。もちろん他の部分と文字サイズ等のデザインが異なると見てくれが悪いのでCSSもちゃんと記述した。とりあえずちゃんとなっていますね。

　しっかしインラインフレームなんての久しぶりに使ったな。サイト作り始めた頃に使ってみたくらいだから何年ぶりかしら。ま、せっかくあるタグなんだから使いましょ！

　さい後にカスタマイズは何処をどうやったのかと言うところだ。最初に言っておくのは、ロリポップblogの基礎、無料版であるJUGEM blogのカスタマイズを利用して行う。参考サイトは、ロリポブログのフォーラム掲示板と、JUGEMカスタマイズ講座。このサイトはFC2でカスタマイズするときも利用していたのでかなり便利です。FC2とロリポシステム的には似ているのかな？カスタマイズがかなり楽で良いですね。かゆいところに手が届く感じです。ま、HTMLやCSSを有る程度理解できている必要性はあるんですけどね。全くの初心者さんの場合はカスタマイズする場合、ちょっと基礎を本など見ながらやらないと難しいかもしれないですね。

　では、どこをカスタマイズしたか書いていこう

　まず一個目は左メニュー部分のArchives部分のプルダウンメニュー化である。さすがに１年以上もblogで記事書いているとArchive（何年何月の記事とか）の項目が縦にずらーっと長くなる。そんなわけでプルダウンリスト化して、長さを短くしてみた。詳細や、JavaScriptのコードなどは「JUGEMカスタマイズ講座 　リストのプルダウンメニュー化」を見てください。かなり詳しく書いてあるので結構簡単にできます。今現在はArchive部分にだけ適用させています。やろうと思えばカテゴリー部分にも適用できますが、必要ないので行っていません。ちなみにFC2で運営中の BlogMac&Loversでもプルダウン化は出来ます。JavaScriptのコードは全く違いますけど。。。

　2つめはカレンダー部分、まぁ、これはカスタマイズって言うほどのカスタマイズではなく最初から有る独自タグを挿入してあげることによって最初の普通のカレンダーから横位置のカレンダーに変更してあります。calendar_horizontal　ってのを突っ込んでスタイルシートをいじって終了です。

　３つめはツリー化です。これは一番メジャーなカスタマイズでコメントやトラックバック、新規投稿記事を左メニューで表示しているのですが、それをツリー表示化するものです。階層化って感じでしょうか。これもFC2のblog、Mac&Loversでも応用して利用中です。ツリー化スクリプトは同じようにJUGEMカスタマイズ講座のツリー化スクリプトを参照しています。これは以前にFC2でもやったので簡単でしたね。

　４つめはカテゴリー選択時などに記事が一覧になるようにしました。今まで、といいますか通常はカテゴリーや日付を選択するとそのカテゴリーや日付に書いた記事、もしくは検索ワードに該当した記事が全部縦にずらーっと表示されていましたが、それを目次の様に一覧表示されるようにしています。記事のリスト化ですね。ただ、これは使い勝手が良いのか悪いのか微妙ではあるのですよ。一日一件記事書くかどうかの私の場合、日付をクリックすると表示記事が一件とかだと、もう一度クリックしないと記事が読めないので、二度手間にはなるのです。ただ、いっぱいある記事の中から探している記事を見つけるには良いのです。これについてはしばらくこのままにしておいてどちらが良いのか考えた方が良いですね。この機能はFC2の場合カテゴリーとか日付けとか関係なく全ての記事が閲覧できるようになっちゃってます。ま、あっちもコードをカスタマイズしたらカテゴリー別とかに応用は出来そうですけどね。ロリポブログの場合無条件で全てがリスト化されちゃってます。両方の良いところ取りが出来たらいいのにね。
ちなみに、このコードは

<!– BEGIN entry_list –>
{entry_list_title}
<!– END entry_list –>

こんな感じの独自タグを突っ込んで行います。カスタマイズって言うよりロリポブログの機能の一つですね。詳細はhttp://lolipoblog.jp/?eid=19のカテゴリーアーカイブの独自タグ追加っていうのを参考にしてやりました。

ま、これで一通りカスタマイズは終了しました。結構時間がかかりました。毎日１〜２時間コツコツとやっていたけど疲れた。カスタマイズばっかりで記事更新しなきゃ意味無いのにね。

＊注意
Macintoshでブラウザsafariを使用しカスタマイズ更新を行うとJavaScript関係の¥マークが?マークに変わっちゃってちゃんと更新できないのでMacでsafariを利用されている方はカスタマイズの時はNetscapeやFirefoxなどのモジラ系ブラウザを利用しカスタマイズ更新をしてくださいね。

引っ越しについてだが、カスタマイズを書く前に記事の移行についてを書いておこう。実はこの　ロリポblogにはFC2blogにもあるけどインポート機能が付いている。ま、他のblogで書いた記事をそっちがわで出力して、そのファイルを読み込む形でロリポblogにインポート可能なのだが・・・・元々使っていたTCUPblogにはエクスポート機能（書き出し）が無い。しかし今までの記事を全て捨てるのも勿体ないので手間とは承知で１個ずつ記事を書き直した。TCUPの管理画面で以前の各記事をコピーし、ロリポblogで記事を新規に投稿、そのときに登校時間を任意の物にしたらいいわけだ。もっと楽な方法が有ればいいのだけれど、書き出せないのでは無理な話。画像に関してはいちいちアップロードも面倒なのでTCUPから外部読み込みしちゃってるけど、まぁいいや。コメントに関しては日付を記にしなければ一件ずつ同じように書き込みしたら良さそうだけど全記事移行で気力は尽き果てたのでやりたくない・・・うーんもったいないけど仕方ない。トラックバックについてはどうしようもない感じですな。手がない。

ま、そんなわけで全記事の移行も完了いたしました・

　blogのお引っ越しをしたわけですが、その記録でも書いておこうかと思います。
まず、引っ越しに至った理由はあくまでドメイン取得が最初の目的だったのですが、その課程でサーバーももちろん必要になったので格安RentalServerのナウでヤングなレンタルサーバー！ロリポップ！を借りました。そこにblogサービスがあったので試しに作ってみた。中身見たところ結構カスタマイズが可能な感じのblogだったのと、TCUPblogの容量よりも利用できる容量が多いし、カスタマイズ可能だったので引っ越しを決めたのである。元々TCUPにしたのはカスタマイズとかめんどくさかったし、出来合でいいやって思ってTCUPにしたんだけど、結局出来る限りのカスタマイズやっていたから考えてみたら意味なく最初からカスタマイズいっぱい出来るところにしたら良かったわ。

　まず、最初に今まで使っていた感じのDesignにしたかったのでそれになりそうなテンプレートを探した。候補に挙がったのは何個かあったのだが、どうも結構な数のテンプレートは<table></table>タグを利用しているのですよね。ただ私は<table></table>が嫌いなのよ。うちのサイトトップページとかは<table></table>使っているけど実はあんまり使いたくない。FC2のblogで前使っていたテンプレは<table></table>バンバン使用している奴だったんだけど、それがやっかいでね。ま、元々<table></table>は嫌いだったので<table></table>タグは辞めようと思った。FC2でのblogは今<div></div>でレイアウトしているのを使っているのも、そんなところからなのである。そんなわけで<div></div>主体のテンプレを探した。

　そう、候補になるのは３カラム、<div></div>タグでレイアウトされている物に限定した。すると候補になるテンプレは１個しかなかったので必然的にそれに決定した。そのテンプレはplain3って言うテンプレでこんな感じのものだ。ソースを見ると解るけど<div></div>タグで組まれているのでカスタマイズもやりやすい。そんなわけでこいつにした。

　早速カスタマイズ！まずは、CSSをいじる。blogの横幅を今までのと同じ980pxに拡張し、文字サイズ。色指定、サイドメニュー部分の装飾設定、文字間、行間、など装飾部分をいじった。次に、HTMLをいじってレイアウトの微調整。サイドメニューの入れ替えや記事部分のTitleの位置、トラックバック、コメントの位置、等など。この時点で有る程度のレイアウトをTCUPblogに近づける点では終了した。

その後のカスタマイズはまた次の記事で。。。。

本日よりこちらのブログへ移転します。
以前と同じデザインにしてみました。ふぅ苦労したぁ。
全く同じにはならなかったけど、限りなく近づいたと思います。
tcupのブログよりはHTML、CSS共に自由度が高いので何とかなりました。

この記事より前の記事は以前利用していた