ブロックワークス » WordPress http://blockworks.jp Just another WordPress weblog Fri, 18 May 2012 01:55:00 +0000 ja hourly 1 http://wordpress.org/?v=3.2.1 WordPressプラグインAjax Event Calendarの日本語訳ファイルを作成しました http://blockworks.jp/archives/1588 http://blockworks.jp/archives/1588#comments Thu, 10 May 2012 06:27:22 +0000 blockworks http://blockworks.jp/?p=1588 WordPressプラグインAjax Event Calendarの日本語訳ファイルを作成しました is a post from: ブロックワークス

]]> WordPressでイベント情報表示に便利なプラグイン「Ajax Event Calendar」の日本語翻訳ファイルを作成しました。

WordPressプラグインAjax Event Calendarの日本語訳ファイルを作成しました

Ajax Event Calendarは、イベントの情報表示や登録がAjaxを使ったプラグインです。
私はシンプルに内容を表示するだけを前提としていたのでこれだけでも必要十分な機能が揃っていますが、他にも以下のような便利な機能が付いています。

  • あらかじめ用意されている項目の表示/非表示/必須項目を選択可能
  • 説明文にURLがあると自動でリンクに
  • 一般向けに対しても登録が出来るような仕組みのON/OFFを制御可能

確認環境

以下の環境で動作することを確認しました。

  • WordPress3.1.3
  • Ajax Event Calendar 1.0.2

インストール方法

  1. 翻訳ファイルとプラグインをダウンロードします。
  2. 翻訳ファイルにある「ajax-event-calendar-ja.mo」「ajax-event-calendar-ja.po」ファイルを、プラグインの「locale」フォルダにコピーします。
  3. 日本語環境のWordPressであれば、自動で適用してくれます。

翻訳ファイルダウンロード

よかったらぜひ使ってみてください。

初めてプラグイン作者へつたない英語でメールしてみた。盛り込まれるといいな〜ｗ

WordPressプラグインAjax Event Calendarの日本語訳ファイルを作成しました is a post from: ブロックワークス

]]> http://blockworks.jp/archives/1588/feed 0 Coda.appで使えるWordPressテーマ制作向けクリップ http://blockworks.jp/archives/1387 http://blockworks.jp/archives/1387#comments Tue, 22 Nov 2011 13:48:02 +0000 blockworks http://blockworks.jp/?p=1387 Coda.appで使えるWordPressテーマ制作向けクリップ is a post from: ブロックワークス

]]> Coda.appには、「クリップ」と呼ばれるスニペット置き場があります。WordPressのテーマ制作に使えそうなクリップを作ってみました。

Coda.appで使えるWordPressテーマ制作向けクリップ

はじめに

  • 利用はフリーです。ご自由にどうぞ。
  • オレオレ成分が20％ほど入っておりますのでご了承ください。
  • 間違いなどありましたら、@aknkまでつぶやいてください。

クリップ内容

以下のクリップを入れてあります。

  • 文字コード表示
  • ページタイトル表示
  • スタイルシートのアドレス(style.css)
  • RSS(RSS0.9/RSS2.0/Atom0.3)一式
  • バージョン番号
  • テーマフォルダ内のjavascript読み込み
  • WPコアからjQueryを読み込み
  • wp_headアクション(head内に追加)
  • header部分よくある感じのひな形
  • ブログの名前
  • ブログの概要
  • ブログのメインページのURL
  • WPのインストール先ディレクトリのアドレス
  • テーマディレクトリのアドレス
  • ヘッダ読み込み
  • サイドバー読み込み
  • フッタ読み込み
  • 任意のテンプレート読み込み
  • 任意のテンプレート読み込み(WP3.0+)
  • bodyクラス
  • ポストクラスpost_class
  • カスタムフィールド値を出力
  • 記事にアイキャッチ画像が割り当てられているかどうか
  • カテゴリーリスト表示
  • ページリスト出力
  • wp_footアクション(html末尾に追加)
  • copyright（年号更新付）
  • 条件分岐ひな形
  • is_home メインブログが表示されている時
  • is_front_page フロントページ
  • is_single 個別投稿ページ
  • is_page 固定PAGE
  • is_category カテゴリis
  • in_category カテゴリin
  • is_tag タグ
  • is_date 日付ページ
  • is_archive アーカイブページ
  • is_search 検索結果
  • is_404 404ページ
  • 一般的なループ
  • WP_Queryによる記事抽出
  • query_posts
  • 投稿ID(ループ内)
  • 記事タイトル表示(ループ内)
  • パーマリンク(ループ内)
  • コンテンツ表示(ループ内)
  • 投稿記事のカテゴリ表示(ループ内)
  • 投稿サムネイル機能を追加(functions.phpに記述)
  • テーマ情報
  • PAGEテンプレート情報
  • ビジュアルエディタにオリジナルテーマを適用(functions.php)
  • ビジュアルエディタの見出しプルダウンカスタマイズ(functions.php)

