Rif.3rd

戸惑いと感謝と反省

二作目脱出ゲーム制作中です。
今度は中に家の鍵を置いたまま車のドアを閉めてしまった、これまた「PAPA」。
どうにかして車を開けて鍵を取って家に入ろうっていう感じです。（←私がよくやるやつ？）
実は3Dソフトにハマってしまって、あれこれ遊んでいるうちに私の理想の5LDK(ビクトリアンハウス・地下１階地上２階)ができまして、その画像を利用してFlashでゲームにしようとしている訳なのですが、画像を揃えるのは楽しいけど、Flashが面倒かも。ってか全然わかんない。
まぁ、できあがったらアップします。麻生さんの定額給付とどっちが先か競争だわ。
そういう訳で5LDKのガレージからのスタートとなります。前回の続きではありません。5LDKシリーズの始まりとなります。

前回、脱出ゲーム（試作）をはじめてアップしたのですが、私はまだまだ知らない世界が多いのだと思い知らされました。

3か月ぶりに更新ってことで夜中0時過ぎにゲームをアップして、あ、そうだWoopraもしばらく見てないなと思って開いてみたら、外国からのアクセスがドドーンと、今まで見たことのない勢いで世界地図が光りだして、Liveとか言ったって、いつも自分だけしか来てないジャン状態だったので、「こりゃ、本当にLiveだわ。」って実感できました。次から次といろんな国からアクセスしてくる。
向こうは夜中じゃないのね。

でもその異常な数の多さにビビリ、なんか私いけないことでもしたのかしら状態に陥りました。
無料Woopraは10000アクセスまでなんですが、翌日開くとそれを超えたらしく、停止してました。

翌々日仕事から帰ってから確認すると、また10000の数字だけ残して何も見れない状態でした。
それが続いてます。

cgiがどうのこうのエラーでこのWordpressのダッシュボードにも入ることができませんでした。

心配していたスパムは今のところ大丈夫みたいでひと安心。スパムとみなされるコメントも一件だけでした。

なんか、ゲーム好きな人って多いんですね。
なんだか申し訳ない気持ちです。
Flashの勉強をしようかと見よう見まねで作ったゲームにそんなにたくさんの方が訪問していただいたなんて。

多くのアクセスありがとうございました。
タグ: woopra, game

Rif.escape#1 PAPA

脱出ゲーム

脱出ゲームもどきを作りました。
暇つぶしにお使いください。比較的簡単だと思います。
処女作なので優しい目で見守ってください

Rif.escape#1 “PAPA”

パパが主人公です。
ある日曜日、久しぶりに昼まで寝ていたパパは
ママからの電話で起こされました。
「いつまで寝ているの。
今日は子供の誕生日なんだから、用意したプレゼント持って、
予約したレストランへ早く来てね。」

いっけねっぇー！
すっかり忘れてた！
早くプレゼントを持って子どもの所へ行こう！

で、プレゼントって何だっけ？
どこにあるんだ？？？？

音が出ます。音量にご注意ください。

ゲットしたアイテムは左にアイコン表示されるので選択してから about items ボタンをクリックすると拡大表示されます。

ゲットしたアイテムを拡大表示してから、違うアイテムを選択して拡大表示画面をクリックすると何かが起こることもあります。

拡大表示画面上をクリックすると違う説明を読めることもあります。

バグや不都合はコメント欄にお願いします。
直せる自信無いけどがんばってみます。

追記
2008-11-09　少しゲーム画像と文字を大きくしました。

タグ: game, FLASH

Flashback

たぶん、更新するのは3か月ぶりぐらい？
更新しなくちゃと思ったり、他の事が忙しかったり、実は暇だったり、らじばんだり?

先週、脱出ゲームというものをやってみて、ことごとく脱出できなかったので、
自分で作ってみようと思いました。

Flashの世界をちょこっと覗いて、後悔しました。あはは。

一応脱出ゲームもどきを作りましたので、次回公開したいと思います。（←今公開したいけど、あまりにも久しぶり過ぎてアップの仕方がわからない　汗）

一応ストーリーとしては、休みの日にゆっくり寝ていると、奥さまに｢子供のバースデーのプレゼントを持ってすぐにバースディ会場へ来なさい！｣と怒られ、急いで任務を遂行したいが、プレゼントが何なのかも、どこにあるのかもわからない「俺」のゲームです。あはは。
Flashも3Dも全くど素人なので出来上がりはよくありません。キッパリ。（←はじめに言い訳をしておく。）
でも、楽しいからもっと作ってみたくなりました。
ゲームとか3Dとか、妄想の世界ですね。自分の好きな世界を作れるみたいな。
妄想は自信あるけど、技術がね。

