‘Web製作’ カテゴリーのアーカイブ

飲み物レビューサイト「どりれぽ」

2012年2月5日 日曜日

どりれぽ | 飲み物レビューサイト

缶飲料の感想をまとめるレビューサイト「どりれぽ」を立ち上げました。やはり何でも専門サイトの方が強いもので、ここでたまにポツポツ記事にするよりも専門サイトに移したほうがいいと思って作りました。今まで飲んだ物の記録帳にもなります。さすがに金銭的な問題で独自ドメインを取ったりはしていません。

ベースは WordPress で html5 で書いています。更に、Android 等スマートフォンにも対応しています。画像は WordPress のアイキャッチ画像機能を活用し、記事中に画像を書きださなくてもアップするだけで表示できるようにしています。

Adobe Creative Suite 5.5を買うか迷う

2012年1月28日 土曜日

Adobe 製品を仕事でもよく使うようになってきたので、プライベートでも持っていてもいいかなと思いました。Flash Professional CS4、Photoshop Elements9、Illustrator CS1 を持っていますがバージョンがバラバラです。

Web 屋さん向けのソフトがセットになった Adobe Creative Suite 5.5 Web Premium の製品版を買うと236,250円かかります。さすがにそれは無理。

しかし、このページを見ると Macromedia Studio8 がアップグレード対象となっています。実は私 Flash8 を買う時に Studio8 を買った事を思い出しました。すると、アップグレード価格は134,400円。絶対無理という価格でもない。Photoshop, Illustrator, Acrobat Pro, Flash, Dreamweaver, Fireworks の最新版が手に入るわけですから安いほうじゃないか。ちょっと考えてしまう価格です。

Adobe CS6 を待ってもいいのですが、CS6は直近1つ前の主要バージョンしかアップグレード不可だとか、期間限定でCS3,CS4 まで対応だとかで無理そうです。買うなら CS6 発売までしかなさそうだなぁと。

Web製作時 Google Chrome のデベロッパーツールが便利

2011年11月28日 月曜日

Web 製作をする上で Google Chrome のデベロッパーツールが便利すぎです。Web サイト上で調べたい所で右クリックし、「要素を検証」をクリックするとその要素のパディングがどれくらいでマージンがどれくらいなのか目視できるようになります。
デベロッパーツール
表示が崩れている時にも、どこが干渉しているのかがわかりやすく問題箇所を素早く見つけられます。

CSS を細かく ON/OFF

また、画面右側では CSS で指定したスタイル一つ一つを ON/OFF する事ができます。
これでデザイン崩れの原因を突き止められる事もあります。


他にも色々機能があるようですが、ひとまずこれくらいで。

【WordPress】全記事リストを投稿日と一緒に出力する

2011年11月24日 木曜日

記事一覧 « Episodes & Melody
上記ページのように、全記事リストを投稿日と一緒に出力する事がようやく出来たのでメモしておきます。

今までは全記事リストは出力できても投稿日が出力できませんでした。

ソース

<ul>
<?php query_posts('posts_per_page=-1'); ?>
<?php if (have_posts()):while(have_posts()):the_post(); ?>
  <li><?php the_time('Y/m/d'); ?> : <a href="<?php the_permalink(); ?>">
  <?php the_title_attribute(); ?></a></li>
<?php endwhile; endif; ?>
</ul>

何記事表示するかという指定はテンプレートタグ query_posts の引数に “showposts” で指定しますが、すべてを指定する為には「posts_per_page=-1」を引数に指定します。

あとはリストの中で投稿の数だけ while 文でループして、the_time(出力方法) で投稿日を出力し、the_permalink() でリンク先、the_title_attribute() で記事タイトルを取得します。

参考

テンプレートタグ/query posts – WordPress Codex 日本語版

jpgとpng画像を画質を維持してサイズダウン「Paster」

2011年11月23日 水曜日

Kraken | Online Image Optimization Tool

以前にも jpg 画像を最適化する「JPEGmini」というツールについて書きましたが、上記のサイトは png 画像も最適化できるようです。早速試してみました。
JPEGmini では若干の画質劣化が見られましたが、これは本当に劣化がわかりません。

JPEGmini : サイズの軽減率は高いが若干の画質劣化がみられる。
Paster : サイズ軽減率は JPEGmini 程ではないが、画質劣化はほとんどない。

比べるとこんな感じです。飾り的な画像は前者、バナーなど直接的に目に入るものは後者と使いわけるのもいいと思いますね。

サイト上の画像は少しでも軽い方がいいですから、やってみる価値はあると思います。

画像の画質をなるべく維持してサイズダウン「JPEGmini」

2011年10月1日 土曜日

JPEGmini – Your Photos on a Diet!

Jpeg 画像の画質をなるべく維持してサイズダウンできるツールを試してみました。これは本当に凄いです。画像によってファイルサイズ削減量は変わりますが、だいたい30%~60%のサイズダウンができます。ホームページ上の画像は軽いに越したことはないですから、これは Web 製作に重宝するツールだと思います。

このサイトの背景に使っている画像は約30%のサイズダウンを実現しました。
ただ、背景画像のような飾り的なものならともかく、文字情報が書かれた画像だと若干の劣化が気になります。微々たるものですが。

サイトをお持ちの方は試してみてはいかがでしょうか。

新サイトオープン「ポケットサウンド」

2011年8月26日 金曜日

 
 ポケットサウンド – フリー効果音・BGM素材ダウンロード

 フリー効果音やBGM素材をダウンロードできる新サイトを立ち上げました。まだまだ素材をガンガン増やさなければいけない段階ですが、100点を越えたので発表します。