インストール方法

ダウンロード・解凍し、ファイルをアイコンへドラッグまたはダブルクリックしてインストールを行ってください。

ダウンロード

Coda.appで使えるWordPressテーマ制作向けクリップ is a post from: ブロックワークス

]]> http://blockworks.jp/archives/1387/feed 0 MOONGIFTのホームページリニューアルでデザイン的に考えた事 http://blockworks.jp/archives/1209 http://blockworks.jp/archives/1209#comments Wed, 19 Jan 2011 04:18:44 +0000 blockworks http://blockworks.jp/?p=1209 MOONGIFTのホームページリニューアルでデザイン的に考えた事 is a post from: ブロックワークス

]]> MOONGIFTさんが今週頭にリニューアルされました。その中でサイトデザインとWordPressのテーマ制作をやらせていただきました。私がどういう風に感じて、どう考えたのかを書いてみたいなと思います。

MOONGIFTのホームページリニューアルでデザイン的に考えた事

はじめに

リニューアルは、おおざっぱに以下のような作業分担となっています。

  • HPに入れたい情報・要望を洗い出し（MOONGIFTさん）
  • 入れたい情報を元にレイアウト案を作成（私）
  • レイアウトがある程度決まったらビジュアル化（私）
  • コーディング、WordPressテーマ化（私）
  • WordPressテーマを元に、課金・プレミアム等のプログラム部分を実装（MOONGIFTさん）

レイアウト・情報整頓について

私が担当する作業の中では、この部分の作業時間が一番かかったと思います。
MOONGIFTさんの今後の展開を聞いた上で、

  • 後からでも情報や機能、サービスを付け加えやすいレイアウトの模索
  • 情報の整頓、配置
  • 現状ある膨大な情報量の整頓（奥にひっこめる、表に出す）

を考えました。例えば…

3カラムがいいか、2カラムがいいか
→情報量が多かったので当初3カラムを考えていましたが、すっきりも見せたかったので2カラムに
記事サムネイル、ソーシャル系ボタン、タグやカテゴリや著者周りの情報整頓
→初期レイアウトは日付が目立つようなデザインだったり、サムネイルの配置が逆（右側）でした。

MOONGIFTのホームページリニューアルでデザイン的に考えた事

サービスが増える可能性もあるかもしれない
→タブを簡単に追加できるようにタブエリアの右スペースは空けて置く、タブの色も決めておく

MOONGIFTのホームページリニューアルでデザイン的に考えた事

…などです。

レイアウトを考えるにあたり、
MOONGIFTさんにはかなりしつこく、そして細かな所まで何度も質問をしてしまいました。

聞いた情報の全てがレイアウトやデザインとして反映されないかもしれないですが、
分かりうる全ての情報を知っておきたかった、という気持ちがあったからです。（そうしないとデザインができない）

ビジュアルについて

ビジュアルに関しては、MOONGIFTさんにはほぼ全てお任せしていただけました。
ビジュアルイメージの制作にはFireworksCS4を使用しました。（私はFireworks派ですｗ）