と、Flashを片手に長い未更新をごまかすことをFlashbackといいます。（ぇ）

タグ: info, FLASH

Woopra

レンタルサーバーを変えて、以前使用していたアクセス解析が使えなくなったので、色々探して出会ったのがWoopra - Website Tracking and Analyticsでした。
Wordpressの場合、プラグインのWordPress.com Statsが使えるならそれが一番いいと思っています。が、それが使えない私のような特異体質の人（？）で、複数サイトを持っていたりするなら、あえてプラグインでは無く、デスクトップで動作の軽いものもいいと思います。
Woopraは、GoogleAnalyticsと並ぶ多機能ですが、加えてリアルタイムでなおかつ画面が美しい。←ここ重要。テストに出ます（？）
β版で無料ということで、英語ですが、こちらに詳しく設置方法など書かれています。
私の場合はサイトが認証されるまで一か月程かかりましたが、実際デスクトップでWoopraを見たらホント感動ものです。設置後一週間程経ちますが、大満足です。
Wordpressのブログにコードの貼り付けには、一応プラグインもあります。
via: Woopra » Download Woopra(下の方)

まぁ、アクセスを解析する前に、更新しろよ！って感じですが。あはは。

ちょっと出張が多くて自宅のパソコンじゃないので、あと一週間ぐらいは、テーマ系いじれません。
あと、思ってたよりWordpressの記事よりDesk Topの記事に訪問してくれる方が多いようですが誠に恐縮です。
以前は結構デスクトップいじっていましたが、CS2を入れたあたりから容量が心配で全くいじることができなくなりました。
そろそろCS3にバージョンアップするので、デスクトップカスタマイズは今後不可能だと思います。ごめんなさい。

タグ: woopra, stats, PLUGIN

WP Google Custom Search Box and Results Page

Wordpress テーマのデフォルトサーチボックスと検索結果ページをGoogle Custom Searchに変える場合

Google Custom Search Engine - Site search and more
Create a Custom Search Engine ボタンをクリック

Basic information

サーチエンジン名:
サーチエンジン説明:
キーワード:
言語設定: 日本

What do you want to search?

Only sites I select.　にチェック

Select some sites

