【WordPress】Cocoonのデザインをカスタマイズしよう<準備編2>

【WordPress】Cocoonのデザインをカスタマイズしよう<準備編2>
スポンサーリンク
2022.07.04

このWEBサイトは「WordPress」で作っており、無料テーマの「Cocoon」を使っています。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

前回に続き今回も準備編となってしまいました。
サイトを作成やカスタマイズしようと思っても、元になるデザインが無いと進めないので、今回はその辺りを書いていこうと思います。

スポンサーリンク

1. サイトデザインを考える

誰もがそうとは限りませんが、サイトを作る上で先にデザインを考えておく事は必要です。
作りながら考える方もいるでしょうが、慣れていないと結局遠回りになったり、最初の趣旨とズレてきてしまいます。

ラフでも良いので、大まかであれ先に考えておくのは最低限必要と思います。
私はトップページの構想は以下のように考えていました。

他にも「投稿ページ」と「ブログページ」の3つのデザイン案を考えました。

2. 最初に決めておいた方が良い点

2-1. 色

サイト上で使う色を決めておくと、カスタマイズしていく上で迷わなくなります。
Cocoonは最初から各CSSクラスに色が設定されている箇所が多いです。
それらを変更していくと、途中でどの色に変更すれば良いか迷います。

●ベースカラー ●サブカラー ●ピックアップカラー
出来れば色は多くても3パターンで抑えた方が、見る側からすれば見やすくなります。
場所によっては各カラーの彩度を変更すれば良いと思います。

「テキストカラー」も
●テキストカラー ●リンクカラー ●リンクホバーカラー
の3パターンで十分と思います。

Cocoonでは最初は以下のテキストカラーになっています。

テキスト {
  color: #333;
}
a {
  color: #1967d2;
}
a:hover {
  color: #e53900;
}

この「やっぱ垂水やん」を作る時パステルカラーにしたかった為、以下のサイトを参考にしました。

パステルカラー - Pastel Colors
パステルカラーのカラーコードが一目でわかるWEB色見本

2-2. 画像サイズ

貼り付ける画像のサイズを最初に決めておく事をお勧めします。
画像のサイズは色々とあり、「16:9」「4:3」「3:2」「1:1」等様々です。

私は最初「4:3」でやろうとしていましたが、縦に大きくなってしまう為途中で「16:9」に変更しました。
しかし変更する前にアップしていた画像の手直しを余儀なくされ、少々面倒な事になりました。
画像のキャッシュが中々消えない事や、特にサムネイルのサイズが変更されない為メディアページで一つひとつ編集しました。

そういった事をしない為、最初に画像の比率を決めておくと後々後悔しないと思います。
画像(メディア)の設定はCocoonの「画像」タブからでも出来ますが、WordPressの「設定」→「メディア」もしっかり設定しておく事をお勧めします。

スポンサーリンク

さいごに

以上で大体の準備は整ったと思いますので、次回からは実例を元にトップページのカスタマイズをおこなっていこうと思います。

個人ブログ

ページ・ナビゲーション

コメント

タイトルとURLをコピーしました