Geeklog Hack

フリーで使えるRSSフィードアイコン

Wed, 02 Apr 2008 19:25:45 +0900

４種のRSSアイコンパックです。数は少ないのですが、カワイイアイコンで他のデザインと競合することもなく使えそうなので取り上げてみました。かなり大きいサイズの画像まで用意されているので解像度で困ることはなさそうです。商業利用も可能なようですヨ。

dfFlexiGrid - いろんなレイアウトにできるJavascript

Wed, 02 Apr 2008 18:56:00 +0900

このdfFlexiGridはブラウザ上から横幅を変えたりサイドブロックそのものを非表示にしたり色々できちゃうスグレモノスクリプトです。使い方も基本的に<body>タグに埋め込むだけという恐ろしく簡単に設置出来るところもよいですね。
リンク先にはデモも設置してあるので、ぜひ一度試してみてください。ページの上にあるグレーのメニューで色々と試すことが出来ます。
CMSとあわせて使うにはクラス名などの変更が必要なのかどうか、やってみないとわかりませんがいずれにしても簡単に対応できそうな気がしますのでチャレンジしてみてはいかがですか？

フリーで使えるジーンズ画像

Sun, 23 Mar 2008 21:43:49 +0900

ほとんど毎日履くぐらいお気に入りだというJayhanさんが個人的にいくつかジーンズのテクスチャをスキャンして取り込んでフリーで公開してくれています。結構大きな解像度でアップしてくれているのでページの背景にも使えそうですヨ。下半分ぐらいはかなり多きな画像が用意されているようですが、ダウンロードには登録が必要なようです。

CSSで使えるヒントやトリック・ハックエッセンス

Sun, 23 Mar 2008 21:23:06 +0900

CSSを使う上でのテクニックやハックをわかりやすく解説しているサイトをまとめて紹介してあります。時々こういうテクニックを紹介しているサイトを見かけることはあってもその時見て終わってしまうのでこうやってまとめてくれているのはうれしいですね。

アルファチャネルPNGの表示

Tue, 11 Mar 2008 13:43:50 +0900

以前Geeklog実験室のIEでアルファチャネル透過PNGを正常に表示させる・・・その後のエントリーでアルファチャネルPNG画像を表示させる方法を紹介しましたが、もう一度おさらいです。

IE6以下で透過PNGを正しく表示させるスクリプトはいくつかありますが（IE7.jsやjQuery・iepngfixなど）Geeklogではこちらのpngfix.jsが採用されています。
IE7.jsはちょっと特別で、まだベータ版ですがPNG以外の部分についてもIE7のように振る舞わせてくれるスクリプトです（こちらについてはまた改めて・・・）が、それ以外はページを辿ってみると、どれも似たり寄ったりの名前なのでごっちゃになりそうですがpngfix.jsが採用されているのは特別IDやClassを記述することなく使えるからなんだと思います。

最近はカメレオン(テーマ)に元から含まれていて知らず知らずのうちに使っているかもしれません。カメレオンを使っていて画像が間延びするなどおかしな動作をする場合はpngfix.js中のscaleをimageかcropに変更しましょう。

また、問題点としてprototype.jsを使っている場合に競合することがあるようなのでその場合は読み込みを</body>の直前に入れると解決できるようです。

記事の画像URLでスラッシュが重複する

Mon, 10 Mar 2008 23:20:34 +0900

最近geeklogに組み込まれたアドバンスドエディタ(FCKeditor 2.5)で画像を挿入した場合に、そのURLが

http://ドメイン名/images/library//Image/ファイル名

となってしまう問題があります。これは組み込まれているFCKeditorのバージョンが上がったときに仕様が変わっているためで簡単に修正することができます。
この問題を修正するにはconfig.php中にある

$_CONF_FCK['imagelibrary'] = '/images/library/';

の最後にあるスラッシュ「/」を消せば直ります。

既に投稿された記事については修正されませんので記事に画像を貼り付けている場合は記事を編集し直す必要があります。

そのほかのアドバンスドエディタの話題はこちら

