タグ

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

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

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

  • functions.phpに書いておくといいかもしれないコードいろいろ

    WordPress の便利なオプションファイル functions.php。 これに数行追加するだけで、当にいろんなことができちゃいます。今回は、functions.php に書いておくといいかもしれないコードをいくつかまとめてみました。 WordPress のテーマの中で利用する functions.php。このファイルがかなり便利で、私はいろいろと functions.php に書き込んでいます。よくプラグインとかウィジットを使えばいいじゃないかーとも言われたりしますが、プラグインは厳選して重要なものだけを使って functions.php でできるものは、できるだけそうしたいなーと思っています。 プラグインが増えればその分ファイルの読み込みが多くなって、少なからず速度も落ちるかな … とか、プラグインの管理ページがごちゃごちゃするのがイヤだーとか、そんな程度の理由なんですけど …。

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

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

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

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

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

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

  • Webデザイナー(私)によるタイポグラフィーレイアウトの注意書き

    私は DTP デザインが苦手です ...。でもときどきお客さんから、フライヤーとかポスター、名刺なんかの紙のデザインを頼まれます...。そこでもっと勉強しなくちゃいけないなーと感じていたのが、タイポグラフィーについてのこと。今回はタイポグラフィーとそのレイアウトについて学んだことをまとめてみました。 以前グラフィックデザインをしている先輩に、グリッドシステムや揃えるだけがデザインじゃないし、もっとタイポグラフィーやレイアウトのことを勉強しなさいと言われました …。私は普段、Webデザインしかしていないんですけど、ときどきフライヤーやポスターのデザインを、ついで仕事のような形で頼まれる事があります …。 でも、Webデザインしかしてこなかった私は、紙媒体 – DTP デザインが苦手です …。ちょうど 1年くらい前にも同じような記事、Webデザイナー(私)によるDTPデザイン注意書き:Webと

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

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

  • Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き

    今回このブログ - Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries(メディアクエリ)。メディアクエリの使い方や感想、気をつけたい注意書きをまとめてみました! 遅ればせながらこのブログ – Webデザインレシピを、スマートフォンでも見れるように改修しました。このブログは WordPress で書いているので、スマートフォンや iPad への対応方法はいくつもあるのですが、今回は CSS3 の Media Queries(メディアクエリ)を使って、iPadiPhone など、いろんなデバイスに対応(対応というか、一応見れる程度)にしてみました。 なので Media Queries を使ったスマートフォン対応と、リデザインしながら思ったことなどをまとめてみました。 CSS3 Media Queries 目次

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

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

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

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

  • イメージスライダーを付けてみよう

    それでは順を追って説明していきますね。ダウンロードしたファイルを解凍すると、以下のようにたくさんのファイルやフォルダがありますね。今回は Anything Slider を使っていますが、大体どんなプラグインも似たような構成になっていると思います。 anythingslider folder 2. HTMLをマークアップ HTML ファイルがいくつかありますが、これはデモ用のファイルです。プラグインによっては 1枚しかない場合も多いですね。Anything Slider の場合は、たくさんのデモファイルが用意されています。これら HTML ファイルは、HTML でのマークアップを参考にしたりするのにも使えますよね! それではデモファイルを参考にして、HTML をマークアップしていきましょう。今回は一番シンプルなスライダーを作ってみたいと思います。マークアップは単純に<ul>と<li>で画像

  • 1