WordPress 3.x現場のワークフローで覚えるビジネスサイト制作

作ってみた

「WordPress 3.x現場のワークフローで覚えるビジネスサイト制作」という本を使ったサイト制作は地味に進行中。

年末年始、離島のクモの糸のように細い回線はより細くなり、ADSL基地局から離れた我家は、ダイヤルアップ時代の速度も出ないというか、完全に回線が途切れてしまうこと多々。インターネットを使う作業がほとんど出来ないでいました。
日本中、誰もが光回線や速い回線を使える訳じゃない。ま、仕方ないです。
今月はほとんど自宅にいないので、今後なかなか進まないなぁ。

でもこの本、最初は言われる通りに作って、作れる喜びをかみしめてから、ちゃんと復習して理解したら、WordPressのテーマ制作についてかなり理解が深まるのではと思います。
とっとと、自分の作品を作れるようにならなきゃ。

WordPressで企業サイト制作を学ぶ本

作ってみた

WordPress 3.x現場のワークフローで覚えるビジネスサイト制作

本書では、(X)HTML+CSSでサイトをつくることはできるものの、「ゼロからのWordPressサイト構築は未経験」、「PHPなどのプログラムはあまりわからない」という方のために、WordPressでビジネスサイトを構築する手法をステップ・バイ・ステップ形式で解説しています。作成するサンプルサイトには、ニュースページ、製品情報ページ、会社概要ページ、お問い合せフォームといったクライアントワークに欠かせない要素が盛り込まれています。
サンプルデータと掲載コードもダウンロードできるので、PHP言語に不慣れな方でも順を追ってステップを進めていけば、WordPressのしくみからテンプレートタグの使い方、カスタム投稿タイプ、固定ページなど、WordPressサイトの制作に必要な知識と技術を身につけられます。

この本を使って、サンプルサイトをつくりながら、WordPressのビジネスサイト制作を勉強しています。


CHAPTER 1 WordPressの初期設定の確認
LESSON 001 基本設定
LESSON 002 初期登録されている情報の削除
LESSON 003 記事の投稿

CHAPTER 2 WordPressの基本
LESSON 001 サイト構築をする手順
LESSON 002 WordPressのテンプレートファイル
LESSON 003 新しいテーマの作成とテーマの選択
LESSON 004 bloginfoタグでのブログ情報の確認
LESSON 005 パーツテンプレートの作成
LESSON 006 投稿した記事のタイトルと本文を出力

CHAPTER 3 サイトのベース制作
LESSON 001 ヘッダーエリアの作成
LESSON 002 フッターとサイドバーの作成

CHAPTER 4 ニュースページの作成
LESSON 001 トップページにニュース記事を表示

本の3分の１くらい進んだ、現在の状態です。
少しずつ、サイトのカタチになっていくのが面白いです。

画像から色を抽出してくれるカラーパレット4種

Webデザインの参考

「この画像のイメージっていいな」と思った時に、画像から自動的に色を抽出してくれるカラーパレットを4種類ご紹介します。
自分のイメージを膨らませるのにもいいし、実際のWebサイト制作にも使えると思います。

Color Palette Generator

アップロードした画像から、カラーを抽出してくれます。
落ち着いた配色、明るい配色の2パターンが生成されます。

Color Hunter

こちらも、アップロードした画像から、カラーを抽出。
シンプルに使えます。

Color Palette Generator: Automagically create a color palette from any photo.

パソコン内のファイルを指定して、カラーを抽出します。
Adobe Swatch ExchangeでPhotoshop用にダウンロード出来たり、色のサンプルCSSも付いていたりします。

CSS Drive: Image to Colors Palette Generator

パソコン内のファイルにも、アップロードした画像にも対応しています。
明度を変えたサンプル3パターンと、多くのカラーを抽出したパレットが表示されます。

Google Chrome の拡張機能、ColorZilla 等のスポイトでひとつひとつカラーをピックアップすることもできますが、こうやってパレットで表示してもらえるのは、とても便利ですね。

スクリーンショットをGoogleドライブに保存できるGoogle Chrome 拡張機能