規約的なもの

 サイトへのリンク、若しくは素材製作元の表記をして頂ければ、個人・商用ともに無料で使って頂けます。

便利な利用方法

 ポケットサウンド公式 Twitter アカウントを作っています。フォローして頂ければ、新着素材の更新をいち早く知る事ができます。

ベースはWordPress

 だいぶん前に効果音素材サイトを作りたいと思った事はありましたが、当時は時間がないだの手間がかかるだの理由をつけて着手しませんでした。しかし、今回 WordPress ベースで製作したのでいとも簡単に立ち上げる事ができました。必要な機能は探せばプラグインがリリースされているので。ただ、ない機能は自分で組む必要がありましたけどね。

 ゲーム製作者の方、これからゲームを作ってみたいという方、是非お見知りおきを!

配布版Web拍手にページID機能を自力で実装する

2011年7月23日 土曜日

 登録版 Web拍手には実装されているページID機能(どのページからのメッセージかわかる機能)を配布版に自力で実装しました。
 尚、ここを見て改造する場合は自己責任で行ってください。

1.Web拍手設置ページ

 form タグの action 属性に指定されているWeb拍手 CGI のアドレスに以下の様に任意のページIDを付与する。(太字の部分)

http://www.hoge.info/cgi-bin/clap.cgi?toppage

2.clap.cgi

 1で指定したページID(?以降の部分)が cgi 側で 「$ENV{‘QUERY_STRING’}」に代入されます。そこで、clap.cgi で新たに変数を作ってページIDを代入します。

(例)
$page_id = $ENV{‘QUERY_STRING’};

 108行目に入れました。

 144行目以降の「さらに送るフォーム&メッセージ」で一言メッセージを送る時にもページIDを送る為に、自分自身(clap.cgi)の URL を変更します。

$base = $base.”?”.$page_id;

 $base にはファイル名が格納されており、「clap.cgi?toppage」のようにページIDが付与された状態のファイル名を格納しなおしています。147行目に入れました。

 114行目以降の「一言メッセージ処理」で117行目に2の最初に作ったページID変数を追加。

$mesdata = “$getdate<>$tohour<>$hitokoto<>$page_id<>¥n”;

 ログファイルに出力するものの指定です。

3.kaiseki.cgi

 114行目以降の「メッセージ表示」という所で120行目に2で作ったページID変数を追加します。

($mesday,$meshour,$message,$page_id) = split(/<>/,$mes[$i]);

 ログファイルの中身を分解して変数に代入しています。

 ページIDの表示領域を確保します。123行目を変更してテーブルにページIDを表示するようにします。

print “<td>$message</td>¥n<td>$page_id</td><tr>¥n¥n”;

 解析画面では次のように表示されるようになります。

 ページの数だけWeb拍手をインストールしなくても1つで済みます。

WordPress 3.1 にアップデートしてからページ上部に余白発生

2011年6月3日 金曜日

WordPress 3.1.2 にアップデートしてからページ上部に不自然な余白が発生しました。このページで言えばグローバルナビゲーションとページ最上部の間の余白が他に比べて2倍になりました。

普段使ってるブラウザは Google Chrome なのですが、試しに他のブラウザで見てみたら余白は発生していません。Google Chrome だけ CSS が狂うなんて考え難いです。それも当然です。WordPress にログインしている時だけページ上部に余白が発生していたのですから。ログインするのは普段使ってる Google Chrome なので、他ブラウザで発生するわけがありません。

ページソースを見てみると body タグのクラス属性に「home blog logged-in admin-bar」が付加されています。このあたりに原因がありそうです。特に「logged-in」とかログイン中だけに適用される CSS っぽいじゃないですか。

調べてみると WordPress 3.1 から admin bar という機能が追加されたそうです。admin bar の表示領域の為、ページ上部に、しかもログイン中だけ不自然な余白が発生していたようです。うちの WordPress はテーマを独自に改良し他ページとデザインを合わせている為、admin bar たるものは表示されておらず表示領域の余白だけができていました。

不自然な余白などいらないので消しました。

  • 管理画面から「ユーザー」→「あなたのプロフィール」を開く
  • 「管理バーの表示」にあるチェックボックスを全てはずす

参考記事

WP3.1で追加された「admin bar」の非表示や、不必要メニューの削除、項目の追加方法 – Website Tips ノート : VARL

Google +1 ボタンが一般サイトにも解禁

2011年6月2日 木曜日

 Google +1 ボタンが一般サイトにも設置できるようになりました。

 Google +1 をウェブサイトに表示

Google +1 ボタンとは

+1 ボタンであなたのサイトがよりソーシャルでインタラクティブになります
+1 ボタンとは、ユーザーが気に入ったコンテンツを Gogole 検索でおすすめできる機能です。

 Facebookの「いいね!」ボタンを目にしたことがある方もいらっしゃると思いますが、ようはそれの Google 版という事のようです。このボタンがクリックされる事でそのページの評価となり、 Google 検索結果に連動するそうです。既に Youtube などでも Google +1 ボタンが設置されています。

 私は Facebook に登録してないし登録する気もない。Google アカウントは持っているのでこっちを支持しますね。 早速うちのサイトでも設置してみました。うちのサイトで設置してもほぼ無意味なのはわかっていますが、脱出ゲームのページであれば使われる事もあるんじゃないかなぁと期待しています。

設置方法

 Google +1 をウェブサイトに表示のページへ行ってボタンサイズなどを選択し、指示に従ってコードを2行追加するだけです。

参考記事

“Google版いいね!”の「+1」、Webサイトへの設置が可能に – ITmedia ニュース