Webデザイナーとして働くワーキングマザーの日記

wordpressを使って、Webデザインのギャラリーサイトを作成しました。

日本のクリエイティブな制作会社・フリーランスのWebデザインギャラリー
Japanese creative gallery
http://gallery.kunugi-design.jp/

制作の手順や、使用したプラグインなどを、ざっくりですが覚書として残しておきたいと思います。

1：デザイン

トップページには、サムネイルと職種・地域名・登録日を表示することにしました。
エントリーのボックスが、スマートフォンは1列・タブレットは2列・PCは3列or4列で表示するようにレイアウトしています。
実際の表示はコーディング時にCSSで調整しました。

2：コーディング

2-1：レスポンシブにコーディング

HTML5、レスポンシブでコーディング。下記を参考に。

• ブログをレスポンシブにリニューアル　覚書
  http://blog.kunugi-design.jp/2012/09/responsive/
• HTML5へのリニューアル　覚書
  http://blog.kunugi-design.jp/2012/08/html5/

ヘッダーの日本地図や、フッターのサイトロゴなどは背景画像で設定し、スマートフォンでは表示されないようにしています。
Chromeの「Window Resizer」という拡張機能でウィンドウをリサイズし、表示確認しています。
（実機ではまだ出来ていないので表示がずれていたらすいません。。）

2-2：JavaScriptで、ブロックレベル要素の高さを揃える

例えばサイト名などが長くなった場合など、エントリーのボックスの長さがまちまちだと、floatさせた時に表示が崩れたりします。
下記のjsを使用して回避しました。
ブロックレベル要素の高さを揃えるheightLine.js

2-3：Googleアドセンス

広告バナーを取得します。
横長バナー（468×60）とレクタングル中（300×250）を設定しました。

2-4：HTMLをテンプレート化

HTMLで一旦組んで表示確認してからphpに分割しています。

3：wordpress設定

3-1：全体の設定

王道ばかりですが、下記のプラグインを使用しています。

使用プラグイン

• All in one Favicon
  ファビコンの設定。管理画面にも適用できます。
• All in One SEO Pack
  新規投稿では使用せず（入力がめんどくさいので）、トップページや固定ページで使用しています。
• Google XML Sitemaps
  Googleのサイトマップを自動作成してくれます。
• Ultimate Google Analytics
  Googleアナリティクスのタグを自動挿入してくれます。
  管理画面を開いている時には自分のアクセスをカウントしないので便利です。
• WP-PageNavi
  トップページやカテゴリページのページング。CSSも変更可能です。

3-2：投稿

極力入力を簡単にするように、下記のように設定しています。
　タイトル：サイト名
　本文：ピクチャ画像のパス
　カテゴリ：都道府県
　タグ：職種
　カスタムフィールド：URL

使用プラグイン

• Browser Shots
  URLを設定するだけで自動的にサイト画面のピクチャを取得してくれます。
  FlashやJsで動きのあるサイトだと、ちょうどいい時の表示ができないのが難点。。
• AddQuicktag
  上記の「Browser Shots」用のタグを簡単に挿入できるようにしています。
• Custom Field Template
  カスタムフィールドを簡単に設定できます。
• WP Social Bookmarking Light
  SNSボタンを挿入してくれます。CSSも調整可能。

トップページからは、画面ピクチャとサイト名・URLをクリックすると、直接別ウィンドウでそのサイトが開くようにしています。
でも投稿ページへのリンクがないのもなんなんで、日付をクリックすると表示するようにしました。。

3-3：カテゴリーページ

地域をカテゴリー、職種をタグで管理するように設定しました。

使用プラグイン

• Exec-PHP
  固定ページの本文内でphpを記述できるようになります。
  固定ページでカテゴリーページを作り、カテゴリーとタグへのリンクを自動表示するように設定しました。
• Category Order
  カテゴリーの順番を自由に設定することができます。
  都道府県の並びを北海道から順に並べました。

3-4：Facebook、twitter

facebookページを作成し、twitterもアカウントを取得。
それぞれ、ヘッダー画像などを登録してデザインしました。

使用プラグイン

• Open Graph Pro
  facebookのOGPを簡単に設定できます。
  ただ、今回は各エントリーの画像をBrowser Shotsで登録しているので、上手く画像を取得できないようで、各エントリー画像も初期設定のものになってしまいました。。

facebook、twitterへの配信はプラグインを使わず、twitterfeedを利用しました。

http://twitterfeed.com/
実際にfacebookやtwitterに表示されるには、ちょっとタイムラグがあります･･･。

4：最後に

大昔にMTを使って同様にギャラリーサイトを作ったことがあったのですが、結局登録が手間になって続きませんでした。
wordpressではプラグインを使ってピクチャ画像を作らなくてもよくなった分、投稿がかなり簡単になったなあと思います。
今回は飽きないように、続けたいと思います！