カテゴリー: コーディング

WordPress オリジナルテーマの作り方

WordPressのオリジナルテーマの作り方について説明していきます。慣れると簡単なのですが、初心者には少し難しいWordpressのカスタムデザイン。Wordpressのテーマがどのように動くのか、スタティックのHTMLテンプレートにどうやってWordpressの機能をつけるのかを説明していきます。PHPの知識は必要ありませんが(もちろんあった方が楽ですが)、自分でデザインをするためのPhotoshopとCSSの知識は必要です。前回に引き続き、Nick La氏によるWeb Designer Wallを参照しています。

続きを読む

WordPressをローカルにインストールする

WordPressのオリジナルテーマの作り方について、今回より3作に分けて説明していこうと思います!まず1つめの記事:Wordpressをローカルにインストールする方法。ローカルで操作するとファイルをいちいちアップロードする手間が省けるので時間の節約にもなります。参照Webサイトは私の敬愛する世界的に有名なブロガーの一人、Nick La氏によるWeb Designer Wall。このサイトのデザインも素敵なのでぜひ覗いてみてください!

続きを読む

Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する

Webサイトのデザインを始める前に、レイアウトやページ内で使われる機能を「設計図」として作っておきます。ワイヤーフレームと呼ばれるWebサイトの骨組みをしっかり作っておくと、デザインする段階でスムーズに仕事がすすみます。またクライアントとの打ち合わせでも大活躍。ここではワイヤーフレームを作る為の便利なオンラインツールと「ワイヤーフレームは手描き派!」という人のためのPDFテンプレートを紹介します。

続きを読む

迷惑メールのこないEメールアドレス表示方法

EメールアドレスをWebサイトに表示させたい。でも迷惑メールは受け取りたくない… 誰もが思っていることですよね。一般的にはEメールアドレスを画像にして公開しているWebサイトが多いと思います。画像以外に表示する方法はないかな?と思っていたところ、techblog.tilllate.comのSilvan Muhlemann氏がCSSを使った迷惑メール対策を紹介していました。その中からCSSを使ったすぐにでも実装できる簡単な方法を紹介します。

続きを読む

Webサイトの構成図を簡単に作れる便利ツール

Webサイト制作の準備編2:Webサイトの構成図(サイトマップ)。どのページがどこへリンクするのか、ページの重要度など、Webサイトの構成を図にまとめておくと製作途中で変更があった場合でも整理しやすくなります。Webサイトの構成図を作るときのポイントと便利なオンラインツールをまとめてみました。

続きを読む

CSSスプライトで画像を円滑に表示させる

CSSスプライトとは、複数の画像をひとつにまとめて、CSSでポジションを指定することにより表示させるCSSの技のひとつです。画像の数を減らすことにより、サイトの表示を速めることができます。以前よりYoutubeなどに使用されているので、その名前を一度は聞いたことがあるかもしれません。ここではCSSスプライトを使用したメニュー画像の作り方を紹介します。

続きを読む

誰のため?何のため?Webサイトを作り始める前に。

こんにちは!ついにWebクリエイターボックスのサイトが完成しました!これからこのサイトと、制作者のManaをよろしくお願いします!さて、さっそくですが最初の記事、Webサイトを作る前にすること。突然Photoshopを立ち上げてデザインを始めても、ユーザーが必要とするWebサイトが出来上がる可能性は極めて低いと思います。デザインやコーディングを始める前に、「このWebサイトは何のために作るのか」「誰がどのようにこのサイトを使うのか」をまとめておきましょう!

続きを読む