タグ

ブックマーク / webdesignrecipes.com (28)

  • はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました(サンプルダウンロード)

    初めて WordPress でオリジナルテーマを作ろうと思ったとき、真っ先に参考にしたいのが公式のデフォルトテーマだと思います。でも最近のデフォルトテーマは、ちょっといろいろな機能もついていて複雑な構造をしています...。今回は初めて WordPress でオリジナルテーマを作りたい!っていう人向けに、シンプルなテーマをもとに制作フローをまとめてみました。サンプルはダウンロードしてご活用ください。 WordPress もバージョンアップを重ねて、最近では 3.5 になりました。それに伴ってデフォルトのテーマも、新しい TwentyTwelve になりました(2013年 1月現在)。WordPress で初めて自分だけのオリジナルテーマを作ろうと思うと、まず最初に参考にしたいのがデフォルトテーマ …。でも最近のデフォルトテーマは、ちょっと難しい構造になってる … と思ったりしませんか? 私が

  • WordPress で Web製作をしたいけど、PHP はまだちょっと … という人の PHP ガイド

    WordPress はとっても便利なブログツール。使い方さえ勉強すれば、HTMLCSSの知識がなくてもWebサイトを作成、運営することができます。そして HTML + CSS を勉強すれば、デザインを自分の好きなように変更することもできます。でも見た目のデザインだけじゃなくて、いろんな機能をつけたりカスタマイズしていくとなると、やっぱり PHP の知識が必要です。WordPress をカスタマイズしたいけど、PHP はまだ ... という人向けに、WordPressPHP について簡単にまとめてみました。 WordPressPHP(プログラム言語) + MySQL(データベース) で作られている、人気のブログエンジンです。最近ではブログじゃない一般的な Webサイトを、WordPress で作ってるっていう人も増えてきたように思います。WordPress を使えば、HTM

  • これからWebサイトの制作をしたいけど、何から勉強したらいいの?っていう人のためのガイド

    以前から、「Webサイトを制作をしたいけど、何から勉強したらいいの?」という質問をよく頂いていました。私が Web制作を勉強し始めた頃に比べると、最近はたくさん情報がありすぎて何から始めればいいのか迷う人も多いみたい …。なので今回は、Webサイトを作るのに必要な知識を簡単にまとめてみました。 最近だなを整理していて、もう読まなくなった Web制作系のを片付けたりしてみました。ずーっと前、Webサイトってどうやって作るんだろうってところから始まって、用語もよく分からないまま色んなを読んだりした頃を思い出します …。 Webサイトは HTML っていうものでできていて、CSS っていうもので、見た目をデザインしていくのかぁ … っていうことさえ、あの頃の私にとっては新しい発見だったなぁ … なんて思ったりしました。 最近では HTML5 とか CSS3 とか、私が勉強し出した頃に比べる

  • パンくずリストを作ってみるとWordPress でのサイト構築のコツがつかめるかもしれない(コード 付き)

    タイトルはパンくずリストなんですけど、パンくずリストを紹介する記事ではありません。でも、パンくずリストを自分で作ってみると分かるんですけど、パンくずリストのコードには、WordPress でのサイト構築のノウハウが詰まっているなーって思います。なのでパンくずリストを作りながら、WordPress でのサイト構築の考え方みたいなものを紹介する感じの記事になっています。 WordPress でブログじゃない Web サイト構築をするとき、サイトの構造によってはサイドバーなどを自分でカスタマイズしなくてはいけません。例えば固定ページを作ったら、親ページでは子ページへのリンクを表示したりとか、逆に子ページでは親ページのリンクを表示したりとか …。もちろんリンクだけじゃなくて、アイキャッチ画像なんかも一緒に表示したいこともあったりします。一般的な Webサイトを WordPress で作ろうとすると

  • Webデザイナー(私)によるWeb制作のときに気をつけてることや制作フローとかいろいろ

    私はフリーランスの Web デザイナーとして、クライアントさんの Web サイトを作成するお手伝いをさせていただいています。今回は、私が仕事でデザインするときに気をつけている事や、Web 制作のフローをまとめてみました ...。 Webサイトを作るとき、みなさんはどんな制作フローをたどって作ってますか?私はフリーランス仕事をしていて、最初から最後までひとりで作ることが多いです。今回はふだんデザインする時に気をつけてる事や、いつもしている Webサイトの作成フローをまとめてみました。もっと効率化できることがあるはずだなーと思いつつ、最初から最後までを書いてみました。 また、Webデザイナーってどんな仕事なのっていう質問をときどきいただくので … こんなことしてます … みたいな紹介です。これはあくまで私が Webサイトを作る時にしているフローで、他の Webデザイナーさんや制作会社さんと違

  • WordPressでブログじゃないWebサイトを作るときのいろいろ(サンプル付き)

    とても長い記事になってしまいましたが、WordPress を使って、コーポレートサイトのサンプルを作ってみました。WordPress はブログだけじゃなくて、色んな Webサイトが作れますよね!今回は、私が WordPress でサイトを作る時にやっていることをまとめてみました。 今までこのブログの中で、いろいろな WordPress の Tips を書いてきました。でも WordPress を使った Webサイトの作り方そのものは、今まで書いた事がありませんでした。そこで今回は、 WordPress を使ってブログじゃない Webサイトをまるごとひとつ作って、私なりの作り方をまとめてみました。 今回のサンプルサイトでは、WordPress の固定ページ機能はもちろん、カスタム投稿タイプやカスタムタクソノミー(カスタム分類)を使って作っています。 ページを表示する為に使っているテンプレート

  • CSSでレイアウトするなら絶対覚えておきたい配置のルール:フロートや絶対配置、z-index とかいろいろ

    最近改めて CSS の基、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基が分かってなかったんだなーと反省 ...。今回は CSS の基中の基、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS:初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で

  • CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました

    Webデザインをしていると、HTMLCSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦

  • 初心者の頃分からなかったWeb用語:フレームワーク … CSSからHTML5、WordPressまで

    Webを見ていると、フレームワークっていう言葉をよく目にします。初心者の頃は、このフレームワークっていうものがどんなものなのか、いまいち分かりませんでした。今回は、色んな例でフレームワークというものを紹介してみました。なので、フレームワークって何だろうっていう人向けの記事です! Web制作関連のブログを読んでいると、ときどきフレームワークっていう言葉がでてきます。例えば CSSのフレームワークとか、HTML5 + CSS3 のフレームワークとか …。 今でこそ、このフレームワークって何だかわかりますが、初心者の頃は、このフレームワークっていう言葉が何だか難しそうで、意味の分からないものでした(私だけ?)。何となく雰囲気で、使ってみると便利なのかなーという感じはしましたけど、そもそもフレームワークという言葉自体の意味が分かっていなかった頃は、使ってみよう!というところまで行きませんでした。

  • よくあるカスタマイズコード functions.php 多め

    WordPress のテーマを自作するときに、よく使っているコードのまとめです。主に functions.php に書いている基的なコードばかりです。私は仕事で Webサイトを作っているので、後半はクライアントさん向けの Webサイト用コードです。 私、Evernote を使ってるんですけど、WordPress をカスタマイズするコード … たくさんクリップしてあって、ちょっとごちゃごちゃしてきたので整理しました … X( その中から一般的に使えるコードだけまとめてみました。個人的によく使うコードなど、一カ所にまとめておきたいなーと思ったのでメモ書きです。全部 WordPress 3.2 になってから、テスト済みです。 WordPress のよくあるカスタマイズ 目次 セッティング関連 ソーシャルボタンを追加 抜粋表示、the_excerpt 関連 タイトルの文字数を制限して表示する 特

  • WordPressをカスタマイズするなら覚えておきたいアクションフックとフィルターフック

    WordPressのカスタマイズコードでよく見かける add_filter、add_action という関数。これは WordPressのプラグイン API という仕組みを利用したもの。プラグイン API - アクションフックやフィルターフックについて、大雑把ですがまとめてみました。 WordPress を使ってWebサイトを作る時、デフォルトの WordPress の動きを変更したいなーという時が多々あります。WordPress のデフォルトの動き(WordPress Codexでは振る舞いという言い方がされています。)でよく知られてるのは、記事を書くと自動的に <p> タグが入る … とかでしょうか。とにかくそういう WordPress の振る舞いを、何とかしたい場合ってありますよね。 こういった WordPress 独特の振る舞いは、WordPress のコアファイルと呼ばれてるとこ

  • 初めてWordPressを使ってみようという人の為の予備知識

    私も大好きな WordPress。これから WordPress を始めてみようかなと思ってる人や、インストールまではしたけど ... という人向けの記事です。カスタマイズなどについての記事ではないので、いつもの読者さん向きの記事ではないかもしれません。 このブログ – WebデザインレシピWordPress というキーワードで訪問してくれる人がとても多いんです。でも「WordPress」だけで、複合キーワードなしで訪れてくれているので、WordPress についての何を調べているのかなー …。 なので、今回は WordPress そのものについて、知ってる範囲でまとめてみました。WordPress って何?という漠然とした疑問を持ってる人、または、初めて WordPress を使う!という人向けの記事です。 初めての WordPress 目次 WordPress って何? WordPre

  • CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ

    Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。 この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事:CSSでレイアウトするなら絶対覚えておきたい配置のルール:フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね! New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS(Cascading Style Sheets、スタイルシート)ですね!今では CSS3 が話題を集めていて、CS

  • WebからEvernoteへ。私(Webデザイナー)がしているちょっとかわった情報整理術

    私はフリーランスで Web デザインをしています。仕事柄からか、毎日 feed を読んで Web の情報をクリップしてますけど、使わなければ無駄な時間を過ごしてるだけ ...。情報の精査、そしてその情報から得たものを、最終的に自分のものにするためにこんなことをしています ...。何だかまとまりなくて長くなっちゃったけど ... X( みなさんはどんな風にしてますか? 私は毎日 feed を読むのが習慣になっています。Webデザイナーなんて仕事をしているせいか、自分のスキルアップや仕事の効率化につながる情報がないかなーなんて思って、小さいながらアンテナを貼っています。feed だけじゃなくて、ツイッターや facebook を見るのもそんな感覚です。 でも、毎日そんな風に溢れてる情報に囲まれてると、情報の整理や自分のスキルアップにつなげるまでに、多すぎる情報で溺れてしまいます …。feed

  • デザインの基礎力をワンランクアップしたい私(Webデザイナー)の注意書き

    Webデザインは、紙の上のデザインと違うところも多いと思います。でも同じデザインですから、歴史ある DTP デザインから学ぶことはいっぱいあります。デザインの基礎の基礎、レイアウトについて、デザインするときに気をつけたい基礎の部分の注意書きです。 毎日インターネットを見ていると、素敵なデザインの Webサイトに出会います。ときにはひと目惚れしちゃうようなこともあります。そんなデザインにあったとき、どうして素敵なのかなーと考えるのも勉強のうち。そう思って素敵なデザインはストックしておいて、自分なりにそのデザインが素敵な理由を考えてたりします。 デザインの理由 どうしてそういうデザインをしたのか … デザインには理由があります。気まぐれに色を選んだり、要素を配置したりしないからです。なので自分のデザインの理由、どうしてそういう風にしたのかということを、口で説明できないとダメだと言われます。もち

  • CSS:初心者の頃にハマったスタイルシートのあれこれ … IE7多め

    CSS、スタイルシート。初心者のころには CSS のスタイルがうまくいかなくて、半日や丸一日悩んだこともいっぱいありました。最近では、やっとひと通り覚えて、思うようにできるようになったかなーという感じです。今回は初心者だったころ、ちょっと悩んだことなどをいくつかまとめてみました。 Webサイトの見た目をデザインしていくのに欠かせない CSS。度々これってどうやるんだろうとか、どうしてこうなっちゃうの?というものに遭遇します。また、今までは IE6 をターゲットに含めてましたけど、そろそろ IE7 からをターゲットにすればいいのかなーと思うこともあって、過去のスタイルシートの書き方の習慣を変えようかなとも思っています。 スタイルシートを書いていて、今まで遭遇した不具合やその回避方法、また今まではこうしてたけど、これからは変わるかもしれないなーといものをまとめてみました。もうそんなことしてない

  • サイト設計をする時に覚えておきたいポストタイプの特徴などいろいろ

    WordPress で Webサイトを構築する時に、設計の段階で知っておきたい投稿のタイプ(ポストタイプ)について、その特徴などをまとめてみました。とても長い記事になってしまい、うまくまとめられなかったかもしれません ... WordPress ... 奥が深いんだもん ... Webサイトを作るぞーってなってから、アップロードして公開するまでには、当にたくさんの色んな工程がありますよね。まず発信したい情報があって、誰に見てもらいたいとか考えて、設計してデザインして、コーディングして … 。 Webサイトを作るとき、いきなりデザインやらコーディングから始めるってことはありませんよね。今回は実際にデザインを始める前の段階、サイトの設計やワイヤーフレーム作りをする段階のお話。WordPress で Webサイトを作る時に、設計の段階で知っておくといいかなーと思う、ポストタイプ(’post_t

  • 私(Webデザイナー)が効率よく仕事するためにしているコーディング術や検索術

    みなさんも仕事の効率化、時間短縮のためにしていることってありますよね? 私ももちろんいろんな工夫をしているのですが、もっと効率よく仕事がしたいって思っています。 とりあえず、今、時間短縮の為に私がしていることをまとめてみました。 私は毎日 Webサイトを作るために、Photoshop を使ったり、コーディングしたり、調べものをしたり … とにかくいろんな作業をしています。そんな中、もっと時間短縮できないかなー、これって時間の無駄だなーと思うこともたくさんあります。1日は 24時間しかないし、決められた 24時間の中で自分の時間を作るためには、仕事の時間を圧縮するしかありません … X( できるだけ無駄をなくして、早く仕事が終われるように、時間短縮術をマスターしたいと思ってます。コーディングを早くできるようにしたりするものはもちろん、欲しい情報に素早くアクセスできるような工夫など、今私が時間

  • WordPressをカスタマイズするなら絶対覚えておきたいテンプレートファイルの使い方

    WordPressを使い始めた頃は、テンプレート階層、テンプレートファイルの上手な使い方などは、全く考えずに Webサイトを作ってました。 いまではもっと効率的に、もっとスマートにサイトを構築できるようになったかも!そのためにちょっと覚えておきたい、テンプレートファイルについてのあれこれをご紹介します。 WordPress というと、ブログ構築のための CMS(コンテンツマネージメントシステム)というイメージが強いですけど、一般的な Webサイトを作るの時にもとっても便利です。私も仕事で Webサイトを作る時に、WordPress で作成することがとても多いです。 WordPress はバージョンも 3.0 になって、カスタム投稿タイプやカスタムメニューなど、さらに CMS としても充実してきたように思います。 ブログと違って一般的な Webサイトは、そのサイトによって仕様が様々です。コン

  • デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則

    このブログ、Webデザインレシピのデザインをリニューアルしました。 この機会にデザインを勉強したことがない人でも、楽しくデザインをすることができるかもしれない、基原則 4つをご紹介します。 この原則は「ノンデザイナーズ・デザインブック」著者 Robin Williams で詳しく解説されています。 古いですが、とっても素晴らしいで今では新装増補版となって発行されているようです。 今回、このブログ – Webデザインレシピのデザインを、ガラッと変えてみました。これを機会にちょっとデザインの基というか、デザインをするときにガイドとなる、4つの原則をおさらいしておきます。Webデザインに限らず、会社で提出する報告書や学生さんのレポート、レストランのメニューなど、ページと呼べるものには全部当てはまると思うので、Webサイトを作るとかじゃなくても、知っておいて損はないかもしれませんね。 せっ