【WordPress/Cocoon】トップページをブログ型→サイト型へカスタマイズ！画像付きでわかりやすく解説！HTMLやCSSがわからなくてもOK！

cocoonでブログ作ったけどトップページがかっこよくないんだよなぁ・・・。

そうなんです！ブログ始めたての時に誰もが直面する問題！
それ解決しましょう！しかも意外と簡単なんです！

まず僕が参考にしたはまちゃんさんの「婿養子の島根移住ブログ」の下記記事を参考にしました！

そこから少しだけ自分様にカスタマイズしました！より初心者でもわかりやすいようにその詳細を本記事ではご紹介します！

↓他の記事もめちゃくちゃわかりやすくて参考になります！おすすめです！
【Cocoon】脱ブログ！固定ページでサイト型トップページにカスタマイズする方法

僕がワードプレスのテーマ「cocoon」を使用している事が前提になりますので他のテーマの方は少し手順が変わったりする可能性があるのでご了承ください！

手順はこれだけ！
固定ページの作成
まずトップページのソースコードはこちら！
自己紹介ブロック
人気記事・最新記事のブロック
カテゴリ別の最新記事のブロック
CSSで見栄えを調整
設定でサイドバーや広告の削除
管理画面で固定ページをトップに表示する様に変更

手順はこれだけ！

固定ページを作成
ソースコードの貼り付け
カテゴリや表示数を自分好みにカスタマイズ
CSSで見栄えを調整
設定でサイドバーや広告の削除
管理画面で固定ページをトップに表示する様に変更

固定ページの作成

WordPressにログインしてからダッシュボードの「固定ページ」から新規作成をしてください！

タイトルについては表示されないのでなんでもいいです！
とりあえず「あああああああ」にしておきます！

そのあと右上の縦並びの「…」から「コードエディター」を選択してください！

すると画面が少し変わります！

ここの「テキストまたは　HTML　で書き始める」というところに、
「まずトップページのソースコードはこちら！」のソースを必殺の”コピーアンドペースト“！

これだけでおおよそは完成ですｗ
ここからあなたのブログに合わせてカスタマイズしていきます！！

まずトップページのソースコードはこちら！

まずはこちらをコピーアンドペーストしてください！

僕のブログのトップページは大きく分けて３つに分けて構成されています。

自己紹介
人気記事・最新記事
カテゴリ別の最新記事

各ブロックに分けて少しずつ解説していきますね！

<h2 style="text-align: center;">（ここはタイトル的な部分です！）『エンターテインメイド』とは</h2>
<div class="speech-wrap sb-id-5 sbs-flat sbp-l sbis-cb cf">
<div class="speech-person">
<figure class="speech-icon"><img class="alignnone size-medium wp-image-144" src="http://entertainmaid.com/wp-content/themes/cocoon-master/images/man.png" alt="" width="300" height="300"></figure>
</div>
<div class="speech-balloon">

エンターテインメイドの管理人は<span class="marker-under-red">元SE</span>、<span class="marker-under-red">元営業</span>、<span class="marker-under-red">元劇団団長</span>。

<span class="marker-under">・映画</span>

<span class="marker-under">・ゲーム</span>

<span class="marker-under">・漫画</span>

<span class="marker-under">・雑記</span>

<span class="marker-under">・ブログ運営</span>

などについて発信していきます。

</div>
</div>
<p style="text-align: center;"><a class="btn btn-light-blue btn-m" href="https://twitter.com/entertainmaid" target="_blank" rel="noopener noreferrer">Twitterをチェック</a></p>

<div class="column-wrap column-2">
<div class="column-left">
<h3 style="text-align: center;">人気記事</h3>
<strong><span class="marker-under">[popular_list days="all" rank="0" pv="0" count="5" type="1" cats="all"]</span></strong>

</div>
<div class="column-right">
<h3 style="text-align: center;">新着記事</h3>
<strong><span class="marker-under">[new_list count="5" type="1" cats="all" children="0" post_type="post"]</span></strong>