デザインは明確な答えがないと思っています。（だからデザインは面白い）
限られた時間の中で「時には理論的に」「時にはアーティスティックに」「時には技術的な事も考慮して」と、頭の中でぐるぐる考えながら無数の組み合わせを頭の中でシミュレートし、いい落としどころ（バランス）のところで「えいやっ」と提案する感じです。

こんな事を考えながらデザインした、という事を箇条書きで書いていきます。

MOONGIFT＝月＝黄色をアクセントとして使おう
→ここはリニューアル前のイメージ色を踏襲しよう
月の黄色だから、もう1色合わせるとしたら紺色か黒かな。
→紺色でデザインをしたらなんかいまいちだったので黒にした
今いるコンテンツの場所によって、タブの色を変えていこう。
OSS記事→黄色、ジョブ→職をイメージさせる気がする水色、今後増えるサービスのためにピンクと黄緑も用意しておこう
ホームのタブ色は薄いグレーにしよう。
→各サービスの新着を表示する総合トップを想定。どこにも属さない感じを出すために。
コンテンツ部分の背景色は黄色味のあるグレーにしよう。
→薄いグレーをたくさん使うと暗く見えがちなので避けたかった。様々なタブの色に合わせやすく、かつ明るさを感じる色という事で薄いグレーに黄色味を追加。
本文の文字色は#000か、#333のどちらにしよう
→見やすさ重視で#000に
コンテンツ枠の余白をどれくらいにしよう
→余白が多い：ゆったり見える、余白が少ない：窮屈に見える

MOONGIFTのホームページリニューアルでデザイン的に考えた事

目立つ必要のない罫線はできるだけ使わないor使う場合もできるだけ薄い色にしよう
→Webにおいて罫線は妙に目立つ印象があるので

コーディングについて

角丸にはborder-radius（webkit-border-radius、moz-border-radius）を使っていこう。
→IE系では角丸にならないけど、「古いブラウザではそれなりに、新しいブラウザではよりリッチに」でいいんじゃないかと思った。
上と同じ考えで、画像も透過PNG（PNG32）を使おう。
→IE6があるけど、「古いブラウザではそれなりに、新しいブラウザではよりリッチに」でいいんじゃないかと思った。
本文をできるだけ読みやすくしたいな。
→膨大な過去記事への影響が考えられるので、記事部分のCSS設定は必要最低限に。（通常はH1〜6、ul、ol、dl、blockquote等、一般的なhtmlタグにCSS設定を施します）
出来る範囲で画像の使用は抑えて、文字で済ませよう。
→タブメニューとか画像で作りたくなるけど、納品した後は気軽に訂正に手を出せないので、MOONGIFTさんの更新しやすさを考慮
CSS設定時、他への影響を少なくするために、ボックス単位で設定しよう。
→CSSの記述量が増えてしまうが、出来るだけ細かいボックスに区切っておいたほうが、追加サービスや訂正の時の影響範囲が少なくて済むので。（文字サイズ・margin・padding等）

MOONGIFTのホームページリニューアルでデザイン的に考えた事

WordPressテーマ化について

テーマファイル
→もちろんイチから作成しました。
全体のファイル構成は標準テーマの「twentyten」を参考に
→loop.phpとsidebar.phpに表示の処理が集中するイメージです。特定のページでしか使わない処理はcategory.php,single.php内に記述しています。
ウィジェット機能
→管理画面上のウィジェットに対応したコードは使ってないです。直接記述した方が早いので。
そのほか読み込みたい記述があった場合は、随時PHPを増やしていきました。
→もっと私に技術力があれば、すべての処理をfunctions.phpにまとめたり出来るのでしょうが

最後に

上手く伝わるか自信がないですが…
私はデザインする上で抑えておくべき「ポイント」が存在すると思っています。
どういう箇所を見ているのか、どういう部分にこだわっているのか、体裁をよく見せるコツ、みたいな事です。

