このWEBサイトは「WordPress」で作っており、無料テーマの「Cocoon」を使っています。
前回に続き今回も準備編となってしまいました。
サイトを作成やカスタマイズしようと思っても、元になるデザインが無いと進めないので、今回はその辺りを書いていこうと思います。
1. サイトデザインを考える
誰もがそうとは限りませんが、サイトを作る上で先にデザインを考えておく事は必要です。
作りながら考える方もいるでしょうが、慣れていないと結局遠回りになったり、最初の趣旨とズレてきてしまいます。
ラフでも良いので、大まかであれ先に考えておくのは最低限必要と思います。
私はトップページの構想は以下のように考えていました。
他にも「投稿ページ」と「ブログページ」の3つのデザイン案を考えました。
2. 最初に決めておいた方が良い点
2-1. 色
サイト上で使う色を決めておくと、カスタマイズしていく上で迷わなくなります。
Cocoonは最初から各CSSクラスに色が設定されている箇所が多いです。
それらを変更していくと、途中でどの色に変更すれば良いか迷います。
●ベースカラー ●サブカラー ●ピックアップカラー
出来れば色は多くても3パターンで抑えた方が、見る側からすれば見やすくなります。
場所によっては各カラーの彩度を変更すれば良いと思います。
「テキストカラー」も
●テキストカラー ●リンクカラー ●リンクホバーカラー
の3パターンで十分と思います。
Cocoonでは最初は以下のテキストカラーになっています。
テキスト {
color: #333;
}
a {
color: #1967d2;
}
a:hover {
color: #e53900;
}
この「やっぱ垂水やん」を作る時パステルカラーにしたかった為、以下のサイトを参考にしました。
2-2. 画像サイズ
貼り付ける画像のサイズを最初に決めておく事をお勧めします。
画像のサイズは色々とあり、「16:9」「4:3」「3:2」「1:1」等様々です。
私は最初「4:3」でやろうとしていましたが、縦に大きくなってしまう為途中で「16:9」に変更しました。
しかし変更する前にアップしていた画像の手直しを余儀なくされ、少々面倒な事になりました。
画像のキャッシュが中々消えない事や、特にサムネイルのサイズが変更されない為メディアページで一つひとつ編集しました。
そういった事をしない為、最初に画像の比率を決めておくと後々後悔しないと思います。
画像（メディア）の設定はCocoonの「画像」タブからでも出来ますが、WordPressの「設定」→「メディア」もしっかり設定しておく事をお勧めします。
さいごに
以上で大体の準備は整ったと思いますので、次回からは実例を元にトップページのカスタマイズをおこなっていこうと思います。
コメント