Home > Tag Cloud > tips

【WordPress2.5.1】 RSS フィードの時刻を GMT から JST に修正

昨日 『 『 TINAMI 』 に登録しての良かった点まとめ 』 を書き終えたあと、何とはなしに クリエイタープロフィールの最新の更新情報 を見てみたら、投稿時間が9時間ズレていました。

最新の更新情報
11:42 となっていますが、本来の投稿時間は 20:42 でした。
また、それ以前の時刻もすべて-9時間になっていました。

何が原因か判らず Twitter にてヘルプしたところ、 WordPress のフィード側の問題のようでした。
WordPress のフィードは GMT(グリニッジ標準時)で配信されますが、日本は+9時間のため JST(日本標準時)に修正する必要があるとのこと。

WordPress 2.5 のフィードの時間修正 - karu.jp 』 を参考に、以下のとおり修正しました。

ご利用のバージョンによって修正箇所などが異なりますのでご注意ください。
また、必ず事前のバックアップを忘れないようにしてください。

続きを読む

Date
2009-09-05 18:48
Category

03 ペン入れ

ペイントツールSAI 』 ver.1.0 を使用した、2009年版メイキング第三回です。
今回は、ペン入れの過程と平行ライン模様の描き方などを解説しています。

ペン入れ

先ほどと同様の手順で 『 下書き 』 レイヤーセットの不透明度を下げ、『 スクリーン 』 レイヤーをクリッピング。

ペン入れ
画像をクリックすると、『 ペン入れ 原寸大 』 を表示します。
『 ペン入れ 』 レイヤーセットを新規作成。 その中に更に 『 士郎 』 『 アーチャー 』 レイヤーセットを新規作成。 パーツごとレイヤーを分けて、1px ( ところにより 0.7px ) の鉛筆ツールでペン入れします。
手ブレ補正
手ブレ補正は 『 5 』 を基本に、長い線や曲線を描くときは 『 S-6 』 を、髪の毛など勢いをつけて自然な曲線をたくさん描くときは 『 14 』 を使用しています。 『 S-6 』 は歪まないのが利点ですが、どうしてもワンテンポズレてしまうので、髪の毛に使用すると曲線が死んでしまう気がします。
『 ペン入れ 』 レイヤーセットの中身
『 ペン入れ 』 レイヤーセットの中身はこのようになっています。
のちのち修正することが出来るように、念のためしつこくレイヤーを分けています。
レイヤーの上下の順番はテキトーではなく、パーツの上下を意識してあります ( 例えば、士郎のジーンズはTシャツを上に着ているのでその下に置く、といったように )。

平行線模様の描き方

平行ライン模様
画像をクリックすると、『 平行ライン模様 原寸大 』 を表示します。
こういう平行なラインの模様には苦戦します。 どう考えても平行に描くとか無理すぎます。
人間が手描き出来ないなら SAI の機能でラクすればいいじゃない!
太めのペンで模様を描く
『 模様 元 』 レイヤーを新規作成、太めのペンで模様を描きます。
選択領域を読み込み、1px 拡張
Ctrl + レイヤークリック で 『 模様 元 』 レイヤーの選択領域を読み込み、選択 → 選択領域を1ピクセル膨張 の手順で選択領域を拡張します。
選択領域を塗り潰し
『 模様 』 レイヤーを新規作成、CtrlF で塗り潰します。
平行ライン模様
Ctrl + レイヤークリック で 『 模様 元 』 レイヤーの選択領域を読み込み、『 模様 』 レイヤーを CtrlX でカット。 あとは、線のはみ出しを整え 『 模様 元 』 レイヤーを削除して完成です。

関連エントリー

  1. ショートカットキー設定
  2. ラフ+下書き
Date
2009-06-17 18:58
Category

02 ラフ+下書き

ペイントツールSAI 』 ver.1.0 を使用した、2009年版メイキング第二回です。
今回は、ラフから下書きまでの過程を解説しています。

ラフ

新規キャンバス作成
ファイル → 新規キャンバスCtrlN ) の手順で、新規キャンバスを作成します。
バランスの良い縦横比である PC の画面解像度 4:3 を参考に、600×800 としました。
レイヤーセットの新規作成
『 ラフ 』 レイヤーセットを新規作成。
通常レイヤーの新規作成
人物ごとにレイヤーを新規作成。
ラフ
画像をクリックすると、『 ラフ 原寸大 』 を表示します。
太めの鉛筆ツールでテキトーに描きます。
「 大体こんな感じ 」 が判れば良いので、いろいろおかしくても気にしません。
Fate/stay night [Realta Nua] 公式サイト
キャラクターは 『 Fate/stay night 』 の主人公 衛宮士郎アーチャー です。
MAD[Fate/hollow ataraxia]Cinderella-stairs 』 を観ていたら再熱したので、衝動のまま描きました。