デザイナーは、そういった「ポイント」を抑えつつ、アーティスティックな要素をいかに組み込んでいくか、ということに時間をかけていると思っています。
Webの場合は見ておしまいではなく、クリックなどの「操作（UI）」的な要素が加わるので現実的にはなかなか難しいのですが。（自分も難しいと感じています）

デザイン・ビジュアルに関する事は苦手だけど、プログラムが得意なプログラマーさん、SEさんも、
拙い文章からそのポイントが少しでも垣間見ることができれば幸いです。

#デザイナーの側からプログラムする上でのポイントが分かればと思ってPHPを勉強しているのですがプログラムは難しいですね…ｗ

MOONGIFTのホームページリニューアルでデザイン的に考えた事 is a post from: ブロックワークス

]]> http://blockworks.jp/archives/1209/feed 2 tumblrっぽいWordPress有料テーマwumblrが気になる http://blockworks.jp/archives/1201 http://blockworks.jp/archives/1201#comments Thu, 06 Jan 2011 17:33:20 +0000 blockworks http://blockworks.jp/archives/1201 tumblrっぽいWordPress有料テーマwumblrが気になる is a post from: ブロックワークス

]]> 普段WordPressの有料テーマは見向きもしないのですが、tumblr的な使い方ができる「wumblr」というWordPress有料テーマがちょっと気になったのでご紹介します。

tumblrと同じようにテキスト、画像、動画、チャット、音楽などと、ジャンルごとに専用の投稿フォームが用意されているようです。

また、投稿したフォームに応じて背景色が変わったり、1〜3カラムのレイアウトに変更することもできるようです。もちろんウィジェット対応・クロスブラウザ対応。

tumblrっぽいWordPress有料テーマwumblrが気になる

tumblrっぽいWordPress有料テーマwumblrが気になる

価格は65$とちょっと高いですが、「Wumblr Theme Release」の記事にあるように、

Use the coupon code “wumblr” for a 40% discount of this theme until Jan 14, 2011.

2011年1月14日までに、購入時のクーポンコード「wumblr」を入力して買うと、40%オフのようです。デモページもあるので、一度チェックしてみてはいかがでしょうか？

tumblrっぽいWordPress有料テーマwumblrが気になる is a post from: ブロックワークス

]]> http://blockworks.jp/archives/1201/feed 0 ホームページ：WPデザインギャラリーに弊社制作サイトが掲載 http://blockworks.jp/archives/1085 http://blockworks.jp/archives/1085#comments Tue, 11 May 2010 14:25:33 +0000 blockworks http://blockworks.jp/archives/1085 ホームページ：WPデザインギャラリーに弊社制作サイトが掲載 is a post from: ブロックワークス

]]> かちびと.netさんがWPデザインギャラリーというサイトを公開されていました。その中に弊社制作サイトが掲載されていましたのでご紹介したいと思います。

WPデザインギャラリー

WPデザインギャラリーは、WPで作られている国内サイト専門のギャラリーです。国内という所がミソですね。現場目線な感じで好印象です。

2010年5月11日現在、322のサイトが紹介されています。その中で弊社制作のサイトが自分のサイトを含め、4サイト紹介されていました。紹介されたサイトは以下の4サイト。

1つ1つの感想を読みましたが、こういう目線で見てくれているんだな〜と感じ、てとても新鮮でした。こういう形で紹介されると嬉しいですね。

リンク

ホームページ：WPデザインギャラリーに弊社制作サイトが掲載 is a post from: ブロックワークス

]]> http://blockworks.jp/archives/1085/feed 0 スライド式ページナビが実装できるWordPressプラグイン「Paginator」 http://blockworks.jp/archives/903 http://blockworks.jp/archives/903#comments Sat, 16 Jan 2010 05:15:03 +0000 blockworks http://blockworks.jp/?p=903 スライド式ページナビが実装できるWordPressプラグイン「Paginator」 is a post from: ブロックワークス

]]> 記事のページナビの実装によく使われているプラグインに「WP-PageNavi」がありますが、今回はスライド式ページナビが実装できるWordpressプラグイン「Paginator」を発見しましたので、ご紹介します。

