この記事では、cocoon初心者の方が、
ブログトップページをカスタマイズしたい時に参考になるサイトを手順に沿って紹介します。
- ブログの記事が増えてきたのでトップページを少しカスタマイズしたい
- グローバルナビ（タイトル下のカテゴリー欄）を設置したい
- トップページに【新着記事】【オススメ記事】【カテゴリー別記事】を作る方法がわからない
- いろんなサイトがあってどれを参考にすべきかよくわからない
こんな悩みの方に向けて、カスタマイズの手順を紹介します。
ちなみにこのように僕はこのようにイメチェンしました。
【before】
【after】
がらっとイメージが変わってると思います。(色を変更したせいもありますが)
スクショだとイメージしか伝わらないので構成を図で示します。
こんな感じです！伝わりましたか？
この記事を最後まで読めば、上の【after】のような構成がつくれます。
具体的にいうと、以下のような最低限のカスタマイズが網羅できます。
- トップページに【新着記事】【オススメ記事】【カテゴリー別記事】を表示
- グローバルナビの設置
- ブログのスキン（見た目）を変更
- ヘッダーのブログ名を、オリジナルロゴを変更
ちなみにこの記事を書いている僕は、
２ヶ月前にwordpressでブログを作成し、
カスタマイズは後回しにして記事の作り込みに専念してきました。
４０記事弱書き上げた時に、
少しサイトの雰囲気を変えたいなと思い色々なサイトを参考にしながら、
丸２日かけて、今のトップページのようにカスタマイズしました。
カスタマイズする時、わからないことが多すぎてその都度ネットサーフィンしてました。
色々調べながらやると、非常に効率が悪く疲れますよね。
そこで、どれだけ知識がない人でも、「この手順を守れば簡単にカスタマイズできる！」
という手順書のようなものを作ろうと思い、この記事を書きました。
全く知識がない僕でもできた方法なので、誰でも再現可能だと思います。
【手順１】バックアップを取ろう！
ブログをカスタマイズする前に、必ずバックアップを取りましょう。
「バックアップ」って聞くと、
めんどくさいなという気持ちになるかもしれませんが、心配無用です！
とりあえず、何も考えずにマナブさんのブログに従ってバックアップを取りましょう。
小学生でもわかるレベルでわかりやすく説明されているのでご安心ください。
バックアップが終わったらこの記事に戻ってきてくださいね！
参考：【とても簡単】WordPressのバックアップ方法【基本的に不要です】
バックアップは終わりましたか？
お疲れ様です！
バックアップって実質的には必要ないなんて初めて知りましたよね。
とても勉強になったかと思います！
一度設定してしまえば自動でやってくれるみたいなので安心ですね！
【手順２】トップページの編集
トップページに【新着記事】【オススメ記事】【カテゴリー別記事】を表示させる方法を解説します。
標準仕様のままだと、新着順に記事が並んでいるだけだと思います
記事数がふえてくると、カテゴリー別に記事を表示させてみたくなりますよね？
特に難しい知識も必要なく、手順に沿って進めていくだけの記事を紹介します！是非試してみてください！
参考：【超簡単！】Cocoonトップページをスッキリとサイト型へカスタマイズ！
できましたか？
とてもわかりやすい記事だったと思います。
他にも為になる記事がたくさんあるので、
cocoonユーザーの方はブックマークをおすすめします！
それではどんどん進みましょう！
【手順３】グローバルナビの設置
続いてはグローバルナビの設置です。
トップページ上部にカテゴリーが並んでいるアレです。
グローバルナビの設置については、こちらの記事が非常にわかりやすかったです！
参考：グローバルナビの設置方法を画像解説 ワードプレスCocoon編
【手順４】ブログのスキン等の「見た目」を変更
cocoonの見た目の設定は、cocoon設定から行います。
スキン・全体・ヘッダー、、、、色々ありますが、どこをいじればいいの！？
という方は、こちらのサイトを参考にしてください。
最低限の見た目・色を設定できます。
参考：Cocoonテーマの初期設定。サグラダファミリア的マニュアルを攻略せよ。
上のサイトを見て、ブログの配色などを設定しようとすると、
下の記事を読むと、「色が決められない、、、、」「色のコードがわからない、、、」という方もいらっしゃるかと思います。
そんな時はブログ全体のメインとなる色を決めて、
メインの色の同一色相・同一彩度の色を背景やその他の色に設定すると、
とりあえず無難な感じにはなります！
同一色相・同一彩度ってなに？
そんな方は、以下のサイトを参考にしましょう！
メインとなる自分の決めた色をクリックすると、同一色相・同一彩度のコードが出てくるので、非常に便利です！
【手順５】ヘッダーロゴの作成
デフォルトのままだとヘッダーのロゴは、
ブログのタイトル名が味気なく書いてあるだけだと思います。
無料でオリジナルロゴを作成したい！という方は、以下のサイトでが作成できます！
参考：LOGO MALER
オリジナルロゴを画像として保存したあとは、
先ほど紹介した以下のサイトにロゴの変更方法が書いてあったと思うので、
参考にしてみてください！
参考：Cocoonテーマの初期設定。サグラダファミリア的マニュアルを攻略せよ。
まとめ
いかがでしょうか。
僕がブログを簡単にリニューアルした時の手順をそのまま載せているので、
紹介したサイトを見ていただければ、それなりのリニューアルが出来たかと思います。