見ていただきありがとうございます。ぽぽです。
Cocoonのトップページで、止まっていませんか。
- 記事の並び方を変えたい
- トップの上に、なぜか空白がある
- カテゴリーが多すぎて、見た目が悪い
- 全体を見て「これでいいのかな」と不安になる
※トップページは、ブログのアドレスを開いたときに最初に出るページです。
私も、ここで止まった側です。
スケートボードのブログはCocoonで書いています。
トップページは、YouTubeを見ながら設定しました。
記事は2列で並ぶようになりました。
でも全体を見ると、どこか低クオリティ。
「これでいいのかな」と思ったまま、今に至ります😇
先に答えを書いておくと、こうです。
| やりたいこと | Cocoonで |
|---|---|
| 記事の並べ方を変える | |
| スマホで1列にする | |
| トップの上に画像を出す | |
| トップの上の空白を消す |
トップページの見た目は、設定でかなり変えられます。
私の「謎の空白」の正体も、設定の1つでした。
ということで、私のブログの実物で順に見せますね。
設定は、この記事のために本当に切り替えて撮っています。
- 過去の自分：YouTubeを見てトップページを設定。でも「これでいいの？」が消えないまま
- いま：SWELLでブログ4年目（スケートボードのブログはCocoonのまま）
まず、私のトップページの「ここが変」
いまの、私のスケートボードのブログです。
パッと見て、気になるのはこの4つです。
| 番号 | 見えているもの | 正体 |
|---|---|---|
| ① | ピンクの帯の下の、大きな空白 | 中身が空の「アピールエリア」 |
| ② | 「NO IMAGE」のカード | アイキャッチ画像のない記事 |
| ③ | 「Uncategorized」の札 | カテゴリーを選んでいない記事 |
| ④ | 右側のカテゴリーが98個 | 作りすぎたカテゴリー |
並べ方より、こういう小さいところが目立つんですよね。
低クオリティに見えた正体は、これです。
①はこの記事の後半（アピールエリア）で直します。
②と③は、その記事を開いて画像とカテゴリーを選べば消えます。やり方はこちら。
④は、サイドバーの記事に書いています。
同じところで困っている人は、多いみたいです。
Yahoo!知恵袋にも、こんな質問が並んでいます。
- アメブロのように、最新の記事が並ぶ形にしたい
- 記事のカードの大きさを変えたい
- 固定ページをトップにしたい
ちなみに、このぽぽブログはSWELLで書いています。
CocoonからSWELLに変えて、記事が崩れた3ヶ月の話はこちらです。
Cocoonのトップページ カスタマイズは「インデックス」タブから
場所は、ここです。
WordPressの管理画面 →「Cocoon 設定」→「インデックス」タブ
項目の名前は、Cocoon公式が公開している最新版で確かめています。
トップページに効くのは、この2つです。
| 項目 | 選べるもの |
|---|---|
| フロントページタイプ | 一覧（はじめの設定）・タブ一覧・カテゴリーごと（2列・3列） |
| カードタイプ | エントリーカード（はじめの設定）・大きなカード・縦型カード2列・縦型カード3列・タイルカード2列・タイルカード3列 |
私のブログは「一覧」と「縦型カード2列」でした。
3つの並べ方を、私のブログで切り替えてみた
カードタイプを切り替えた、実物です。
同じ記事が、こう変わります。
エントリーカードは、横長のカードが1列。
画像は小さく、説明の文が多く入ります。
縦型カード2列は、いまの私のブログです。
画像が上で、雑誌のような並びになります。
タイルカードは、画像の形がそのまま出ます。
私のブログは画像の縦と横がバラバラ。
なので高さがそろわず、ガタガタになりました😇
| 並べ方 | 私のブログで見ると |
|---|---|
| エントリーカード | 文が多く、画像が小さい |
| 縦型カード2列 | 画像が大きく、高さがそろう |
| タイルカード2列 | 画像の形がバラバラだと、ガタガタ |
縦型やタイルにしたら、画像の作り直し
縦型カードやタイルカードにしたとき。
公式の画面には「サムネイルの再生成を行ってください」と書いてあります。
※サムネイルは、記事の一覧に出る小さい画像のことです。
やらないと、画像がぼやけたり、形が合わなかったりすることがあると言われています。
ぽぽ私がやったかどうかは、覚えていません😇
なので、私のブログで答え合わせをしました。
カードの画像を、1枚ずつ調べました。
すると1枚だけ、作り直されていない画像があったんです。
カードの形は横長です。
でも用意されていたのは、少し縦に高い小さい画像（300×212）。
なので上と下が切れて、引きのばした分だけ少しぼやけています。
ほかの画像は、カードの形に合っています。
私の場合は「ほぼやっていた。でも1枚だけ漏れていた」が答えでした😇
スマホで題名が切れるなら「1列」に
次は、スマホで見たときです。
縦型カード2列のままだと、こうなります。
左の2列は、題名が途中で「…」になって切れています。
右の1列なら、題名が最後まで読めますね。
| 2列（はじめ） | 1列にした | |
|---|---|---|
| 題名 | 途中で切れる | 最後まで読める |
| 画像 | 小さい | 大きい |
| 1画面に見える記事 | 4つくらい | 2つくらい |
やり方は、チェックを1つ入れるだけです。
- 「Cocoon 設定」→「インデックス」タブを開く
- 「スマホで縦型＆タイル型のエントリーカードを1カラムにする」にチェック
- 「変更をまとめて保存」を押す
名前のとおり、効くのは縦型とタイルのときだけです。
エントリーカードは、もともと1列です。
1列になるのは、スマホくらいの幅（480px以下）で見たときだけ。
パソコンでは、2列のままです。
Cocoon公式が公開している最新版の中身で確かめています。
つまり、この設定1つでこうなります。
パソコンは縦型カード2列、スマホは1列。
Cocoonのトップの上の空白は「アピールエリア」だった
今回いちばんの発見は、これです。
ピンクの帯の下の空白。
ずっと何かわかりませんでした。
ブログの中身を確かめました。
正体は「アピールエリア」という場所です。
アピールエリアは、トップの上に画像や一言、ボタンを大きく出す場所です。
場所は「Cocoon 設定」→「アピールエリア」タブ。
私のブログの状態は、こうです。
| 項目 | 私のブログ |
|---|---|
| アピールエリアの表示 | フロントページのみで表示する |
| エリア画像 | なし |
| タイトル・メッセージ | なし |
表示はオン、中身は空っぽ。
なので、枠の分だけ空白が出ていたんですね。
ぽぽ何を入れようとしたかは覚えていません。たぶん、スケートボードの画像を入れようとしたのかな？
直し方は2つ
| どうしたいか | やること |
|---|---|
| 空白を消したい | 「アピールエリアの表示」を「表示しない」にする |
| 画像を出したい | 「エリア画像」で画像を選ぶ |
空白を消すなら「表示しない」
- WordPressの管理画面で「Cocoon 設定」を押す
- 上のタブから「アピールエリア」を押す
- 「アピールエリアの表示」で「表示しない」を選ぶ
- 「変更をまとめて保存」を押す
- トップページを開いて、空白が消えたか確かめる
空白が消えて、記事の一覧がすぐ上に来ました。
画像を入れるなら「エリア画像」
空白を消さずに、画像で埋める手もあります。
私のデッキの写真を入れてみました。
同じ場所とは思えないくらい、変わりますね。
- 「アピールエリア」タブを開く
- 「エリア画像」で写真を選ぶ
- 「高さ」に数字を入れる（200〜800px）
- 「変更をまとめて保存」を押す
一つ、つまずいたところがあります。
最初は、写真の上のほう（棚の木の部分）しか出ませんでした。
写真を横長に切り抜いて、高さを600pxに。
するとデッキ全体が出ました。
画像は、横に長い写真が合うんですね。
ただ、スマホでは高さの設定は効かないと公式に書いてあります。
ぽぽ記事のために試したあと、スケートボードのブログは元に戻しています。
迷ったら、この3つだけでいいと思います
ここまで、いろいろ切り替えてみました。
はじめての人が迷ったら、私ならこの3つにします。
| 迷ったら | 理由 | 設定のしかた |
|---|---|---|
| 並べ方は「縦型カード2列」 | 画像が大きく、高さもそろう | 縦型カード2列を見る |
| スマホは「1列」にチェック | 2列だと、題名が途中で切れる（パソコンは2列のまま） | スマホを1列にする |
| アピールエリアは、写真がなければ「表示しない」 | 空のままだと、空白になる | 表示しない／画像を入れる |
アピールエリアに入れたい写真があるなら、横に長いものを選んでくださいね。
タイルカードは、画像の形がそろっている人向けかなと思います。
②NO IMAGEと③Uncategorizedの消し方
ここは、記事を1本ずつ開いて直します。
「Uncategorized」は、WordPressに最初からある「未分類」のカテゴリーです。
- 管理画面の「投稿」→「投稿一覧」で、その記事の「編集」を押す
- 右側の「アイキャッチ画像」で、画像を選ぶ（②が消える）
- 右側の「カテゴリー」で合うものにチェックし、「Uncategorized」のチェックを外す（③が消える）
- 「更新」を押す
※右側の並びは、使っている編集画面によって少し違います。
カテゴリーが多すぎる問題
右側のカテゴリーは98個。
これは、サイドバーの記事で書いています。
SWELLのブログは、設定をあまり触らなくてもこうなった
私は、犬のブログとこのぽぽブログをSWELLで書いています。
2つのトップは、こうです。
どちらも、トップの設定はあまりいじっていません。
それでも、それなりのトップページになりました。
いちばん変わったのは、ブログ全体の見た目です。
プロっぽくなりました。
SWELLそのもので困ったことは、今のところありません。
CocoonからSWELLへ移したときの苦労は、こちらの記事に書いています。
| Cocoon（スケートボード） | SWELL（犬・ぽぽ） | |
|---|---|---|
| トップの設定 | 自分で1つずつ | あまりいじらず |
| 見た目 | どこか低クオリティ | プロっぽい |
CocoonとSWELLのほかの違いは、こちらにまとめています。
ほかの場所のカスタマイズは、こちらにまとめています。
まとめ
- 低クオリティに見えた正体は、空白・NO IMAGE・未分類・カテゴリー多すぎ
- NO IMAGEと未分類は、記事を開いてアイキャッチ画像とカテゴリーを選ぶ
- 記事の並べ方は「インデックス」タブのカードタイプ
- 縦型やタイルにしたら、サムネイルの再生成をする（私は1枚漏れていた）
- スマホで題名が切れるなら「1カラムにする」にチェック
- トップの上の空白は「アピールエリア」。消すなら「表示しない」、埋めるなら「エリア画像」
- 迷ったら「縦型カード2列」「スマホは1列」「空ならアピールエリアは表示しない」
- SWELLの2つのブログは、設定をあまり触らなくても見た目が整った
私の「謎の空白」は、設定1つでした。
ずっと、何かわからないままでした😇
まずは「アピールエリア」タブを、一度開いてみてくださいね。
「これでいいのかな」が、ほかにもたまっている人へ。
私がCocoonからSWELLに変えて、何が変わったか。
記事が崩れた3ヶ月の話も、正直に書いています。
コメント