Cocoonのトップページをサイト型に変える方法【初心者にも簡単】

【簡単です】Cocoonのトップページをサイト型に変える方法未分類

今回は、Cocoonのトップページをサイト型に変える方法について話します

こんにちは。仕事術に関する情報を発信している寺場友達(@terabais)です。

 

この記事はこのような人に向けた内容になっています。

Cocoonを使ってブログを運営してるけど、トップページのデザインを変えたいな。簡単に変える方法を知りたい。

ブログを運営している人にかなり利用されている無料テーマのCocoon。デザインがシンプルで非常に素晴らしいテーマです。

しかし、トップページが新着記事を順番に見せているだけなので、初めて見る人にとってはなんだかわかりづらいものがあります。

 

この記事では、Cocoonのトップページの変更方法、そして記事の最後に細かいカスタマイズの方法を紹介します。

トップページをサイト風にしたい、トップページのカスタマイズする方法を知りたいという人は、この記事を読む価値があるのでぜひ最後までご覧ください。

Cocoonのトップページの変更方法

Cocoonのトップページの変更方法

まず最初にこの記事は、はまちゃん様の【Cocoon】脱ブログ!固定ページでサイト型トップページにカスタマイズする方法という記事をもとに作成しています。

なので、ぶっちゃけ言えばその記事を見てしまえばすべてわかります。

ですが僕の記事も読んでほしい!ということで、はまちゃん様の記事とは違いシンプルに説明していきます。

実際にトップページを作成したからこそわかる意見も書いてありますので、その点を知りたいという方は当記事を読んでみてください。

 

また、この記事は、専門的ではなくてもある程度の記事のカスタマイズ方法が分かっている方に向けて発信しています。

HTMLの張り付けって何?という人には、向いていないかもしれないです。

トップページをサイト型にする手順

トップページをサイト型にする手順

新着記事用ページを作る

まずは、現在トップページとして使われている記事のことを、投稿ページといいます。

投稿記事が順番に表示されていますよね。

現在ではトップページ=投稿ページですが、トップページをサイト型にするとトップページ=固定ページという風になります。

なので投稿ページの居場所がなくなってしまうので、投稿ページ用の居場所として固定ページを作成する必要があります。

投稿ページの箱としての、固定ページを作ろうという事ですね。

 

投稿ページ用の固定ページの作りかたは、このようになっています。

・固定ページを作る
・パーマリンクを設定する

たったこれだけです。

現時点では投稿ページ用の入れ物という状態なので、ただ単に固定ページを作るだけで構いません。

パーマリンクに関しては半角英数字なら何でも大丈夫。僕が作った際は、わかりやすく「articles」という風にしましたが本当に何でもいいです。

記事タイトルに関しては設定しても表示されません。

固定ページにHTMLを張り付けて編集する

次にトップページ用の固定ページを作る必要があります。

流れとしては、固定ページにHTMLを張り付けてサイト型にした後、その固定ページをトップページに設定するという感じです。

まず、固定ページのデザインをサイト型にしましょう。

 

一からデザインを考えるというのは、なかなかめんどくさいものなので、今回ははまちゃん様の記事にあるHTMLをお借りすることにしましょう。

以下にあるのがはまちゃん様の記事のHTMLです。