page

paginator
↑みたいなスライド式ナビゲーションを実装することができます。

1.プラグインのインストール・有効

こちらからプラグインをダウンロード・解凍し、「wp-content」→「plugins」フォルダ内にアップロードし、管理画面でプラグインを有効にします。

2.コードを挿入

テーマファイル内のナビゲーションを挿入したい箇所に以下のコードを貼り付けます。

<?php if(function_exists('wp_paginator')) { wp_paginator(); } ?>

それだけでナビゲーションが挿入されます。

設定画面

「Paginator」は、管理画面で以下の2つの設定を行うことができます。

paginator_setting

Number Of Pages Visible At Once (must be at least 2)?
スライドの横幅に表示するページ数を設定します。
Do you want to display total number of pages?
記事総数を表示するか、しないかを設定します。

スライド式ページナビが実装できるWordPressプラグイン「Paginator」 is a post from: ブロックワークス

]]> http://blockworks.jp/archives/903/feed 0 WordPressのちょっとしたコードを探すならsnipplrがおすすめ http://blockworks.jp/archives/878 http://blockworks.jp/archives/878#comments Mon, 11 Jan 2010 11:54:45 +0000 blockworks http://blockworks.jp/?p=878 WordPressのちょっとしたコードを探すならsnipplrがおすすめ is a post from: ブロックワークス

]]> 「snipplr」という、ソースコードの部品を共有しているサイトがあります。日本で言う「codeなにがし」の海外版と言ったところでしょうか。

snipplr

「snipplr」には、様々な言語のソースコードを見ることができますが、個人的にwordpress関連のコードをよく眺めています。

コードが書けないとついついプラグインに頼ってしまいがちですが、コードでまかなうことができるなら、できるだけプラグインは減らしていきたいですよね。

Snipplr – Search results for wordpressから、wordpress関連のソースを見ることができます。眺めているだけでも、新しい発見があるかもしれませんよ！？

WordPressのちょっとしたコードを探すならsnipplrがおすすめ is a post from: ブロックワークス

]]> http://blockworks.jp/archives/878/feed 0 ホームページ：TAKABO SOFT 様 http://blockworks.jp/archives/844 http://blockworks.jp/archives/844#comments Fri, 05 Jun 2009 15:19:09 +0000 blockworks http://blockworks.jp/?p=844 ホームページ：TAKABO SOFT 様 is a post from: ブロックワークス

]]> Windows用ソフトの制作を行っており、ドット絵ソフト「EDGE2」やMIDI編集ソフト「Domino」で有名なTAKABO SOFT様のホームページを制作いたしました。

ホームページ：TAKABO SOFT 様

制作はWordpressで行いましたが、今まで作ってきたWordpress系サイトの中で一番大きなサイトとなりました。

エントリーだけで300記事以上、PAGEも30ページ近くあるので、蓄積したデータを出来る限り無駄にしないよう最大限配慮しました。

デザイン的には、以前のサイトと同じブルーを基調としたデザインにしながらも、罫線を限界まで無くし面で魅せる手法を使い、また余白もゆったりととって、すっきりした印象に感じられるよう考慮しました。EDGE2の公式サイトトップページにあるアイコンは新たに描き下ろしたものです。
旧サイトと比較して文字もぐっと大きくし、読みやすさにも配慮しました。

プログラマーさんのサイトですので、サンプルコードなどを視覚的に見やすくするプラグインや、ソフトウェアのダウンロードがしやすいこと、主力ソフトのトップページごとに最新情報を表示できるようにしました。

TAKABO SOFTさんはもともとアクセス数があり、ページランクもあるサイトでしたので、ユーザーの方が移転先がどこなのか迷わないよう、また、Googleなどの検索エンジンにある実績をうまく引き継ぐことができるよう考慮しました。みなさんにとって便利なソフト、楽しいソフトを多数公開していますので、ぜひ見てみてください。