</div>
</div>
<h2 style="text-align: center;">カテゴリ別の最新記事</h2>
<div class="column-wrap column-2">
<div class="column-left">
<h3 style="text-align: center;">映画</h3>
<p style="text-align: center;"><span class="marker-under"><b>映画のレビュー記事です</b></span></p>
<strong><span class="marker-under">[new_list count="5" type="1" cats="●" children="0" post_type="post"]</span></strong>
<p style="text-align: center;"><a class="btn btn-light-blue btn-m" href="https://entertainmaid.com/category/movies/">このカテゴリをもっと読む</a></p>

</div>
<div class="column-right">
<h3 style="text-align: center;">ゲーム</h3>
<p style="text-align: center;"><span class="marker-under"><strong>ゲームのレビューや攻略情報です</strong></span></p>
<strong><span class="marker-under">[new_list count="5" type="1" cats="●" children="0" post_type="post"]</span></strong>
<p style="text-align: center;"><a class="btn btn-light-blue btn-m" href="https://entertainmaid.com/category/games/">このカテゴリをもっと読む</a></p>

</div>
</div>
<div class="column-wrap column-2">
<div class="column-left">
<h3 style="text-align: center;">アニメ・漫画</h3>
<p style="text-align: center;"><span class="marker-under"><strong>アニメのレビュー記事です</strong></span></p>
<strong><span class="marker-under">[new_list count="5" type="1" cats="●" children="0" post_type="post"]</span></strong>
<p style="text-align: center;"><a class="btn btn-light-blue btn-m" href="https://entertainmaid.com/category/anime-manga/">このカテゴリをもっと読む</a></p>

</div>
<div class="column-right">
<h3 style="text-align: center;">雑記</h3>
<p style="text-align: center;"><span class="marker-under"><strong>その他の記事です</strong></span></p>
<strong><span class="marker-under">[new_list count="5" type="1" cats="●" children="0" post_type="post"]</span></strong>
<p style="text-align: center;"><a class="btn btn-light-blue btn-m" href="https://entertainmaid.com/category/random-note/">このカテゴリをもっと読む</a></p>

</div>
</div>
<div class="column-wrap column-2">
<div class="column-left">
<h3 style="text-align: center;">海外ドラマ</h3>
<p style="text-align: center;"><span class="marker-under"><strong>おすすめ海外ドラマ記事です</strong></span></p>
<strong><span class="marker-under">[new_list count="5" type="1" cats="●" children="0" post_type="post"]</span></strong>
<p style="text-align: center;"><a class="btn btn-light-blue btn-m" href="https://entertainmaid.com/category/dorama/">このカテゴリをもっと読む</a></p>

</div>
<div class="column-right">
<h3 style="text-align: center;">ブログ運営</h3>
<p style="text-align: center;"><span class="marker-under"><strong>ブログ運営の記事です</strong></span></p>
<strong><span class="marker-under">[new_list count="5" type="1" cats="●" children="0" post_type="post"]</span></strong>
<p style="text-align: center;"><a class="btn btn-light-blue btn-m" href="https://entertainmaid.com/category/blog/">このカテゴリをもっと読む</a></p>

</div>
</div>

自己紹介ブロック

まずはこの自己紹介ブロックの解説をします！
僕の場合は最初に自己紹介をつくりましたが、
「私は自己紹介は無しでいきなり記事を表示でOK！」という人は下記のソースコード部分だけを削除してここは飛ばしてください！

↑の画像の赤枠内はソースコード内だと↓の部分になります。

コードエディターの時にしてもらいたい作業は、

ツイッターのリンク部分のURL”●あなたのツイッターのURL●”の部分をリンクさせたいTwitterのURLに変更。
ついでに target=”_blank” を入れる。
吹き出しのアイコン部分のURL”●あなたのブログのURL●”の部分をあなたのブログのURLにする！
例）僕の場合は
“http://entertainmaid.com/wp-content/themes/cocoon-master/images/man.png”

解説 
「ついでに target="_blank" を入れる。」はツイッターを開く際に別のタブで開く様に設定しています。

<h2 style="text-align: center;">（ここはタイトル部分です！）『エンターテインメイド』とは</h2>
<div class="speech-wrap sb-id-5 sbs-flat sbp-l sbis-cb cf">
<div class="speech-person">
<figure class="speech-icon"><img class="alignnone size-medium wp-image-144" src="●あなたのブログのURL●/wp-content/themes/cocoon-master/images/man.png" alt="" width="300" height="300"></figure>
</div>
<div class="speech-balloon">