Webデザインの参考

スクリーンショット（キャプチャー画像）をとる

Webデザイン勉強中で、Webデザイン系のブログを書いていると、Webサイトのスクリーンショットを取る機会が多いと思います。
方法はいろいろありますが、私は以下を使うことが多いです。

ワンクリックでGoogleドライブに保存できる拡張機能

最近知ったのが、ワンクリックでGoogleドライブに保存できる拡張機能です。

Chromeウェブストアでダウンロード


拡張オプション

デフォルトは、「ページ全体の画像」ですが、拡張オプションで保存形式の選択が可能です。
Googleドライブに保存されていれば、どのパソコンからも取り出して使えるので便利かも、と思いました。

Googleドライブを全然使いこなしていないので、これを機会にもう少しいじってみよう。

無料ウェブサイト作成サービス「Wix（ウィックス）」が日本語版を12月11日にリリース

Webデザインの参考

Wix.comがついに日本語で新登場

Wixは、イスラエル生まれの無料オンラインウェブサイト作成サービスです。
テンプレートを選んで、簡単なドラッグ＆ドロップでサイトをカスタマイズするだけで、まるでプロ顔負けのWebページが作成できます。
ただ、英語やドイツ語、フランス語等はあっても、日本語版はなかったので、登録はしたものの、なかなか作成に至りませんでした。

昨日、Wix Teamから、日本語版リリースのメールが届きました。
今の仕事が片付いたら、早速さわってみたいと思います。

HTML5テンプレートのみ日本語対応

HTML5テンプレートのみ日本語対応で、以前のFlashで作成されたテンプレートは、日本語対応していません。
またWixのサイトは完全に日本語化されておらず、随時日本語に翻訳していくそうです。

テンプレートのカテゴリー

以下のカテゴリーが設定されていて、それぞれのカテゴリーからニーズに応じて細分化されたテンプレートがあります。

■Wixについて

インターネット利用者の知識や経験に関係なく、誰もがウェブサイトを持てるよう最先端のウェブサイト作成サービスを提供中。「フリーミアム」と呼ばれる事業モデルで、無料版を提供しつつ、eコマースや独自ドメインなどが必要な利用者にはプレミアム版を有料で提供している。
　2006年にアビシャイとナダブ・アブラハミ兄弟、そしてギオラ・キャプランによってイスラエルにて設立。WixはVenture Partners、DAG Ventures、Mangrove Capital Partners、Bessemer Venture Partners、Benchmark Capitalから出資を受けている。Wix本社はテルアビブ、支社はサンフランシスコ、ニューヨーク、ドニエプロペトロフスクにある。詳細は http://www.Wix.com を参照のこと。

無料で使えるjQueryのレスポンシブ・イメージスライダー

Webデザインの参考

jQueryのレスポンシブ・スライダーが使いたい時のために、メモしておきます。

◆基本的なjQueryイメージスライダー

シンプルで軽量な、jQueryイメージスライダーです。

◆レスポンシブサムネイル ​​ギャラリープラグイン

サムネイルがコンテナーの中に収まっています。

◆liteAccordion v2

横アコーディオンは以前に試してみましたが、V2になっているので、何か新しくなっているのかな。

詳しくは、下記サイトで確認出来ます。

25 A Must-Use Free Responsive jQuery Image Sliders

25 A Must-Use Free Responsive Image Sliders | Web Design Habits

新世代Web制作テクニック・総特集

Webデザインの参考

スマートフォン・ソーシャルメディア・WordPress

昨日、うちから一番近い図書館に、このインプレスムックがあったので借りて来ました。書店で見て、「買いたいけど高いなぁ」と思っていた雑誌です。
一番近いと言っても、「車10分＋フェリー30分+車30分」かかります。で、人口6万人弱の市立図書館なので、蔵書は期待できません。Illustratorのガイド本なんてCSになるまえのバージョンですもん（苦笑）

ですから、新刊書のコーナーにこれがあった時は、「おお〜」って感動しましたよ。
せっかく借りてきたので、Webデザインの勉強に活かしたいと思います。