下書き

このまま描き進めても構わないのですが、Web へ掲載するものは 『 小さな原寸 』 よりも 『 半分に縮小したもの 』 の方が粗が目立たず綺麗に見えるため、掲載サイズの二倍に拡大します。

わたしの場合、掲載するイラストは縦横 600px 以内と決めているので、

キャンバスの解像度変更
キャンバス → キャンバスの解像度変更 の手順で、600×800px から 900×1200px に拡大します。
レイヤーセットの不透明度を変更
『 ラフ 』 レイヤーセットの不透明度を 30% に下げます。
スクリーンレイヤーを新規作成
『 ラフ 』 レイヤーセットの上に 『 スクリーン 』 レイヤー ( 合成モード 『 スクリーン 』 ) を新規作成、下のレイヤーでクリッピング。 RGB: 246,203,216 で塗りつぶします。
トレースしやすくなりました
トレースしやすくなりました。
下書き
画像をクリックすると、『 下書き 原寸大 』 を表示します。
『 下書き 』 レイヤーセットを新規作成。 人物ごと ( ところによりパーツごと ) にレイヤーを分けて、2px の鉛筆ツールで下書きします。 下書きをしっかりきっちりするとペン入れが楽なので、なるべくがんばります。
KANROさんちパーカー士郎 の可愛さにやられてフードな士郎を描き始めてみたものの、やはり原作のラグランTシャツも捨てがたい!という訳で戻してみました。 士郎お約束の腹チラはさすがに自重しました。
レイヤーセットを非表示にする
下書きを終えたら、『 ラフ 』 レイヤーセットの左の目アイコンをクリックして、レイヤーセットを非表示にします。

関連エントリー

  1. ショートカットキー設定
  2. ラフ+下書き
  3. ペン入れ
Date
2009-06-16 21:02
Category

01 ショートカットキー設定