エンターテインメイドの管理人は<span class="marker-under-red">元SE</span>、<span class="marker-under-red">元営業</span>、<span class="marker-under-red">元劇団団長</span>。

<span class="marker-under">・映画</span>
<span class="marker-under">・ゲーム</span>
<span class="marker-under">・漫画</span>
<span class="marker-under">・雑記</span>
<span class="marker-under">・ブログ運営</span>

などについて発信していきます。

</div>
</div>
<p style="text-align: center;"><a class="btn btn-light-blue btn-m" href="●あなたのツイッターのURL●" target="_blank" rel="noopener noreferrer">Twitterをチェック</a></p>

ここまでやれたらあとは「コードエディター」→「ビジュアルエディター」に戻して入力する文字を好きに変更してください！
その際に吹き出しの画像を自分のアイコンにするといいと思います！

カテゴリ別の最新記事のブロック

ここは少しだけ作業が必要です。

カテゴリにはそれぞれ内部的に番号が振られているのでその番号を指定してあげる事でそのカテゴリを表示するようになります。

下記画像の cats=”●” の●をあなたのブログの表示させたいカテゴリIDにしてあげるだけです！
それではあなたのブログのカテゴリIDの調べ方を解説します！

管理画面の左の「投稿」の「カテゴリー」を開くとこの様な画面になります。

たとえば僕の場合で「アニメ・漫画」カテゴリを表示させる際はこの「アニメ・漫画」のリンクの上にカーソルを置くだけ！（クリックはしないです！）

すると下にURLが出てきます。
この”tag_ID=2″ がIDになります！

なのであなたの表示させたいカテゴリのIDはここで確認してください！

CSSで見栄えを調整

ここまでで８割は完成です！
あともう少しなので頑張りましょう！

固定ページの最下部まで行くと「カスタムCSS」というところがあるのでそこに下記ソースを入力しましょう！
各ソースにどの様な変更があるのかコメントをつけているので必要に応じて削除や変更してください！

/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
display: none;
}
/*フロント固定ページのシェアボタンを非表示*/
.home.page .sns-share{
display: none;
}
/*フロント固定ページのフォローボタンを非表示*/
.home.page .sns-follow{
display: none;
}
/*フロント固定ページの投稿日を非表示*/
.home.page .post-date{
display: none;
}
/*フロント固定ページの更新日を非表示*/
.home.page .post-update{
display: none;
}
/*フロント固定ページの投稿者名を非表示*/
.home.page .author-info{
display: none;
}

/*吹き出しの横幅調整*/
.speech-balloon{
width:100%;
}
/*各記事の画像サイズ調整*/
.widget-entry-cards figure{
width:30%;
}
/*見出しの色変更 その１*/
.article h2{
background-color:#f39800;
color:#fff;
}
/*見出しの色変更 その２*/
.article h3{
border-left: 7px solid #f39800;
}

解説 
見出しなどの色を変更したい際はこの#の後を変更すると変えられます。
【background-color:#f39800;】　→　背景色
【color:#fff;】　→　文字の色

カラーコードはこちらのサイトを参考にしてください。
カラーコード一覧

設定でサイドバーや広告の削除

今のままだと目次や広告が表示されているかと思います。
次はこちらを消す方法です！

まずは「広告設定」の「広告を除外する」にチェックをいれて無駄な広告をトップページから消します。

同じ様に「ページ設定」の「読む時間を表示しない」と「目次を表示しない」をチェック入れます。

「ページタイプ」については僕の場合はサイドバーを削除したかったので「１カラム（広い）」を選択。サイドバーが欲しい人は「デフォルト」を選択のままでOK！

管理画面で固定ページをトップに表示する様に変更

最後にここまで作り上げたトップページを現状のトップページと差し替える設定をします！

「設定」の「表示設定」から「ホームページの表示」を固定ページにしてください！
そしてここで~~適当につけた~~固定ページのタイトルを選んで変更保存で完成です！！！