記事の文字色が変更できないなど

Mon, 10 Mar 2008 22:42:57 +0900

以前geeklog.jpの掲示板に書いた内容ですが備忘録としてこちらにも転載しておきます。

問題点：Root権限では文字色の変更ができるがStoryAdmin権限ではできない
解決方法は続きをどうぞ
解決策：lib-common.phpをハックする
lib-common.php(2798行目)

    if( isset( $_CONF['skip_html_filter_for_root'] ) &&             ( $_CONF['skip_html_filter_for_root'] == 1 ) &&            SEC_inGroup( 'Root' ))    {        return $str;    }

という内容を

    if( isset( $_CONF['skip_html_filter_for_root'] ) &&        $_CONF['skip_html_filter_for_root'] == 1 )    {      if( SEC_inGroup( 'Root' ) || SEC_inGroup( 'Story Admin' ) ) {        return $str;                           }    }

に変更します。こうすることで記事の投稿に関してはStoryAdmin権限もRootと同じ権限になるので変更が可能になります。

そのほかのアドバンスドエディタの話題はこちら

アドバンスドエディタでの注意点

Mon, 10 Mar 2008 21:02:00 +0900

アドバンスドエディタ(Ver2.5)を使ってエントリーを書いてる最中に発見したのですが、エントリー中にハイパーリンクを作る場合のTitle属性に「テキスト」という文字列を入れると「テ」以降の文章が保存されなくなる現象に出くわしました。

おそらく日本語の「テキスト」の文字コードが他のものに誤認されて誤動作を招いているんだと思いますが、このエントリーを書いている時点では解決策がありません。文章だけでなくタグもまとめて保存されないのでエントリーのなかで<div>などを使っているとレイアウトさえ崩れてしまいます。これはちょっと酷いですね・・・

なにより書きためたものが全部パーになってしまったのがショックでしたのでハイパーリンクを作成する場合はご注意を！

そのほかのアドバンスドエディタの話題はこちら

Geeklogサイトを移転するためのTips

Sun, 09 Mar 2008 22:08:00 +0900

サイトの移転はそうしょっちゅうあるわけではないのですが、表示速度の関係や容量・ユーザーアクセシビリティ改善（独自ドメイン取得など）で設定をやり直さないといけない場合が時々出てきます。今回はそのあたりについて取り上げてみたいと思います。方法や順序はかなり適当ですが大まかな流れだけ追ってみることにします。細かい部分についてはレンタルサーバーなどによって違ってくると思いますので、ざっと流れだけの解説に留めます。

１．サイトの状態を休止状態にする
config.phpの$_CONF['site_enabled']をfalseに変更しサイト全体を一時的に休止状態にします。

２．geeklog関連のファイルをバックアップし移転先のサーバーに移築する
データベースの移動も同時に行ってください。phpMyAdminが使える場合はそちらからするのがおすすめです。

３．設定ファイルの変更を行う１
config.php,lib-common.phpの変更をする。まずは設定変更の第一段階ですこれはテキストエディタで直接変更してください。

４．設定ファイルの変更を行う２（よく忘れる）

コンフィグレーションプラグイン

システム設定タブ＞RSSファイルの場所

ファイルマネジメントプラグイン

設定タブ＞ディレクトリの設定６か所

メディアギャラリ

システム設定＞グラフィックパッケージタブ＞各実行ファイルのパスやディレクトリのパスの設定

などのディレクトリのパス関係の変更が必要です。

５．静的ページやブロック、テーマのテンプレートなどに埋め込んだURL情報やファイル・ディレクトリパスを移転先の構成に合わせて変更する
phpMyAdminやデータベースのバックアップファイルなどであらかじめ検索をかけて変更ポイントをチェックしておくと作業がスムーズになるかもしれません。WindowsからだとDevasというツールが複数ファイルを一括検索・一括置換できるのでオススメです。ファイルを直接編集する場合はバックアップを必ず取っておきましょう。また、移転後しばらくの安定動作の確認が取れるまではバックアップのファイルを保存しておきましょう。