<h2 style=“text-align: center;”>『ブログタイトル』とは</h2> <p style=“text-align: center;”><strong><span class=“red”>(ブログに合った画像)</span></strong></p> ブログの説明欄〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 <p style=“text-align: center;”><a class=“btn btn-light-blue btn-m”>●●をチェック</a></p> <br> <h2 style=“text-align: center;”>カテゴリ別の最新記事</h2> <div class=“column-wrap column-2”> <div class=“column-left”> <h3 style=“text-align: center;”><i class=“fa fa-thumbs-up fa-fw my-gray”></i>カテゴリ①</h3> <p style=“text-align: center;”><strong><span class=“red”>(カテゴリに合った画像)</span></strong></p> <p style=“text-align: center;”><strong>キャッチフレーズ</strong></p> <strong><span class=“marker-under”>新着記事or人気記事</span></strong> <p style=“text-align: center;”><a class=“btn btn-light-blue btn-m”>このカテゴリをもっと読む</a></p> </div> <div class=“column-right”> <h3 style=“text-align: center;”><i class=“fa fa-thumbs-up fa-fw my-gray”></i>カテゴリ②</h3> <p style=“text-align: center;”><strong><span class=“red”>(カテゴリに合った画像)</span></strong></p> <p style=“text-align: center;”><strong>キャッチフレーズ</strong></p> <strong><span class=“marker-under”>新着記事or人気記事</span></strong> <p style=“text-align: center;”><a class=“btn btn-light-blue btn-m”>このカテゴリをもっと読む</a></p> </div> </div> <div class=“column-wrap column-2”> <div class=“column-left”> <h3 style=“text-align: center;”><i class=“fa fa-thumbs-up fa-fw my-gray”></i>カテゴリ③</h3> <p style=“text-align: center;”><strong><span class=“red”>(カテゴリに合った画像)</span></strong></p> <p style=“text-align: center;”><strong>キャッチフレーズ</strong></p> <strong><span class=“marker-under”>新着記事or人気記事</span></strong> <p style=“text-align: center;”><a class=“btn btn-light-blue btn-m”>このカテゴリをもっと読む</a></p> </div> <div class=“column-right”> <h3 style=“text-align: center;”><i class=“fa fa-thumbs-up fa-fw my-gray”></i>カテゴリ④</h3> <p style=“text-align: center;”><strong><span class=“red”>(カテゴリに合った画像)</span></strong></p> <p style=“text-align: center;”><strong>キャッチフレーズ</strong></p> <strong><span class=“marker-under”>新着記事or人気記事</span></strong> <p style=“text-align: center;”><a class=“btn btn-light-blue btn-m”>このカテゴリをもっと読む</a></p> </div> </div> <div class=“column-wrap column-2”> <div class=“column-left”> <h3 style=“text-align: center;”><i class=“fa fa-thumbs-up fa-fw my-gray”></i>カテゴリ⑤</h3> <p style=“text-align: center;”><strong><span class=“red”>(カテゴリに合った画像)</span></strong></p> <p style=“text-align: center;”><strong>キャッチフレーズ</strong></p> <strong><span class=“marker-under”>新着記事or人気記事</span></strong> <p style=“text-align: center;”><a class=“btn btn-light-blue btn-m”>このカテゴリをもっと読む</a></p> </div> <div class=“column-right”> <h3 style=“text-align: center;”><i class=“fa fa-thumbs-up fa-fw my-gray”></i>カテゴリ⑥</h3> <p style=“text-align: center;”><strong><span class=“red”>(カテゴリに合った画像)</span></strong></p> <p style=“text-align: center;”><strong>キャッチフレーズ</strong></p> <strong><span class=“marker-under”>新着記事or人気記事</span></strong> <p style=“text-align: center;”><a class=“btn btn-light-blue btn-m”>このカテゴリをもっと読む</a></p> </div> </div> <h2 style=“text-align: center;”><strong><span style=“font-size: 24px;”>はまちゃんからのお知らせ</span></strong></h2> <div class=“column-wrap column-2”> <div class=“column-left”>プロフィール</div> <div class=“column-right”> <h3 style=“text-align: center;”>お知らせ①</h3> 内容〜〜〜〜 </div> </div> <div class=“column-wrap column-2”> <div class=“column-left”> <h3 style=“text-align: center;”>お知らせ②</h3> 内容〜〜〜〜〜 </div> <div class=“column-right”> <h3 style=“text-align: center;”>お知らせ③</h3> 内容〜〜〜〜〜 </div> </div>

これをそのまま固定ページのテキストエディタに張り付けると、ある程度のデザインがすでにできます。

 

このまま使ってもいいですが、実際に使った立場としてはもう少し簡略化してもいいと思いました。

なので、僕が独自にアレンジしたHTMLを張り付けてもいいと思います。

以下のものが僕がアレンジしたHTMLです。

<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;”><a class=”btn btn-light-blue btn-m”>新着記事をもっと読む</a></p>

</div>
<div class=”column-right”>
<h3 style=”text-align: center;”>人気ランキング</h3>
<p style=”text-align: center;”><a class=”btn btn-light-blue btn-m”>ランキングをもっと見る</a></p>

</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;”><a class=”btn btn-light-blue btn-m”>このカテゴリをもっと読む</a></p>

</div>
<div class=”column-right”>
<h3 style=”text-align: center;”>カテゴリ②</h3>
<p style=”text-align: center;”><a class=”btn btn-light-blue btn-m”>このカテゴリをもっと読む</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;”><a class=”btn btn-light-blue btn-m”>このカテゴリをもっと読む</a></p>

