サイト運営者のプロフィールはこちら
スポンサーリンク

【Cocoon】サイト型トップページのカンタンな作り方【プログラミング知識は不要!】

サイト型トップページのカンタンな作り方 ブログ初心者向け
スポンサーリンク
初心者A
初心者A

トップページをサイト型にしたい!

初心者B
初心者B

テキストエディタ?ビジュアルエディタ?

Cocoonにはそんなもんないじゃないか!?

初心者C
初心者C

プログラミング知識0だから、htmlやcssのコピーでさえ難しい。。

こんな悩みにお答えします。

ぶっちゃけ、Cocoonならプログラミング知識ゼロでも簡単にサイト型トップページを作れます

なぜなら、初心者にも簡単に扱えるショートコードが備わっているからです。

実際、当サイトのホームページもプログラミングをほぼ使ってません。(多少はカスタマイズしてますが)

しかしいくら簡単とは言え、使い方を知らないと到底トップページを作ることはできません。

そこで今回の記事では、【プログラミング知識なしでできる】Cocoonのサイト型トップページのカンタンな作り方をご紹介します。

本記事を参考にすると、プログラミング知識が無くてもサイト型トップページを作ることができます。

※Cocoon以外の方でも、Gutenberg(グーテンベルグ)というWordpress5.0以降の新エディタを使っている方ならある程度できると思います。

こんな方にオススメ

  • Cocoonでサイト型トップページを作りたい
  • プログラミングがわからないから、他の方法で作りたい
  • トップページをオシャレにして自分だけの個性を出したい
スポンサーリンク

【Wordpressブログ】サイト型トップページって?

ふるふるブログのトップページ

サイト型トップページとは、こんな感じです。

こうすることにより、サイトの方向性が読者に伝わります

雑記ブログの方は特に、バラバラカテゴリーの新着記事がズラッと並んでいたら、何だこのブログは?と思われます。

僕は各カテゴリーごとに数記事のせて、下にボタンをつけてすっかりオシャレ仕様にしてます。(ボタンがズレてるのはツッコまないで)

>> ふるふるのトップページ

【追記】ボタンのズレを修正しました【2020/1/15】

ボタンの位置を修正

ボタンのズレを修正する方法は、固定ページの「カスタムCSS」、または「外観」‐「テーマエディター」‐「スタイルシート(style.css)」にいき、下記のコードを入力してください。(コピペOK)

/*トップページのカテゴリ別最新記事の幅固定*/
.widget-entry-cards .widget-entry-card-content{
padding-top:0.5em;
height:100px;
}
/*ここまで*/

これだけでズレは修正されるはずです。

後ほど詳しい説明をします。

ほんとにプログラミングなしでできるの?←簡単にできます。

今回使用する方法は、プログラミング知識なしでできる、簡単な作り方です。

初心者
初心者

でも紹介されてる方法はほとんどコピペとかだけど…?

という疑問が湧くと思いますが、大丈夫です。

その理由としては、Wordpress5.0以降の新エディタであるGutenberg(グーテンベルグ)と、Cocoonのショートコードや、付いてる機能だけで簡単に作れるからです。

旧エディタでは「テキストエディタ」や「ビジュアルエディタ」があり、多少なりともhtmlをいじらないとできませんでした

しかしもうカンタン、ショートコードの扱い方がわかればそんな悩みももうなくなります。

実際に作り方を見ていった方が早いと思うので、さっそく説明していきます!

【Cocoon】トップページをサイト型に変えちゃえ!【プログラミング知識不要!】

鉛筆とノート

今回ご紹介する方法は、以下の手順で行います。

  1. 固定ページを作成
  2. ショートコード「2カラム」で2列表示に
  3. それぞれに見出しをつける
  4. 表示させる記事はショートコード「新着記事一覧」で
  5. ボタンを作成してオシャレに
  6. 目次と広告は除外
  7. 記事を公開
  8. トップページを「固定ページ」に設定

それではさっそく、あなただけのサイト型トップページを作っていきましょう!

固定ページから作っていくよ

固定ページを作成

まずは、ダッシュボードの「固定ページ」から「新規追加」を選択します。

固定ページ

タイトルはお好みで決めてください。読者には見られないのでなんでもOKです。

ショートコード「2カラム」でオシャレな2列表示に!

2カラム

続いては、適当にブロックを選択して「Cocoonレイアウト」-「2カラム」を選択します。

これで、オシャレなサイトっぽい2列表示ができます

2列表示

こんな感じですね。なんだかオシャレな匂いがプンプンすっぞ!

Cocoon、無料テーマなのにカスタマイズの奥が深すぎる・・・

残念ながらスマホでは2列にならず1列で表示されます。

改善策を見つけるのでヘコまないでください。

それぞれに好きな見出しをつける【カテゴリー推奨】

見出しを付ける

それぞれに「見出し3」をつけ、カテゴリー名を入力してみました。

見出しの大きさ、名前はそれぞれお好みで決めてくださいね。

当ふるふるブログではcssで見出しの表示をカスタマイズしています。

多少見え方が違うかもしれませんが、ご了承ください。

いけっ!ショートコード「新着記事一覧」!!

ショートコード「新着記事」

文字入力の時に出てくる上のバーから、</>‐ショートコードを押し、「新着記事一覧」を選択します。

上のバーが出てこないよって方は、適当に文字を入力してみてください。(上の画像では「a」と入力しています。後で消しましょうね。)

ショートコード「新着記事」

すると、こんなコードが出てきます。

初心者の方は混乱しそうですが、ぶっちゃけ意味がわからなくても大丈夫です!!