６．httpdなどの設定ファイルを変更または追加する（必要ならば）
自宅サーバーなどでバーチャルドメインなどに設定していてそちらに移転するなどの作業をする場合は、こちらの設定変更も忘れずにしておきましょう。

７． config.phpの$_CONF['site_enabled']をtrueに戻しサイトの運営を開始する

以上がだいたいの流れです。ところが欲が出るもので移転に伴ってパッケージの内容も更新したいのが人情です。
その場合は２のファイルを移築する時に、まず新しいパッケージでプラグインなども移転元のサイト通りに構成を合わせて構築します。このときに不要なプラグインがある場合は移転元でプラグインを無効にしておいてから作業します。そして一度新しいパッケージでインストールしておいてからデータベースを移転元から移転先へ書き出します。かなり邪道なやり方だと思いますが私はこの方法でやっています。この場合メディアギャラリで失敗することが多いのでその場合は移転元で無効にしてから作業しましょう。当然メディアギャラリは移転出来なくなりますが。

もし他にこういうところを注意したほうがいい、このやり方は間違っているなどの情報がありましたら教えて下さい。

ウェブデザイナーのためのスーパーリンク集

Sun, 09 Mar 2008 20:19:09 +0900

For Webdesigners - 578 helpful links for webdesigners

トップページにどばっとまとめられたWebデザイナー向けのスーパーリンク集です。小さいとは言えませんが１ページにこれだけの役に立つサイトがギュッと濃縮されているところは見たことありません。リンク先を１つずつ見ていくだけでも相当時間がかかりますが、モノにできればすごく役立つリンク集です。このページだけリンクしておけばWeb制作には困らないかもというほど良質なサイトばかりがまとめ上げられています。
これはすごい！

フリーのすばらしいアイコン35セット

Sun, 09 Mar 2008 16:10:46 +0900

35 (Really) Incredible Free Icon Sets

どれもすばらしいアイコンばかりです。このような素敵なアイコンをフリーで提供してくれるデザイナーさんには頭が下がるばかりです。いくつかアイコンを紹介してきましたがこちらも備忘録として置いておきます。商用での利用はできないようですのでご注意を。

フリーのブログヘッダ

Sun, 09 Mar 2008 16:00:17 +0900

Blog Headers For Free Download

ブログのヘッダに使えるフリーの画像の紹介記事です。リンク先のサイトから他の画像も見ることができたりもするので、要チェックです。どれも日本ぽくなくてクールなものばかりです。「奈」はちょっと意味不明ですが＾＾；；

黄金比や白銀比でページを作成する

Sun, 09 Mar 2008 14:59:17 +0900

ずいぶん前にサイトを作る時に黄金比を使ってサイト構築しようと考えていたことがあるのですが、サイトのデザインと合わないのと計算が面倒でやめてしまった覚えがあります。
著名な絵画などにもこの比率が使われていて、もっとも美しい比率と言われています。思い立った当時はこれを知って、ぜひこれを取り入れてみたいと思っていたのですがHTMLにも四苦八苦していたのでそれどころじゃなかったのも結局やめてしまった一因でした。
黄金比についてのウンチクは相当長くなるので興味のある方はこちらのサイトやこちらのサイトをご覧になってください。

電脳狂想曲 Webデザインの小技
実際の黄金比や白銀比についての計算をしてくれるページです。自分で計算をする必要がないだけでなくいろいろな組み合わせも出来るようになっていて、すごく便利そうです。計算ページへはレイアウトの小技というところからジャンプできます。

白銀比については日本絵画などに使われているのは知っていましたが、黄金比を角度に分割した黄金角というのもあるのですねぇ、今回いろいろ調べてみて初めて知りました。いろいろと応用も効きそうなので次回からサイトを作るときには積極的に取り入れてみたいですね～

サイトの紹介：CSS MENU MAKER

Sun, 09 Mar 2008 14:34:20 +0900

CSS Menu Generator

