Cocoon-grayishでサイト型トップページ作れた！【初心者】簡単な方法

こんにちは！当ブログ管理人の苺と申します♪

苺

ブログ運営、今月で丸一年！！

昨年末からちょこちょこブログの外観を変えてきましたが、やっと！！！やっと！！！！自分の納得するページを作ることができました！！！

変更後。縦にスクロールできます

今回私が使用させていただいたのは、ななふさんが作られたスキン、Cocoon-grayish（グレイッシュ）です♪

「Cocoonでも、SWELLのようなスタイリッシュなデザインができるんだ……！」と大感動して、ななふさんのブログのマニュアルを読み漁りました。

その結果、初心者でもサイト型トップページを作ることができたので、実際やってみての感想をまとめたいと思います☆

管理人の前情報

・一年前に、1冊の本＆ネットの情報を基にブログ立ち上げ
・HTMLで文字を太字にすることすら躊躇するレベル

Contents（Jump可能↓）

ブログ型とサイト型の違い

（ブロガーの方は、読み飛ばしてください！）

私のブログは、長らくフツーの「ブログ型」というやつでした。基本的に、新着順に記事が並んでいるやつです。

＜参考＞サイト型に至るまでの当ブログの変遷

【立ち上げ当初】

おすすめカードやカルーセルを置いて、下に新着記事を並べています。

↓

↓

人気記事ランキングも並べるようになりました。

↓

今月、まずはCocoon-grayishのブログ型に変更した時のもの

※Cocoon-grayishは、ブログ型でも十分にスタイリッシュに見えますよね＾＾私、grayishに変更した時点で、メインビジュアルが大きいだけで、既にサイト型だと思っていましたｗ

↓

【New｜完成形｜現在】

Cocoon-grayishは特別なカスタマイズをせずとも、最初からオシャレに見えるスキンだと思います！

しかし、ななふさんのgrayishマニュアルを拝見していると、「もっと自由にカスタマイズしたい…！」という欲が湧いてくるのです。。。

サイト型で出来ること

・トップページの中身を自在に組める
・見せたい記事を上にしたり、カテゴリーごとに記事を分けたりできる
・冒頭にブログの紹介文or読者へのメッセージを載せられる

私は、＜ブログの紹介文を載せたい＋スタイリッシュな見え方に憧れる！＞などの気持ちを頂き、サイト型への変更を決めました。

まずは、とにかくマニュアルを熟読することが大事です。

CSSなど、難しいことが全く分からない私は、【ブロックを組み合わせれば、サイト型トップページが完成する】やり方を活用させていただきました。＞＞＞パターン組み合わせの解説ページ

しかし、上記リンクのページを上から下まで読み込むこと約10分。。。

苺

結局、どうやるんだ？！

致命的な読解力不足で、頭が混乱状態ｗｗ（※普通は理解できると思います。私の知識不足です×）

ということで、過去にCocoon-grayishでサイト型ページを作られた先輩ブロガーさんの【感想投稿記事】なんかも探しつつ、分かりやすそうな情報を集めていきました。

その結果判明したのは……、

サイト型を作る手順

①もしもの時のために
大幅なカスタマイズなので、万全を期してバックアップを取る

私は、復元する時の手順が簡単な「UpdraftPlus」をダウンロードしました。1年運営して初めてバックアップを取りました（←この事実も相当やばい）
②プラグインをダウンロード
CSSのプラグインを有効化

こちらページの下部にある「Github」からCSSを自分のパソコンにダウンロードする。その後、「プラグインのアップロード」からデータをアップし、有効化。
③パターンデータのダウンロード
トップページで使いたい素材たちを入れる（パターンデータのダウンロード）

デモページを見ながら、どの素材を使いたいか、その名前のjsonファイルをダウンロード⇒WordPress【外観】⇒【パターン】に進み、【新規】アップロードしていく。