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

初心者ブロガーのアフィリエイトの記録

Cocoonのトップページをサイト型風(?)に改良したい

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

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

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

2.「Cocoon設定」→「インデックス」を選ぶ

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

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

表示の順番を変える場合

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

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

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

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

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

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

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

と設定を変えました。

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

【うつ病体験記・休職中の過ごし方】リハビリにブログ運営をはじめました!
記事の順番が前後してしまいましたが、ブログとアフィリエイトを始めたころの記事をアップします。 ブログを書いてみよう! 自分の気持ちを理解してもらいたい、という感情は強くなるのもこのうつ病の特徴だと思います。 友達や家族にはなかなか伝え...
うつ病主夫が独学でアフィリエイト!目指せ初収益!
アフィリエイト初収益を目指して!長年うつ病を患っているの私がリハビリを兼ねて独学でブログアフィリエイトを始めました。初心者向けアフィリエイト・ブログのノウハウや、SEOやwordpressに悪戦苦闘する様子をブログにしました。
無料でブログPVを増やす対策【独習独学アフィリエイターの備忘録】
気がつけばもう春、うつ病主夫の独学独習アフィリエイト ついこの前2月1日を迎えたと感じていたのが、気が付いたら3月1日。 2月は日数が少ないとは言え、ちょっと早すぎ。 感覚的には1週間程度しか感じていないと子供に話したら、 とうちゃ...
完全孤独な素人ブロガーがアフィリエイトで初収益!
独学アフィリエイトで稼ぐことはできるのか? アフィリエイトは独学で続けているけれど、それでいいんだろうか?と最近は考えますね。 アフィリエイトのブログを見ていると、独学は難しいと言われているみたいです。 私の場合、アフィリエイトは本や...
Wordpressセキュリティー対策|初心者にもおすすめプラグイン
Wordpressセキュリティー対策 その1 「WP doctor Malware scanner Pro」を導入 私のアフィリエイトブログにはもともとAkismet Anti-Spam (アンチスパム)が入っていました。 Jetp...
レントラックスからオファー|フェルマも登録|クローズドASP評判
Rentracksとfelmatの特徴と感想   ☆クローズドASPレントラックスとフェルマの実績、特徴は? ☆ レントラックスとフェルマの評判、口コミは? クローズドASPとは? ASPには大きく分けて2種類あります。通常の...

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

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

.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; /*文字色*/
}
 
https://ikuzoblog.com/cocoon-toppage

Cocoonのトップページをサイト型風(?)に改良のまとめ

Cocoonは参考にできるサイトも多く、素人の私でもカスタマイズができました。あくまでサイト風ですが、多少見やすくなったような気がしています。しばらく様子をみて、時間のある時に固定ページでトップページを作成してみようと思います。

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

初心者でもできるアフィリエイトブログの成約率アップの対策【備忘録】
ブログのPVは増えてきているんだけれど成約率が上がらない。 最近ほぼ毎日、各記事のPV数はチェックするのが日課になりました。スマホでもWordpressが使えるので、暇があると記事を書いてみたり、PVを確認しています。 今は、ブログ...
EWWW Image Optimizerで画像をWebPへ変換【備忘録】
 EWWW Image OptimizerでWebPに変換!ブログの高速化! 「EWWW Image Optimizer」は 「表示速度」を改善したい 「画像ファイルが多くなってきたので圧縮したい」 「次世代画像形式のWe...
Cocoonトップページを固定ページなしで簡単【サイト型風】に
Cocoonのトップページをサイト型風(?)に改良したい Cocoonはトップページを固定ページで作らずに簡単設定 Cocoonは2020.5 Ver.2.1.6.xからトップページの記事一覧をカテゴリー別に横並びやタブメニューで表示す...
初心者でもCocoonでブログ運営|簡単に見出しをカスタマイズ
ブログ初心者の私も使っているWordpressテーマのCocoon。その人気と使うメリットをご紹介します。 ブログ初心者に人気のCocoonとは 私は無料のワードプレスのテーマの「Cocoon」をしています。初心者でも自分好みのサイ...
Search Console「送信された URL に noindex タグが追加されています」とエラーの対処【備忘録】
「送信された URL に noindex タグが追加されています」「X-Robots-Tag' http ヘッダーで 'noindex' が検出されました」とのエラーに対処法をご紹介します。

アフィリエイト関連記事

初心者ブロガーのアフィリエイトの記録
うつ病のリハビリを兼ねて、独習&独学でアフィリエイトブログを始めました。七転八倒しながら、一人前のアフィリエイターを目指して格闘するアフィリエイト体験談です。

コメント

PAGE TOP
error:Content is protected !!
タイトルとURLをコピーしました