CSSメニューをWeb上でコードまで作成してくれるサイト。
数は少ないのですがいくつかの入力を済ませれば簡単にメニューが作れてしまうページです。Geeklogの場合はテーマごとに最初からメニューが用意されていますが、デザインを変えたい場合にもコードを参考にすることができますね。

最近人気のjQuery

Sun, 09 Mar 2008 13:46:32 +0900

jQueryとはJavascriptを使ってページに動きを持たせたりするためのスクリプトです。
このページを始めるまではJavascriptやAjaxはあまり興味のなかった分野だったのですが、ホームページのネタという意味でいろいろ調べているうちに「これはすばらしくいいものだ」というのがだんだんわかってきたので書き殴ります。
元々Javascriptというものに「Webページ内でアプリケーションを実行するだけのもの」という認識でしかなかったのですが、近頃はそれをWebデザインをカッコよくするためにも使われていて目を奪われるようなサイトもしばしばです。ですが、なかなか敷居が高くてちょっとなぁと手が出せずにいるような現状でした。
ところがこのjQueryは調べてみるとほんの少しコードを追加するだけで動作させることが出来るようなことが書いてあるじゃないですか！というわけでこれから少しずつ勉強がてら紹介もしていきます。

jQuery公式サイト
jQueryの本家サイトです。ダウンロードはここから。

jQueryの魔法(All About)
いかにjQueryが簡単かというところからわかりやすく解説してくれています。ここを見ていかに簡単か思い知らされました。

jQuery 1.2 ドキュメント日本語訳
このエントリーを書いている時点では1.2.3が最新版ですが1.2のドキュメントです。そう変わってはいないはずなので困ったときはこちらも参考に。

jQuery Tutorials for Designers(WebDesignerWall)
英語になりますがデザイナーさん向けのチュートリアルです。ほとんどがソースで図解されているので英語が読めなくてもかなり読めると思います。デモあり。

サイトの紹介：Dynamic Drive CSS Library

Sun, 09 Mar 2008 03:06:20 +0900

Dynamic Drive CSS Library

1つ前のDynamic DriveにあるCSS Libraryです。わかりにくいといけないのでこちらも個別で紹介しておきます。CSSを使ったメニューやレイアウトなどが豊富に紹介されています。こちらも非常に使えるものが多いので忘れないようにブックマークしておきたいですね。

サイトの紹介：Dynamic Drive

Sun, 09 Mar 2008 02:51:03 +0900

Dynamic Drive DHTML(dynamic html) & JavaScript code library

DHTMLとJavascriptをたくさん紹介しているサイトです。最初に目に入ってくるのがどばっと英語なので慣れていないとたじろぎますがScript Categoriesあたりから辿るとすぐにサンプルなどに飛べるのでわかりやすくなっています。

ボタンに使えるPhotoshopレイヤースタイル131種類

Sun, 02 Mar 2008 22:21:32 +0900

引き続きPhotoshopのレイヤースタイルです。こちらはカラーもバリエーションも申し分なく揃っています。これもすばらしいレイヤースタイルばかりなので参考にしてみてはいかがでしょうか。お使いになる場合はこちらのサイトにリンクを張ってください～、とのことなのでよろしくお願いします。

ボタンに使えるPhotoshopレイヤースタイル56種類

Sun, 02 Mar 2008 20:50:01 +0900

ボタンに使えるPhotoshopレイヤースタイル42種類に続いて今度は56種類です。こちらもフリーでダウンロード出来るので前回のに加えてバリエーションとして保存しておくとよさそうです。カラーバリエーションも前回よりダーク系かつサイバーな感じなものが多いのでまた違った感じです。

サイトの紹介：Polaroize

Thu, 28 Feb 2008 15:24:22 +0900

１つ前のシンプルなスプライト画像ジェネレータと同じ方が作成されている画像加工ツールです、画像をアップロードするとタイトルの横にあるようなポラロイド風の画像に加工してくれます。ファイル形式はアップロードしたファイルの拡張子で画像が生成されますが、背景色は白で統一されるようです。