リンク

ホームページ制作のご依頼は…

ホームページ制作のご依頼は、お気軽にお問い合わせください。

ホームページ：TAKABO SOFT 様 is a post from: ブロックワークス

]]> http://blockworks.jp/archives/844/feed 0 ホームページ：スズキ工務店 有限会社 様 http://blockworks.jp/archives/800 http://blockworks.jp/archives/800#comments Wed, 29 Apr 2009 10:16:03 +0000 blockworks http://blockworks.jp/archives/800 ホームページ：スズキ工務店 有限会社 様 is a post from: ブロックワークス

]]> 静岡県磐田市を中心に建築・リフォーム業務を行っている「スズキ工務店 有限会社」様のホームページを制作いたしました。

ホームページ：スズキ工務店 有限会社 様

今回もWordPressを使い、更新作業が簡単にできるよう配慮しています。今回はjQueryライブラリをトップページの目立つ形で使用し、メイン画像が一定時間毎に切り替わる仕掛けを組み込みました。インターネットは日々情報が溢れていますので、以下のような内容を考慮し、提案・実行いたしました。

  • いかに最初に注目させるか
  • 本当に言いたい内容を強調するため、どのようにすっきり表現するか
  • 更新性の良さ

社長は家に対する思い入れがとてもあり、本当にお客様のことを考えた提案をしてくれますので、リフォームや新築をお考えの方はぜひ一度ご相談ください。スズキ工務店 様は社長自身が技術力を持った「家のプロフェッショナル」ですから、家に関する事なら、どんな些細な事でも相談してみてください。

リンク

ホームページ制作のご依頼は…

ホームページ制作のご依頼は、お気軽にお問い合わせください。

ホームページ：スズキ工務店 有限会社 様 is a post from: ブロックワークス

]]> http://blockworks.jp/archives/800/feed 0 【2.】既存サイトの移動と301リダイレクト http://blockworks.jp/archives/771 http://blockworks.jp/archives/771#comments Tue, 03 Mar 2009 05:09:15 +0000 blockworks http://blockworks.jp/archives/771 【2.】既存サイトの移動と301リダイレクト is a post from: ブロックワークス

]]> 次のステップは、サブドメインで運営していた「ブロックワークス::クリップ」と「ブロックワークス::ソフト」の移行を行いました。

ブックマークのバックアップ

データベースとxml形式でのバックアップをしておきます。データベースのバックアップはこちらを参照してください。

xml形式のバックアップは、自分の場合、

http://clip.blockworks.jp/api/posts/all

にアクセスし、管理者用IDとパスワードを入力すると、XML形式のページが表示されます。そのページをブラウザから保存するだけです。

サーバのデータを丸ごとコピー

サーバにあるシステム丸ごとをサーバの「http://blockworks.jp/clip/」へコピーします。

301リダイレクト

旧ドメイン「http://clip.blockworks.jp/」から「http://blockworks.jp/clip/」にリダイレクトするよう、「http://clip.blockworks.jp/」のトップに.htaccessを配置をします。記述はこんな感じ。

RewriteEngine On
RewriteCond %{http_host} ^clip.blockworks.jp
RewriteRule ^(.*) http://blockworks.jp/clip/$1 [R=301,L]

実は意味をよく分かっていないのですがｗ、サイト丸ごと301リダイレクトするにはこういう記述をするみたいです。リダイレクトしているのを確認したら、元データを削除します。

ブロックワークス::ソフト

「ブロックワークス::ソフト」は静的ページですので、ファイルを新しい場所へコピーし、301リダイレクトを設定して終わりです。

RewriteEngine On
RewriteCond %{http_host} ^soft.blockworks.jp
RewriteRule ^(.*) http://blockworks.jp/soft/$1 [R=301,L]

新しいURLに定着してきたら、サブドメインごと削除しようと思います。

【2.】既存サイトの移動と301リダイレクト is a post from: ブロックワークス

]]> http://blockworks.jp/archives/771/feed 0