【WordPress】無料テーマCocoonを基本カスタマイズしよう!!

ブログ

みなさんこんにちは。こうじです!

今回はWordPressのテーマカスタマイズについてお話していきたいと思っています。

テーマをカスタマイズすることで無料テーマのCocoonであってもそれなりに独自性を出すことができます。

テーマのカスタマイズって?

この記事で紹介する無料テーマのCocoonの初期設定では白と黒の非常にシンプルな色合いで、なんとなく味気ない感じがします。

そこで役に立つのが“カスタマイズ”なんです!

カスタマイズをすることによってサイトのキーカラー(基本の色)や文字の色、サイト上部に表示されるヘッダーのデザインなどを変えることができます。そうすることで自分好みのサイトを作ることができます!

※ヘッダーのカスタマイズは別に記事を投稿します!

Cocoonのテーマ基本カスタマイズ手順

無料テーマCocoonのカスタマイズは、WordPressの管理画面から簡単に行うことができます。

その手順について詳しく解説していきたいと思います!


カスタマイズの手順

①まずWordPressの管理画面を開く!↓この画面

②「Cocoon設定」→「スキン」をクリックしてね。

③使いたいスキンを選択してね!(画像マークを押すorカーソルを乗せるとイメージが見れるよ!)

決まったら「変更を保存」をクリック!

④次は「Cocoon設定」→「全体」をクリックしてね!

⑤ここからはたくさん項目があるからひとつずつ説明していくね!

サイトキーカラーはサイトのメインの色になるよ!

僕の場合はこの色です!

サイトキーテキストカラーはサイトのポイントとなるテキストの色を決めることができるよ!僕個人的には触らなくていと思うよ!

フォントを変えることができるよ!ここは本当に好みだね☺︎

ここでポイント!

読みやすいフォントがいいに決まってる!!

文字サイズを変えられるよ!おすすめは14〜16pxだよ!

文字色を変えられるよ!文字色は記事に書いてある文字の基本の色になります!

ここでポイント!

真っ黒よりも少しやさしめの色にしてあげると、読者様も読みやすいし、目の負担にもなりにくいと思うよ!

モバイルサイトの文字サイズを変えれるよ!ここの基本的に14〜16pxでいいと思います。

文字の太さを変えれるよ!400ぐらいでいいですよ!

⑧基本的にFont Awesome 5でいいよ!

注意点!

Font  Awesome 5では使えないフォントもあるので、その時はFont Awesome 4に変更してあげて下さいね!

サイトの背景色を変えられるよ!自分のお好みの色を選んでね!

サイトの背景画像を挿入することが出来るよ!もし挿入したかったら画像をアプロードしてあげてね!

サイト幅を整えることができます。任意でチェックをつけてください。僕はつけていません!

サイトのリンク色を変えることができます。大体のサイトは濃紺のイメージがありますよね^^

こんな感じです→https://kjstblblog.com/ (濃紺です!!!)

※自分が設定したい色にすればOKですよ!

⑬⑭はいじらなくてもOKです。

サイドバーの位置(左か右)を決めます。

ここでポイント!

サイドバーはサイトを開いたときに左右に出てくるバーです!ここにもいろいろなカスタマイズがあるのでお楽しみに^^

サイドバーのカスタマイズ

 

⑯上で決めたサイドバーの表示ページを変えることができます!表示したいところを選択しましょう^^

残りの部分は何も変えなくて大丈夫です。

本日のまとめ!

カスタマイズはサイトの雰囲気を左右する大事なものです!今回の記事ではその基本的なカスタマイズについて解説しました。

次からはもう少し詳しいカスタマイズについて解説していくのでお楽しみに!



さいごに

今回の記事はいかがでしたか?

もしこの記事に関してわからないことがあればコメントお願いします!

SNSもやっておりますのでそちらのDMでも質問受け付けております!!次回の記事もお楽しみに^^

 

コメント

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