ペイントツールSAI 』 ver.1.0 を使用した、2009年版の制作過程を解説しています。
塗りながらの作成のため未完成です。 メイキングで気分転換しつつがんばります (`・ω・´)ー3

ショートカットキー設定

一つ一つの手間は小さくとも、積み重なれば大きなストレスになってしまうもの。
こだわる点へは惜しまず、それ以外ではいかに楽をするか! いかにメンドくささを回避するか!

そんなときに便利なのが 『 ショートカットキー設定 』 です。

デジタルお絵描きさんは CtrlZ 上が左手の定位置ですが、右手を描画に専念させるため 『 ショートカットキー設定 』 を駆使、もっと左手を有効に使いたいと思います。

鉛筆ツール
鉛筆ツールをダブルクリックします。
カスタムツールの設定
ショートカットキー欄に任意のキーを設定します。
自分が判りやすいものを、と Brush の 『 B 』 としました。

使用頻度の高いツールをすべて設定し、以下のようになりました。

ショートカットキー設定
ツール キー 由来
鉛筆ツール B Brush
水彩筆ツール P Paint
消しゴムツール E Eraser
選択ペンツール S 選択
投げ縄ツール L Loop
自動選択ツール A Auto
移動ツール M Move

これで、描画を中断 → ツールボックスへカーソルを移動 → ツールをクリック → キャンバスへカーソルを移動 → 描画 という手間が、左手でキーを押下するだけ!になりました。 たったこれだけで、かなり効率が良くなります。

また、

その他 → ショートカットキー設定
メニューバー → その他 → ショートカットキー設定 から、他にもさまざまな設定が出来ます。

わたしの場合の一例は以下のとおりです。

ショートカットキー設定
キー 作業 由来
D 選択領域表示 選択領域の解除キーに似せて
N 新規レイヤー New
F2 レイヤー名変更 Windows 仕様
- 描画色 / 透明色 切り替え  
Shift + Ctrl + I 選択領域の反転 Photoshop 仕様

また、デフォルトで設定されているもので使用頻度の高いものは以下のとおりです。

ショートカットキー設定
キー 作業
PageUp 拡大
PageDown 縮小
End 時計回り回転
Home 位置リセット
Delete 反時計回り回転
H 左右反転
Ctrl + A 全て選択
Ctrl + C コピー
Ctrl + D 選択領域の解除
Ctrl + E 下のレイヤーと結合 / レイヤーセットを結合
Ctrl + F レイヤーを塗り潰す
Ctrl + N 新規キャンバス
Ctrl + O キャンバスを開く
Ctrl + S キャンバスを保存
Ctrl + V 貼り付け
Ctrl + W 閉じる
Ctrl + X 切り取り
Ctrl + Y やり直し
Ctrl + Z 元に戻す

これらのショートカットキーを使用するか否かで効率もストレスも随分違います。
デフォルトキーを覚えるも良し、使いやすいようカスタムするも良し、ご存知でなかった方は是非お試しください。

関連エントリー

  1. ショートカットキー設定
  2. ラフ+下書き
  3. ペン入れ
Date
2009-06-16 15:50
Category

リキッドデザイン問題は max-width と IE6 用 expression で解決

これらを読んで、改めて Web サイトの横幅とリキッドデザインについて考えてみました。

Before

100%幅のリキッドデザインだった頃
わたしも以前は 100% 幅のリキッドデザイン ( 可変幅 ) を採用していました。
画面全体を有効に活用出来、横スクロールも出ない、俺最高! と。

ところがあるとき、「 ブラウザを最大化すると広がりすぎて見にくい 」 とのご指摘があり、その当時は 「 見にくいならウインドウ幅調節すれば良くね? そのためのリキッドなんだから 」 と、特に問題視していませんでした。 わたしも最大化して見てはいますが、常にサイドバーを表示しているため、そう広すぎるとは思わなかったので。

しかし、[ ウインドウ幅をそれぞれのサイトに合わせて調節しながら見る ] ことと [ 横スクロールバーが表示される ]、どちらも [ 普段の環境で快適に見られないことに対するストレス ] という点において同列のものだと気付いたのです。

100% 幅の可変デザインの問題点は理解したものの、かといって固定幅は小さい画面に合わせると大きい画面で余白がありすぎて不恰好になってしまうし ・・・・・・ という訳で出した結論は、

これらを採用する、というものです。

After

イラストの横幅最大値600px+余白30px+ボーダー6px
わたしのサイトはイラストサイトなので、展示するイラストの横幅の最大値 ( 600px ) を基準にします。 余白は左右 30px ずつ取り、ボーダーは 6px ずつ加えました。
モダンブラウザ用 CSS
div.sample {
	border-left  : 6px solid #E5E5E5;
	border-right : 6px solid #E5E5E5;
	min-width    : 660px;
	max-width    : 900px;
	width        : 82%; }
  • 最小幅は 672px ( 600px + 余白 60px + ボーダー 12px )
  • 最大幅は 912px ( 840px + 余白 60px + ボーダー 12px )
  • その中間では、ブラウザの表示領域の 82% の幅にする
IE6 用 CSS
* html div.sample {
	width : expression(document.body.clientWidth < 691? "671px" : document.body.clientWidth > 832? "812px" : "auto"); /* IE */ }
  • ブラウザの表示領域が 691px 以下の場合は 671px に
  • ブラウザの表示領域が 832px 以上の場合は 812px にする

ここで注意しておかなければならないのは、< 691? "671px"> 832? "812px" を、< 671? "671px" > 812? "812px" のように 同値にしてはいけない ということ。 幅を変えるたびにブラウザが落ちて危険です。 なんというブラクラ。 少し余白を設けるように、数値に余裕を持たせてください。

参考リンク

イラストサイトである以上、イラストの最大幅よりも小さな表示領域の場合は横スクロールバーが出てしまうのは必至、と割り切りました。 max-width が min-width と 140px 240px しか違わないのは、[ 広すぎても読みにくい ] ということから自分が読みやすいと感じる値を算出した結果です。

最小値と最大値に迷っている方は、BROWSIZE.ORG でご自身のサイトの閲覧者の実状を研究してみてはいかがでしょうか。 サイトの方向性によって結果がガラリと変わってくるので、他のサイトでの解析結果が必ずしも当てはまるとは限りません。

追記

min と max の差が僅かしかない。 意味が無いような ・・・・・・。

はてなブックマーク - リキッドデザイン問題は max-width と IE6 用 expression で解決 - eclucifer blog

その [ 僅かな差 ] で横スクロールバーが出る Web デザインになったりするので、[ 僅かな差 ] というのは重要な問題。 と思ったけれど、考えてみれば [ max ] なのだからもう少し広げても良い気がする ・・・・・・ という訳で、100px 広げてみました。

おまけ

当サイトにおける過去一ヶ月のブラウザ利用状況 ( Google Analytics 調べ ) は以下のとおりです。

ブラウザ利用状況
ブラウザ利用状況
Internet Explorer バージョン別利用状況
Internet Explorer バージョン別利用状況

まだまだ IE 独断場といった感じ。 やっと IE7 が IE6 を追い抜いたばかりですが、来年の今頃、遅くても再来年には IE6 への対応に一手間掛けずに済みそうな伸びではあります。 やはり同梱のブラウザは強いですね。

画面解像度
画面解像度
ちなみに画面解像度の結果はこのとおり。 横幅だけでなく、縦幅も考えさせられる感じ。 ヘッダを大きくしすぎて肝心のコンテンツがスクロールしないと見えない、というサイトも結構あったりしますね。
Date
2009-01-15 19:06
Category
Page 1 / 41234»

Tag Cloud