• HOME
  • Web制作
  • Wordpressを好きなデザインで作るには?カスタマイズより簡単な方法とは

WordPressを好きなデザインで作るには?カスタマイズより簡単な方法とは

 
 

こんにちは、インフルエンザの襲来に恐々としています、webデザイナーキリカブです。

WordPressを自分好みのレイアウトにしたい!そんな時は

WordPressのサイトを自由に好きなデザインにする方法、何だかわかりますか?
カスタマイズ?そうそう、それもひとつの方法ですね。自分の好みや、作りたいサイトに近いテンプレートを見つけてそれをカスタマイズする。

ただ意外と、テンプレート次第ではカスタマイズしづらかったり、プログラム的な制限があったりして「ムキーッ!」となること、結構あります。
カスタマイズは、特にレイアウトにこだわりがなかったり、ほんの何箇所かのデザイン替えならいいんですが、自分が考えているのとほぼ同じテンプレートがなかなかない場合は逆に手間がかかります。

オリジナルのデザインを採用したい場合、1番簡単なのは、実は「自分でテンプレートを作る」ことなんです。
以下、オリジナルテンプレートの作成の流れを大まかにご紹介します。

手順①レイアウトを決めてデザイン見本を作る

レイアウトを決め、illustratorやphotoshopなどのグラフィックソフトを使用してのデザイン見本(イメージファイル)を作成します。
最近はphotoshop ccがweb制作と非常に連携しやい機能がたくさんあり、おすすめです。

直接コーディングをするより、色の組み合わせやUIデザインをイメージにしておくことで、この後のコーディングがスムーズに進みます。

またここでロゴやファビコンなどの画像やバナーを作ると、コーディングの際に使えます。
コーディングで迷った際はこのイメージファイルを開き、オブジェクトの大きさやスペース、カラーコードを確認します。

注意するポイント

●作成する予定のサイトと全て同じサイズで作成する
●どのページでも使うパーツ、例えばタグボタン等は、ページの種類が違っても(index.php,single.php,archive.php…)なるべく同じサイズ、見た目で作成する。(後のCSSの作業が楽なのと、見た目を揃えるため)

手順②テキストエディタでコーディング

デザインが決まったら、テキストエディタでコーディングをします。ここまでは通常のフルHTMLコーディングのサイトと同じ手順です。

注意するポイント

●どのページでも使うパーツ、例えば自動抽出で表示する記事のボックスなどは、配置の位置やパーツのCSSをなるべく同じもので使い回すようにする。
→ 後で修正する時に楽

手順③テンプレート化しWordpressに組み込む

この記事もおすすめ