【cocoon】初心者向けサイト型トップページのカスタマイズ方法

ブログ運営

 

いちるい
いちるい

こんにちは、薬剤師のいちるいです。

 

ブログを始めて約2か月の初心者による、

初心者のためのトップページの作り方を公開します!

(変更前後10日間比較したところ、滞在率が約2.4倍あがりました)

 

cocoonはデフォルトのまま記事更新しても、前の記事が埋もれていき、前の記事は読まれにくくなってしまいます。

せっかくカテゴリを設定していても、結局一覧に埋まってしまうのであまり意味をなさないですよね。

そこで今回はカテゴリ毎に分けたサイト型を作ってみたい!と思い、2020年元旦から取り掛かりました(笑)

 

アレンジしたトップページがこちら。(※一番上に自己紹介を加えています。

 

筆者はこのカスタマイズをHTMLやらCSSを全く触れてない初心者状態のままやりました。

ちなみに今でもよくわかってないです(笑)

そんな状態でも作れてしまうほどネットには情報が埋もれています。

 

そんな情報を頼りにトップページを作る方法を超初心者なりに書きあげましたので、ぜひご覧ください!

・トップページの超初級カスタマイズ方法
・HTMLやCSSを知らない初心者でもできます
・コピペして頂いてOK

 

デザインも丸パクリしたい!って方は本当にコピペでいいですし、少し変えたいという方なら色や文言を変えたりしてみてください。

ちなみにまだこれから自分は色付けなど色々アレンジ加えていくつもりです。

おそらく自分で作ってると仕組みがなんとなくわかってきて、自分でアレンジを加えたくなると思います(笑)

 

それではトップページの作り方を解説いきたいと思います!

 

スポンサーリンク

cocoonでトップページをサイト型に変えるメリット

トップページをサイト型に変えるメリットとして以下のことがあげられます。

・滞在率が上がる
・サイトの見栄えが良くなる
・読んでほしい記事が見逃されにくくなる

 

冒頭でも述べましたが、初心者でテーマをcocoonにしてブログ始めたばかりという方は、記事が一覧で並んでいる状態だと思います。

 

記事一覧が並んでいるだけの状態にしておくと、良い記事を以前に書いていたとしても見逃されている可能性があります。

 

そこで記事一覧の状態から、今回紹介するカテゴリごとに分けたりするサイト型にしたり、ヘッダー下に画像付き記事を表示させたりすることで、自分の読んでほしい記事を気づかれやすくすることができます。

 

ヘッダー下に画像付き記事を表示させる方法は以下の記事をご参照ください。

 

トップページをサイト型にしたことで滞在率が約2.4倍に上がりました。

トップページを変更前後10日間を比較したデータは以下の通りです。

 

 

cocoonでサイト型へカスタマイズする下準備

準備というほどのことではないのですが、cocoon使用者によっては編集画面が異なる可能性があるので、まずはそちらから説明します。

 

まず記事編集画面を開いてみて下さい。

以下のような画面の方はそのままで大丈夫ですので、この説明は飛ばして「トップページ作成」に進んでください。

 

以下のような画面の方は少し設定を変更します。

変更は簡単に元に戻せるので、この作る時だけでも変更してみてください。

 

まずダッシュボードの「cocoon設定」を選択し、「エディター」をクリックしてください。

 

Gutenbergエディターを有効にする」のチェックを外し、「変更をまとめて保存」をクリックしてください。

 

以上で準備は完成です。

記事編集画面に戻ると編集画面が変わっているかと思います。

 

ではそのままトップページの変更作業をしていきましょう!

 

cocoonでサイト型にカスタマイズする方法

トップページを作るざっくりとした手順は以下の通りです。

(※単語の意味がわからなくてもこのサイトで説明する通りやっていただければとりあえず作れますので安心してください!)

1.固定ページの作成
2.HTMLコードをコピペ
3.コードの書き換え
4.ボタンのリンクにURLを挿入
5.固定ページをトップページに設定する

 

※もしかしたら設定しているスキンによってデザインが筆者のデザインと多少変わってくる可能性もあります。筆者は『モダンブラック/作者:アオイ』のスキンを使っています。現在さらにアレンジを加えているためスキンは変わっています。お好みのスキンを試してみてください。

 

固定ページの作成

ダッシュボードの「固定ページ」を選択し、「新規追加」をクリック。

 

ビジュアル」から「テキスト」に切り替える。

 

固定ページのタイトルにはトップページと入力しておきます。

 

HTMLコードをコピペ

以下のHTMLコード「テキスト」貼り付ける

画像下部にコピペ用HTMLコードがあります。

 

下記コード内にある★★★を消してから「テキスト」に貼り付けてください!
<h3 class="sticky st-red" style="text-align: center;">ー 新着記事 ー</h3>
<p style="text-align: center;"> <span class="marker-under"><strong>【全記事が新しい順位並んでます】</strong></span></p>
<strong>[★★★new_list count=3 type=border_square cats=all children=0 post_type=post]</strong>
<p style="text-align: center;"><span class="btn-wrap btn-wrap-orange btn-wrap-m"><a href="http://全記事のURL" target="_blank">もっと読む</a></span></p>

<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>[★★★new_list count=5 type=border_square cats=■ children=0 post_type=post]</strong>
<p style="text-align: center;"><span class="btn-wrap btn-wrap-orange btn-wrap-m"><a href="http://カテゴリー①のURL" target="_blank">もっと読む</a></span></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>[★★★new_list count=5 type=border_square cats=■ children=0 post_type=post]</strong>
<p style="text-align: center;"><span class="btn-wrap btn-wrap-orange btn-wrap-m"><a href="http://カテゴリー②のURL" target="_blank">もっと読む</a></span></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>[★★★new_list count=5 type=border_square cats=■ children=0 post_type=post]</strong>
<p style="text-align: center;"><span class="btn-wrap btn-wrap-orange btn-wrap-m"><a href="http://カテゴリー③のURL" target="_blank">もっと読む</a></span></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>[★★★new_list count=5 type=border_square cats=■ children=0 post_type=post]</strong>
<p style="text-align: center;"><span class="btn-wrap btn-wrap-orange btn-wrap-m"><a href="http://カテゴリー④のURL" target="_blank">もっと読む</a></span></p>

</div>
</div>



 

テキスト」から「ビジュアル」に戻すと以下のような画面になっているかと思います。

 

今回の配置は上に見出しとして一つ、下に連結したカラムが二つとなっています。

合計5つのカテゴリーに分けられています。

筆者のトップページを参考にしていただくのが分かりやすいかと思います。

 

もしも上の見出しはいらなく、4つのカテゴリー配置がいいという場合は、青丸で囲ったHTMLコード(1~4行目)を切り取ってから貼り付けてください。

 

ビジュアル画面のままで構いませんので、カテゴリ名カテゴリ説明など日本語のところを入力していきます。

入力した参考画面がこちら。

 

コードの書き換え

次に謎の英語のコードのところを入力していきます。

それぞれのカテゴリーに以下のように赤枠で囲んだ中に英語が並んでいるのが分かると思います。

 

この英語のコードは、記事を何件表示させるかどのカテゴリーの記事を抜粋して表示するか記事を表示するデザインはどうするかなどを決めるコードです。

なのでそれぞれに意味があるコードで、黄色と青の下線で分けられるようそれぞれ単語になっています。

それぞれの単語の=のあとの○に該当する数値を入力します。

 

コードの単語と実際に筆者が○に入れてる数値やワードを簡単に解説します。

○に入れる数値やワードによりカスタマイズ可能なので、詳しくはcocoon作成者わいひらさんの記事をご参照ください。

 

count=○は、表示する記事数を決めるコードで、○に表示させたい数値を入力すると、入力した数値分の記事が表示されます。

筆者は新着記事count=3カテゴリごとの記事count=5と入力しています。

 

type=○は、記事を表示する際の枠線の種類を決めるコードで、わいひらさんの記事に色々種類があるのでお好みで選んでください。。

筆者はtype=border_squareと入力しています。

 

cats=○は、カテゴリを抜粋するコードで、○にカテゴリの数値を入力すると、抜粋されたカテゴリの全記事が表示されます。

○にallと入力すると全カテゴリ抜粋=全記事になります。

筆者は新着記事はcats=all、カテゴリ分けのものはカテゴリに合った数値を見つけて入力しています。

※わかりにくいかと思うので、下記に数値の見つけ方を記載しています。。

 

cats=○に関して、筆者がカスタマイズ時に少しわかりづらかった点があったのでここで書いておきます。

 

わかりづらかった点は、catsのカテゴリ分けの数値はどこにあるのかというところ。

カテゴリ分けの数値の見つけ方を紹介しますが、知ってるよという方は飛ばしていただいて構いません。

 

先ほどのcocoonの記事の記事には以下のような説明があります。

カテゴリIDは、カテゴリ設定画面のURL(tag_ID)から取得してください。
カテゴリIDを確認する方法はURLから

引用:新着記事一覧を表示するショートコードの利用方法

 

このtag_ID=3がどこにあるのかを説明していきます。

まずダッシュボードから「投稿」を選択し、「カテゴリー」をクリック。

 

カテゴリー分けしたいカテゴリーにカーソルを合わせると、画面左下にURLが浮かび上がってきます。

そこにtag_ID=がでてきます(下の画面の場合、カテゴリー1にカーソルを合わせるとtag_ID=2と浮かび上がっています)。

 

この数値を先ほどのcats=○に入力します。

入力した画面がこちら。

 

引き続き、コードの説明に戻ります。

children=○は、子カテゴリの内容を含めて表示するかを決めるコードです。

筆者はchildren=0と入力しています。

 

post_type=○は、表示する投稿タイプを選択するコードです。

筆者はpost_type=0と入力しています。

 

詳しい内容はわいひらさんの記事に載っています。

自分なりにアレンジを加えたいと思ったらわいひらさんの記事を参考にしてみてください。

とりあえず筆者と同じにしてやるよ!って方はまずは真似してみてください(笑)

 

以上でひとまずトップページの見た目は完成しました。

一度「プレビュー」で見てみてください。

 

以下の画像のようになっているのではないでしょうか?

 

これで見た目は完成しましたが、まだ「もっと読む」のボタンのリンクにURLが挿入できていません。

URLを挿入したら見た目は完成ですので、頑張りましょう!

 

ボタンのリンクにURLを挿入

次にボタンのリンクにURLを挿入していきます。

ボタンとは、オレンジ色の「もっと読む」のところです。

 

一番上に配置している全記事のURLと、下の4つのカテゴリごとのURL探し方が違うので別々に説明します。

まずは一番上の全記事のURLを見つける方から説明します。

もし記事一覧は載せないからいいよという方は飛ばしてください。

 

全記事のURLの探し方

まず固定ページを新しく追加します。

タイトルは何も入力しなくていいですが、ここではわかりやすいように記事一覧と入力します。

タイトル入力したら「公開」をクリックします。

 

次に作成した固定ページに記事一覧を表示する設定をします。

設定」にカーソルを合わせ、「表示設定」をクリックします。

 

固定ページ」に黒ぽちを合わせ、「投稿ページ」にカーソルを合わせ、さきほど作成した記事一覧を選択します。

選択したら「変更を保存」をクリックします。

 

以上で記事一覧URLが完成しました。

次に記事一覧URLをコピペするために「固定ページ一覧」の「記事一覧ー投稿ページ」にカーソルを合わせ、「表示」をクリックします。

 

表示」をクリックしたら記事一覧のページに飛んだかと思います。

とんだページのURLをコピーします。

 

コピーしたURLをボタンに挿入していきます。

もっと読む」にカーソルを合わせ、「鉛筆マーク」をクリック。

クリックしたらコピーしたURLを貼り付け、「矢印」をクリックして完了。

 

これで記事一覧のリンク完成です。

 

カテゴリー毎のURLの探し方

次はカテゴリーごとのリンクにURLを挿入してきます。

まずは「投稿」にカーソルを合わせ、「カテゴリー」をクリックしてください。

選びたいカテゴリーにカーソルを合わせ、「表示」をクリックします。

 

そうすると選んだカテゴリーのページにとんでいるかと思います。

とんだページのURLをコピーします。

 

コピーしたURLをボタンに挿入していきます。

もっと読む」にカーソルを合わせ、「鉛筆マーク」をクリック。

クリックしたらコピーしたURLを貼り付け、「矢印」をクリックして完了。

 

この作業を4つのカテゴリごとに繰り返してください。

 

 

これで完成!

といいたいところですが、この固定ページをトップページへと反映させなければなりません。

あと少し、頑張りましょう!

 

 

固定ページに必要ないものをの除く

トップページに固定ページのタイトル名や目次が表示されてしまっていたら台無しになってしまいますよね。

(おそらく見出しのh2を使用しなければ目次は表示されない?ですが、自分でアレンジしたときなどに困らないよう書いておきます。)

台無しにならないよう、固定ページに必要ないものをの除く作業を解説していきます。

 

画像下部にあるHTMLコードをコピー「カスタムCSS」に貼り付けます

(※カスタムCSSとは、今作成している固定ページ編集画面を下の方にスクロールしていくと見つかります。)

 

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

 

上記のコードに除きたい項目毎に日本語で解説が書いてありますが、反映されて欲しくないものだけを選ぶといいかと思います。

例としてフロント固定ページの「タイトル」「シェアボタン」「登校日」をコピペした際のビフォーアフターをプレビュー画面でお見せします。

before(カスタムCSS未入力)

after(カスタムCSSに「タイトル」「シェアボタン」「登校日」のコードを入力)

 

タイトル」「シェアボタン」「登校日」が消えているのが見てわかるかと思います。

 

目次アドセンス広告は除く場合は、HTMLコードを入力するのではなく、ただチェックをつけます。

そのチェックをつけるところは固定ページ編集画面の右にある「広告設定」と「ページ設定」という箇所です。

以下の画像を参照していただくとわかりやすいかと思います。

 

 

これで更新をしたら固定ページを作成完了です。

ついにトップページ化する準備が整いました!!

次で最後です!

 

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

最後段階にきました。

固定ページをトップページに反映する作業です。

 

まずダッシュボードの「設定」を選択し、「表示設定」をクリック。

次に固定ページに黒ぽちを合わせ、ホームページはトップページを選択します。

 

変更を保存を押せば完了です!

お疲れ様でした!!!

 

ご自身のトップページを確認したらカテゴリ分けされた表示になっているかと思います。

筆者はカテゴリ分けされた表示の上に、編集画面で吹き出し機能を使って簡単なブログ紹介を書きました。

みなさんなりにどんどんアレンジしてみてください!

 

cocoonをサイト型にカスタマイズする際の参考記事

これらの作成には何人ものブロガーを参考にして出来上がりました。

ただ、まだまだこれは初期段階なので、ここからカスタマイズしていくことでさらなるオリジナルのトップページができあがると思います。

 

主に参考にさせていただいたブロガーさんの記事は下記のとおりです

 

もしアレンジをさらに加えたい、いちるいブログじゃ分かりにくいという方は、ぜひ上記の記事を参考にしてみることをオススメします。

こういう偉大な先駆者がいるおかげで初心者でもなんとかやっていけます…。

本当に感謝です。ありがとうございました。

 

 

以上がcocoon初心者による、トップページの作り方についての記事でした。

読んでいただきありがとうございました。参考になれば幸いです。

なにかわからないことがありましたら、お答えできる範囲であればお答えします。

なにしろ筆者も超初心者なので限界があります…。

よろしくお願いします。

 

 

このブログで一番見られている記事はこちら↓

クレベリンは風邪・インフルエンザの予防に効果はある?
本記事ではクレベリンが予防に効果があるのかということを、様々な報告を基に解説しております。結論として、クレベリン(二酸化塩素製剤)は使う環境によって効果が期待できる可能性があります。ブランドの信用性で安易に判断するのではなく、適切な情報収集をすることが大切です。

 

よろしければTwitterのフォローよろしくお願いします!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

コメント

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