</div>
<div class=”column-right”>
<h3 style=”text-align: center;”>カテゴリ④</h3>
<p style=”text-align: center;”><a class=”btn btn-light-blue btn-m”><strong>このカテゴリをもっと見る</strong></a></p>

</div>
</div>
<h2>(追加で何か書きたいものがあれば書く)</h2>

どちらを使っても構いません。わかりやすいほうを使ってください。

 

固定ページのテキストエディタにHTMLを張り付けることができたら、細かなカスタマイズをします。

重要な部分は次のところです。

・新着記事のショートコード
・このカテゴリをもっと見るボタン

新着記事のショートコード

Cocoonでは新着記事や人気記事を、カテゴリを設定した状態で一覧として見せることができます。

ビジュアルエディターのショートコードをクリックして、新着記事一覧をクリックしてください。そうすると、ショートコードが出てくるので、それを設定しましょう。

ショートコードはこんな感じです。
「new_list count=”5″ type=”default” cats=”all” children=”0″ post_type=”post”」
(文字として表示させるために鍵括弧で囲んでます)

ショートコードを張り付ける場所は、このカテゴリをもっと見るボタンの上がおすすめです。

 

設定するべき箇所は、catsのところです。これはカテゴリを意味していて、allでは全てのカテゴリの中の新着記事一覧を表示という意味を表しています。

カテゴリ別に新着記事を表示させたい場合は、catsの後ろの””に挟まれた部分に、カテゴリのIDを記入する必要があります。

カテゴリのIDの確認方法は次の通りです。

・「ダッシュボード」>「投稿」>カテゴリをクリック
・ブログカテゴリにマウスを合わせる
・カテゴリIDが画面左下に表示されるのでその数字を追記すれば完了

ブログカテゴリにマウスを合わせたときに、画面左下のURLの中にtag_ID=○○と表示されます。○○のところの数字がカテゴリのIDです。

このカテゴリをもっと見るボタン

次にこのカテゴリをもっと見るボタンの設定です。

こちらに関しては、ボタンにカテゴリごとのページURLを張り付けるだけでいいので、簡単だと思います。

新着記事を一覧で見たい見せたい場合は、先ほど作った投稿ページ用の固定ページのURLをボタンに張り付けてください。

現時点ではそのボタンをクリックしても、投稿ページは表示されませんが、のちの設定で表示されるようになります。

 

これで大事な部分の設定はできました。あとは個人で気になるなというデザインを自由に変えていってください。

ビジュアルエディターを使って設定すると、わかりやすいですよ。

ボタンを増やしたり、カテゴリを増やしたりと、自由に変更してくださいね。

トップページにいらないものを非表示にする

ここまで来たらトップページのデザインがある程度サイト風になったはずです。

つぎに、トップページにいらないものを非表示にする設定をします。

 

トップページにいらないものとは、次のようなものです。

・パンくずリスト
・固定ページのタイトル
・記事上のシェアボタン
・記事の投稿日・更新日
・記事下シェアボタン
・投稿者名

これらを消すには、CSSというものを追加しなくてはいけません。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;
}
/*モバイルグローバルメニュー非表示*/
.home.page #navi {
 display: none
}

個人的には、/*モバイルグローバルメニュー非表示*/ .home.page #navi { display: none }という部位分はいらないと思います。

実際にテラバジョブのトップページを設定する際は、このCSSを追加していません。追加するかどうかはご自由にどうぞ。

 

上記のCSSをコピーしたら、次に張り付けなければいけません。

CSSを追加する手順はこちらです。

・ダッシュボードから外観>カスタマイズ>追加CSSに張り付ける

すでに追加CSSに何か書いてあった場合でも、その下に張り付けて構いません。

張り付けた後に公開ボタンを押すと、設定が反映されてトップページに不要なものが表示されなくなります。

しかしまだこの状態では、固定ページをトップページに設定していないので表示されたままです。

固定ページをトップページに設定する

最後に固定ページをトップページに設定します。

手順は簡単なので、すぐに終わりますよ。

・ダッシュボード>「設定」>「表示設定」をクリック
・「フロントページの表示」で固定ページをクリックし、作成した固定ページを選択
・変更を保存をクリック

この時に投稿ページも選択してください。

投稿ページに選択するページは、冒頭に作った投稿ページ用の固定ページです。

 

これでブログのトップページをサイト型にすることができました。

サイト型にすることによって、読者にとってわかりやすく記事を読むことができますね。

 

というわけで今回はここらへんで終わらせてもらいます。

最後まで読んでいただきありがとうございました。

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