WordPressのオリジナルテーマ-サイトデザイン

WordPressやHTML、CSS、PHPの学習になると思い、今回はあらかじめ用意されているテーマを使用するのではなく、オリジナルでテーマを作成することにしました。

前回書き忘れましたが、対象にしている人はHTMLとCSSの基礎知識があるレベルです。
1からWebページを作ったりはできなくても、コードを読んで調べれば何が書いてあるのかは理解できるくらいのレベルを想定しています。
今現在知識がなくても、教本を1冊読んで練習問題を一通りこなせば到達できるレベルです。実際オリジナルテーマ作成前の自分がそうでした。

日頃他の人のブログを見て、何となく自分にとって欲しい機能や見やすいデザインがあったので、とりあえずそれを形にしてみることにしました。
コンセプトとしてはとにかくシンプルに、カテゴリーやアーカイブなどのサイドバー部が長くなりすぎないようにしました。
下の画像が始めにノートに書いたイメージ図をマウスで書いて再現したものです。

サイトデザイン

その際、欲しい機能も一通り考えました。以下がそれです。

  1. ロゴの下のヘッダー部にabout(サイト紹介とプロフィール)とキーワードで記事検索機能を付けたい
  2. サイドバーにはTwitter、最新記事(件数少な目)、アーカイブ、記事のカテゴリ、タグクラウドを表示したい
  3. アーカイブは折り畳みで年だけ表示してクリックすると月も表示されるようにしてスペースを取らないようにしたい
  4. 売れてほしいものやはまっているものを宣伝したいので広告スペースも欲しい
  5. 一番上へ戻るボタンが欲しい
  6. ヴィジェットにも対応させたい
  7. 記事を投稿したら連動してツイッターにもそのことよく見るうまくまとまった形式で投稿したい

これと書いたサイトデザインががテーマの仕様書(とも呼べないお粗末なものですが…)となります。
もしページごとにサイドバーの有無など細かくデザインを変えるのならばそのページのデザインもする必要があります。
しかし自分は記事本文のページやサイト紹介の固定ページもそのままのデザインでいくつもりだったため、サイトデザインのイメージ図はこれのみです。

最後にオリジナルテーマが完成してから描いた、こういう感じで書けばよかったと思ったサイトデザイン図を上げておきます。

サイトデザイン清書
PC画面デザイン

今回は自分はすっかり忘れていて後々苦労しましたが、スマホやタブレットの画面用のデザインも考えておくといいでしょう。
スマホ画面用のデザインも載せておきます。

サイトデザインスマホ用
サイトデザインスマホ用

「サイトデザイン」で検索すれば参考になりそうな素晴らしいデザインのサイトをいくつも見ることができます。
後々悩みたくなければそれぞれの文字の大きさ、各要素の感覚なども決めておくとCSSを書く際にスムーズにいきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です