Sites to search:　Your domain.com/*

Select an edition

Standard edition - Free, ads are required on results pages. にチェック
I have read and agree to the 利用規約. にチェック
Next ボタンをクリック

Congratulations!

Send confirmation email to Your Email add
Finish ボタンをクリック

Search engines I’ve created

control panel リンクをクリック

Control panel: Your Search Engine

Code をクリック

Search results hosting options

Host results on your website: にチェック
iframe – requires two pages: one for the search box and another for the results にチェック

Specify search results details

http://Your dmain.com/index.php?

Search box code: yourblog/wp-content/themes/yourtemplate/searchform.phpのsearch formのコードをSearch box codeに以下の２行を足して書き換える

<input type="hidden" name="s" value="Search" />
<input type="hidden" name="submit" value="" />

<form action="http://Your dmain.com/index.php?" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="002196912597702158287:j0tw3idxz5o" />
    <input type="hidden" name="cof" value="FORID:11" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="検索" />
    <input type="hidden" name="s" value="Search" />
    <input type="hidden" name="submit" value="" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=ja"></script>

Search results code

Search results code: yourblog/wp-content/themes/yourtemplate/search.phpを書き換える

<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 600;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

検索結果ページを新規作成する場合

新規に検索結果ページを作り、パーマリンクをコピーする
Specify search results detailsで指定するURLに貼り付ける
Search box codeをそのサーチボックスを表示したい場所へそのままコピペする
Search results codeを新規作成した検索結果ページにコピペする

DEMO: Rif.jQ

右サイドバー上部に通常のサーチボックス、下部にGoogle Custom Search boxをとりあえず置いています。

タグ: google custom search, search

WP PhotoStack+csscolor theme

DOWNLOAD: MONOTONE

Photologというとbackgroundが黒か白一色っていうのが常でしたが、このテーマは何がすごいかって、写真の色に合わせて背景色を自動で変えてくれちゃいます。

Thumb.php and .htaccess Installation:

1) 同梱されている htaccess.txt と thumb.php のふたつはテーマディレクトリではなく、 site’s root folder (xmlrpc.php があるところ)にアップロードします。
2) htaccess.txt を .htaccess にリネームします。
3) 同じく　root folderにcacheを作ります。(777)

thumb.php

thumb.phpでPhotoStackを利用していて、投稿記事でアップロードした画像をギャラリーにしてくれます。

csscolor.php

csscolor.phpは、CSS Colors: Take Control Using PHPで、BarelyFitz DesignsのSoftware Projectsです。これで写真の色に合わせた背景色を自動で設定してくれています。

archive.php

archive.phpも用意されていて、パーマリンクで月別を選んでアーカイブページのテンプレートを指定するとサムネイル表示されます。

どれもそれぞれ設置すると面倒ですが、このテーマを設置すれば素敵なPhotoLogが簡単に作れちゃいます。
時間を見て私も完全に移行する予定です。

DEMO: Rif.Photos

タグ: THEME, photolog

WP Facebox plugin

現在使用しているテーマRif.Magazineでは、llightbox表示を画像だけでなく、HTMLやIflame等の表示もしたいので、表示がかわいらしいjQueryベースのFaceboxを使用しました。Wordpressのプラグインで簡単に設置できます。
（当サイトRif.3rdではThickBoxを使用しています。）

via: Facebox 1.2
Wordpress plugin: WordPress › WP Facebox « WordPress Plugins

テキストリンクから画像表示、サムネイル画像からフルサイズイメージ、テキストリンクからDIV表示、テキストリンクからhtml fileをAjax表示、Iflameの表示例と使用コードを載せました。
Wordpress pluginは有効化するだけで、aタグの画像に rel=”facebox” が自動で付けられます。

DEMO: Facebox : Rif.jQ

タグ: PLUGIN, jQuery, Rif magazine, Facebox

theme 着替えました

jQueryを使用したマガジンタイプのテーマに着替えました。
後日Rif.jQの仕様で配布予定です。

タグ: THEME, Rif magazine, jQuery

WP カスタマイズ小技1

サイドバーの最近の投稿にサムネイル画像も表示する方法

必要なもの

カスタムフィールド
Recent posts plugin
Post-Plugin Library(Recent posts pluginを使用するのに必要です )

方法

カスタムフィールド

注意

毎回記事ごとに表示する画像とカスムフィールドの記入が必要になります。
画像のアップロードが行えていて、Recent posts plugin が使える環境であることが前提です。

プラグインのオプション設定

Post-Plugin Library をアップロードしてからRecent posts plugin を有効化します。
General Settingsで表示数やページを含めるかなどを好みで設定します。
Output Settings

Output template:

<li>{link}<br />
<a href="{url}"><img src="{custom:thumb}" alt="{custom:thumb-alt}" /></a><br />
<span class="small">{date} - {categorylinks}</span></li>

Text and codes before the list:

<ul>

Text and codes after the list:

</ul>

サイドバーテンプレート

<?php if (function_exists('recent_posts')) { ?>
	<div class="side-posts memo">
    	        <div class="topmemo"></div>
		<h2 id="toc-7"><?php _e('Recent Posts'); ?></h2>
    	        <?php recent_posts(); ?>
                <div class="bottommemo"></div>
       </div>
<?php } ?>

CSS: 画像もあるので、ダウンロードして確認してください。
Demo: Rif.create

画像の用意

投稿記事に使用した画像のサムネイルを使用する場合は、既に画像をアップロードしているので、その画像のサムネイルを使います。
記事に全く画像を使用していない場合は、新たに画像をアップロードするか、過去にアップロードした画像をギャラリーから選びます。
前もって、そんな時の為の画像や、カテゴリ別の画像を用意して分かりやすい名前でアップロードしておくと後が楽です。
一度アップロードした画像は
管理画面>設定>その他の設定>画像サイズ
にて指定したサイズで自動でサムネイルが作られています。
例えば管理画面でサムネイル画像サイズを100×100に設定すると
http://mysite.com/wp-content/uploads/2008/07/thumbnails.png
とアップロードした大きな画像は、自動的に
http://mysite.com/wp-content/uploads/2008/07/thumbnails-100×100.png
というサムネイル画像が作られるという訳です。よって、一度アップロードした大きな画像のサムネイルを使いたい時は、-100×100 を付加したファイル名を使用します。(もちろんいったんサムネイル画像を記事に挿入してそのファイル名をコピーしても同じことです。)

カスタムフィールドの記入

投稿作成時に下にあるカスタムフィールドを記入します。
キーの入力
後でカスタムフィールドに入力したサムネイル画像を呼び出す時に必要になりますので、それがサムネイル画像だと分かる名前を入力します。ここでは"Thumbnail" にしました。大文字と小文字は区別されるので、自分がCSSのクラス名と区別できるように大文字を利用しました。
以後、記事を投稿する度にこのカスタムフィールドのキーを使います。
値の記入
ここでは先ほどアップロードしたファイル
http://mysite.com/wp-content/uploads/2008/07/thumbnails.png
のサムネイル画像を使用するので
http://mysite.com/wp-content/uploads/2008/07/thumbnails-100×100.png
と入力します。

※上記はWP Free Theme Rif.createでの利用例です。

タグ: THEME, tips, Rif.create

WP Free Theme Rif.create

WordpressのVintage風テーマを作りました。
今まで「自分」の為に、何度かテーマを作りましたが、もっと勉強していきたいので、無料配布することにより、不備な点、もっといいやり方などありましたら教えていただけたらと思います。
尚、今回のテーマは背景画像を中心にしたもので、更なるカスタマイズには不向きです。
カスタマイズしやすいテーマもそのうちアップする予定です。
現在使用しているテーマも、時間が許せば整理してアップしたいと思っています。

プレビュー

Demo

Rif.creat

動作確認

WordPress 2.6-beta1

使用プラグイン

使用Ajax framework

Adobe Labs - Spry framework for Ajax

SpryTabbedPanels.js (タブ　)
SpryCollapsiblePanel.js (閉会式パネル)

カスタマイズ

トップページ(hoe.php)

上部に最新記事ひとつ、その下にタブでカテゴリ別の最新記事4件、カスタムフィールドを利用したサムネイルと共に表示しています。
カテゴリIDの入力が必要です。
デフォルトでは表示カテゴリ数は3つですが、コードの追加で数の増減はできます。
数があまり多い場合はタブ自体のサイズ変更が必要です。
最初に開いておくカテゴリを指定できます。
トップページは、設定でページを選ばなくても、home.phpを作るとindex.phpより優先されます。

トップページと他のページではサイドバーを変えています。
デフォルトではトップページでカテゴリ別の最新投稿表示をしているのでサイドバーの最近の投稿は非表示にしています。
カスタムフィールドを利用して記事のサムネイル表示をしています。
Recent Comments, Recent Postsプラグインのオプション設定が必要になります。
about meボタンをクリックするとボックスが開閉します。aboutme.phpに記入した内容が表示されます。デフォルトではAboutページへリンクを貼っています。
サイドバー(sidebar.php)を呼び込むテンプレートタグは

<?php get_sidebar(); ?>

ですが、sidebar-2.phpを呼び込む時は

<?php get_sidebar(2); ?>

と、複数サイドバーを操作することが楽になりました。

ヘッダーのブログタイトルの右に、メモ風にページメニューを表示しています。

ボトムバー(footer.php)

フッターにボトムバーを表示しました。

Other

その他、カスタムフィールド、プラグインのオプション設定方法をご覧ください。（関連記事は“Rif.create” タグページに随時アップしていきます。）
このテーマに限らず、Wordpress テーマのカスタマイズに応用できると思います。

ダウンロード

Wordpress theme Rif.create
（Mediafire.comからのダウンロードになります。）

licenses

タグ: THEME, Rif.create

Rif.3rd

戸惑いと感謝と反省

関連する投稿

Rif.escape#1 PAPA

脱出ゲーム

Rif.escape#1 “PAPA”

関連する投稿

Flashback

関連する投稿

Woopra

関連する投稿

WP Google Custom Search Box and Results Page

Wordpress テーマのデフォルトサーチボックスと検索結果ページをGoogle Custom Searchに変える場合

Basic information

What do you want to search?

Select some sites

Select an edition

Congratulations!

Search engines I’ve created

Control panel: Your Search Engine

Search results hosting options

Specify search results details

Search box code

Search results code

検索結果ページを新規作成する場合

関連する投稿

WP PhotoStack+csscolor theme

Thumb.php and .htaccess Installation:

thumb.php

csscolor.php

archive.php

関連する投稿

WP Facebox plugin

関連する投稿

theme 着替えました

関連する投稿

WP カスタマイズ小技1

サイドバーの最近の投稿にサムネイル画像も表示する方法

必要なもの

方法

カスタムフィールド

注意

プラグインのオプション設定

サイドバーテンプレート

画像の用意

カスタムフィールドの記入

関連する投稿

WP Free Theme Rif.create

プレビュー

Demo

動作確認

使用プラグイン

使用Ajax framework

カスタマイズ

トップページ(hoe.php)

サイドバー(sidebar.php and sidebar-2.php)

ボトムバー(footer.php)

Other

ダウンロード

licenses

関連する投稿