Cocoonトップページを固定ページなしで簡単【サイト型風】に

Cocoonのトップページをサイト型風（？）に改良したい
Cocoonのトップページをサイト型風（？）に改良のまとめ

Cocoonのトップページをサイト型風（？）に改良したい

Cocoonはトップページを固定ページで作らずに簡単設定

Cocoonは2020.5　Ver.2.1.6.xからトップページの記事一覧をカテゴリー別に横並びやタブメニューで表示することができるようになりました。
この機能を使えば、固定ページを作って新着記事ショートコードやから表示をマニュアルで作る必要がありません。方法はいたって簡単で、

1．Wordpressの「設定」→「表示設定」で「最新の投稿」にしておく。

２．「Cocoon設定」→「インデックス」を選ぶ

３．表示形式をカテゴリーごとにし、表示させたいカテゴリーにチェックをいれる

だけでそれらしいトップページになります。カテゴリーではなくタブを選ぶと４つまでのタブ表示ができるようになります。

表示の順番を変える場合

「カテゴリ表示の順番を並び替える場合はこちら」をクリックするとカテゴリーIDをいれることができるようになります。
「投稿→カテゴリー」から各カテゴリーを表示させ、そのタイトル上にマウスを乗せるとブラウザの下のほうにアドレスがでてきます。そのID=＃＃の数字の部分がIDです。

新着記事一覧だけ非表示に

Cocoonのトップページをもう少し見やすくしたいなあ、できればもう少しカッコよくと思っていました。いろいろ調べると固定ページを導入するのが一般的です。ただ、トップページをどんな感じに仕上げようかまだイメージが固まらないので、カテゴリー表示は残して新着記事一覧だけを非表示にしてみようと思いました。

ちょっと調べると「新着記事」だけを消すだけであれば、次のCSSを子テーマのstyle.cssに追加すれば消えるようになります。

.list-new-entries {
display: none;
}

ただ「新着記事」が消えることで、「新着記事」の下に表示されていたアドセンス広告がそこに表示されるようになります。そこで、

Cocoon設定→ウイジェットエリア→インデックスリストトップ、インデックスリストミドル、インデックスリストボトムにチェック

と設定を変えました。

アフィリエイト関連記事 #1

【うつ病体験記・休職中の過ごし方】リハビリにブログ運営をはじめました！

記事の順番が前後してしまいましたが、ブログとアフィリエイトを始めたころの記事をアップします。ブログを書いてみよう！自分の気持ちを理解してもらいたい、という感情は強くなるのもこのうつ病の特徴だと思います。友達や家族にはなかなか伝えにくかったり、理解してもらうことが難しいケースも多いんです。また心療内科の先生では、時間もなくて話をすべてうけとめてもらうことも難しいです。そこで、誰かに話をするつもりでブ...

うつ病主夫が独学でアフィリエイト！目指せ初収益！

アフィリエイト初収益を目指して！長年うつ病を患っているの私がリハビリを兼ねて独学でブログアフィリエイトを始めました。初心者向けアフィリエイト・ブログのノウハウや、SEOやwordpressに悪戦苦闘する様子をブログにしました。

無料でブログPVを増やす対策【独習独学アフィリエイターの備忘録】

気がつけばもう春、うつ病主夫の独学独習アフィリエイトついこの前2月1日を迎えたと感じていたのが、気が付いたら3月1日。２月は日数が少ないとは言え、ちょっと早すぎ。感覚的には1週間程度しか感じていないと子供に話したら、とうちゃん、おかしいよ！って馬鹿にされてしまいました。近所の公園の早咲きの桜はもう散っていました。梅はちょうど満開。そうか、3月になったってことは昨日で傷病手当切れたんだな。4月になれ...

完全孤独な素人ブロガーがアフィリエイトで初収益！

独学アフィリエイトで稼ぐことはできるのか？アフィリエイトは独学で続けているけれど、それでいいんだろうか？と最近は考えますね。アフィリエイトのブログを見ていると、独学は難しいと言われているみたいです。私の場合、アフィリエイトは本やブログで勉強していますが、知らない間に間違えたことをやってしまって、それに気づくのに時間がかかっているようにも感じます。高額な情報商材を購入したり、塾に入ったり、コンサルを...

Ｗordpressセキュリティー対策｜初心者にもおすすめプラグイン

Ｗordpressセキュリティー対策その１「WP doctor Malware scanner Pro」を導入私のアフィリエイトブログにはもともとAkismet Anti-Spam (アンチスパム)が入っていました。JetpackのダッシュボードにAkismetのサマリーみたいなのがでてくるのですが、とあるブログに関しては総当たり攻撃に対する保護機能5,229ブロックした悪意あるログイン試行ス...

レントラックスからオファー｜フェルマも登録｜クローズドASP評判

Rentracksとfelmatの特徴と感想 ☆クローズドASPレントラックスとフェルマの実績、特徴は？☆ レントラックスとフェルマの評判、口コミは？クローズドASPとは？ASPには大きく分けて２種類あります。通常のASP（オープンASP）の場合、希望者はだれでも登録して利用することができます。もう一つはクローズドASPと呼ばれるもので、一般的な募集を行わずに、それぞれのASP独自の方法でメディア...

カテゴリー一覧のタイトル部分や「もっとみる」ボタンも作り変えました。

文字数が増えるとカテゴリー一覧のタイトル表示が見にくくなるのでがんばって変更してみました。

.list-title-in{
display: inline-block;/*表示形式*/
padding: 0.5em 3em;/*文字の上下左右の余白*/
font-size: 18px;/*文字の大きさ*/
background: #ffa1bf;/*ボタン色*/
color: #FFF;/*文字色*/
border-bottom: solid 4px #ff0099;/*下線の種類・太さ・色*/
border-radius: 8px;/*角の丸み*/
}

.list-title-in:before, .list-title-in:after {
display: none;/*文字の横の線を消す*/
}

もっと見るボタンもホバー時に色が変わるようにしました。

/*カテゴリーごと表示の「もっと見る」ボタン*/
.list-more-button:hover{
background: #233B6C; /*背景色*/
color:#fff; /*文字色*/
}