WordPress

[WordPress]トップページ表示のしかたをカテゴリー2分割へ

サイトのトップページ、
表示のしかたについてです。

ほぼデフォルト状態の一覧だと、
新着記事順に並ぶ…スタイルにしていますが。

イメージ的には、
大きくカテゴリー分けにしたいなと思うようになり。

具体的には、
昭和レトロとカスタマイズを並べる…なのですが、、😁

おそらくは、それ以外の大見出しは作らない。。。予定でいます笑)

 

Cocoonでは、
そういう需要にピッタリな設定があるようです。

まずはこのようなページができるようで、それやってみました。

PCのイメージ ⇩

PCでの新着とカテゴリーなトップページ

全体的には上に新着記事、
その下にカテゴリー分けとできるんですね。

ん、まずはこのイメージで良いかもしれない😁

 

管理画面のCocoon設定から入って ⇨ インデックスをクリック。

フロントページタイプのところで、
カテゴリーごと(2カラム)にチェックマークを入れます。

コクーン設定でトップを変える箇所

その下の表示カテゴリーで、
表示させたいカテゴリーを✓点で選びます。

 

自分の場合は、
大きく2カテゴリーに分けたのでそれを選択。

もっとカテゴリーある場合は、
この選択でいけば…2列がさらに下へと作られるのだと想像。

Aカテゴリ Bカテゴリ
Cカテゴリ Dカテゴリ


って感じ?

 

と、PCで見るとこんな感じですが、
スマホで見ると、すべて1列での表示となり。

新着記事と
下のカテゴリ記事とが、まるでかぶっちゃってますが、、

スマホでの1列表示なトップページ

カスタマイズに夢中になり過ぎて😂
そのうちバラけると思いたいw💧

 

そこからカスタマイズ含め、ポツポツ整えていきたいと思います。

と言ってて早速、、w
カテゴリーに出るタイトルの、文字サイズをカスタマイズしてみました。

トップのカテゴリー表示の文字サイズ

大きいサイズだと、
左右で位置のズレが見られるからです。

やりかたはページソースの表示でタグを調査…
ページ上で右クリックし、ページのソース表示を選択。

管理画面の外観から ⇨ カスタマイズ
追加CSSに以下のコードを入力します。

/*トップ分割カテゴリタイトル*/
.new-entry-card-title {
font-size: 13px;
}

 

カスタマイズ後のカテゴリー文字サイズ

これでタイトルがちょい小さくなり、
左右差もなくなったことと思います。

 

参考にしましたサイト様、
ありがとうございます。

【やさしく図解】インデックス(トップ画面)の設定
新しい記事を投稿したら、前に書いた「良い記事」がトップページから消えちゃった💦デフォルトではトップページはカテゴリーに関係なく新着順に表示するので、「有益な記事」の後に細かい記事などを投稿すると有益な記事がトップページから消えてしまいます。...
【真似OK】Cocoonのインデックスカードをカスタマイズする方法
Cocoonにインデックスカードを設置したい方「初期設定の方法とカスタマイズの方法を詳しく知りたい」 本記事は、上記の方に向けて執筆しています。 本記事の内容 Cocoonインデックスカードの初期設定を行う方法Cocoonインデックスカード

コメント