変更するとすれば、count=”5″と、cats=”all”の部分です。

count=”5″の数字は、表示させる記事数を表しており、変更したければしましょう。(当サイトは5のままです。)

cats=”all”は表示させるカテゴリーを表すもので、少し難しいので以下で解説していきますね。

カテゴリーの部分はこれを覚えておけばOK

ダッシュボード‐カテゴリー

ここでいったん別ウィンドウでWordpressを開き、「投稿」‐「カテゴリー」を選択します。

カテゴリー

カテゴリー一覧が表示されているところに行き、表示させたいカテゴリーのところにカーソルを当てます

すると、上画像のように下に小さく”ID=3″と書かれているのが見えると思います。

この数字がカテゴリーのIDなので、間違えないように覚えてください

IDを間違えて入力すると、上手く表示されなかったりバグに繋がります。

必ずメモして間違いのないように覚えましょう。

覚えたカテゴリーのIDを入力

ショートコード編集

そしてまた編集画面に戻り、“cats=all”のところを、先ほどチェックしたIDに書き換えます

僕の場合は”cats=3″に書き換えました。

なぜこうするかと言うと、“cats=〇〇”というコードは「表示させるカテゴリー」を表しているからです

つまり、”cats=all”のままだと、「カテゴリー問わずすべての記事の中の新着5記事」が表示されてしまいます。

「新着記事」という括りでカテゴリー問わず表示させる分には構いませんが、カテゴリーごとにわけて表示させるなら必ず変更しておきましょう。

プレビュー

プレビューを見るとこんな感じで表示されています。

Cocoonは自動的に「ブログカード表示」をしてくれるみたいです。

なんかこれだけで一気にオシャレになった気が。。

ボタンをつけてオシャレな雰囲気に!

ボタンをつける

先ほどのコードの下のブロックに移動し、「Cocoonブロック」‐「ボタン」を選択します。

ボタンの編集

右側のブロック設定で、ボタンを自由に装飾してあげましょう。

もちろん、URLには表示させたいカテゴリーのURLを入力してくださいね。

ボタンの大きさは「中」か「大」がオススメだよ。

ボタンの位置がズレる場合

ボタンの位置のずれ

このように、アイキャッチ画像のサイズが違うとボタンの位置がズレてしまいます。

このときの対処法は、下記のコードを固定ページの「カスタムCSS」か、「外観」‐「テーマエディター」‐「スタイルシート」に入力してください。

 /*トップページのカテゴリ別最新記事の幅固定*/
.widget-entry-cards .widget-entry-card-content{
padding-top:0.5em;
height:100px;
}
/*ここまで*/

スタイルシートに貼り付けるとこんな感じ↓

スタイルシート

貼り付けたら必ず保存しましょう!

スタイルシートを編集する場合は、必ずバックアップを取っておきましょう。ミスがあるとサイトが動かなくなる可能性もあります。

カスタムCSS

固定ページの「カスタムCSS」だとこんな感じです。

どちらかやりやすい方を選んでやってみてください!

反映されると、以下のようにボタンの位置が修正されます!

ボタンの位置を修正
初心者
初心者

ボタンの位置が揃ってる方が綺麗だね。

でもプログラミング使ってんじゃん・・・

これ以外に対処法ありませんでした・・・笑

コピペOKなので大目に見てやってください(-ω-)/

好きにカスタマイズ!!

人気記事

僕のサイトでは、「見出し2」で人気記事と書き、ショートコード「人気記事一覧」から人気記事を表示させています。

人気記事はpv数から自動的に選ばれるので、自分でオススメしたい記事とは異なることがあります。

このへんはお好みでカスタマイズしていきましょう。

目次と広告を除外

トップページに目次と広告があるのは不自然なので、設定から除外しましょう。

目次を除外

ページ設定から、「目次を表示しない」にチェック。

広告を除外

広告設定から、「広告を除外する」にチェック。

これだけで除外できます!

記事を公開!

開放されて万歳している女性

お疲れさまでした!

プレビューで出来栄えをチェックし、満足がいくものが完成したら右上の「公開する」をクリック!

残す手順はあと1つです!!

【完成】フロントページを「固定ページ」に設定

設定

記事が完成したら、「設定」‐「表示設定」を選びます。

固定ページをフロントページに

「ホームページの表示」の部分を、「固定ページ」の方にチェックを入れます。(デフォルトでは最新の投稿になっています。)

そして、そのホームページは先ほど作ったページを選択。

その後、下にある「変更を保存」をクリックして完成です!!(絶対に保存してね)

これで、晴れてサイト型トップページの完成だ!

おめでとうございます!!

そして、お疲れさまでした。

【まとめ】トップページをサイト型にして脱・初心者ブロガーへ!

まとめ

この記事では、【プログラミング知識不要】Cocoonのサイト型トップページの作り方をご紹介しました。

手順をおさらいしましょう(^^)/

  1. 固定ページを作成
  2. ショートコード「2カラム」で2列表示に
  3. それぞれに見出しをつける
  4. 表示させる記事はショートコード「新着記事一覧」で
  5. ボタンを作成してオシャレに
  6. 目次と広告は除外
  7. 記事を公開
  8. トップページを「固定ページ」に設定

トップページをサイト型にするだけで、一気に個性が出て一流のブロガーっぽくなります。

ぜひ自分のサイトで実践し、あなただけの個性あふれるブログサイトを作っていきましょう。

この記事が参考になれば幸いです。

他のブログ初心者向けの記事はこちらから。

何かわからない点があれば、Twitter(@takumi_oowarai)のDMにてお気軽にご質問ください。

コメント

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