【Cocoon】固定ページを使用してブログのトップページをサイト型に変更！

皆さん、こんばんわー♪(≧∀≦)ﾉ))ﾌﾘﾌﾘ
どうもかりんです(`･ω･´)ゞﾋﾞｼｯ

今回は、WordPress テーマ Cocoon（コクーン）をカスタマイズしました(*´ω`*)

現在、SANGOのテーマを使用しているため内容が古いですのでご注意ください。

以前、テンプレートを導入した時の記事はこちら

2019年8月19日 WordPress テーマ Cocoon（コクーン）を導入＆カスタマイズしてみました

あれからも、細かいところをいじったりとかしたりしていましたが･･･
今回は、大きく変化しました！

スポンサードリンク

ブログトップページの変化

PC上の表示ですが、変更前はこんな感じでした(`･ω･´)

変更前

変更後

固定ページを使用してブログのトップページをサイト型に変更しました(`･ω･´)
大幅リニューアルですね♪

目次へ戻る

カスマイズの参考

まだまだ記事数が少ないですが、カテゴリ事の新着記事一覧などもあると便利ですからね☆
個人的にも、なかなかいいものになったと思っています(*´ω`*)

今回のカスタマイズの参考にさせて頂いたのは、婿養子の島根移住ブログを運営されているはまちゃん（@wakuwakukeigo）さんの記事でしたm(_ _”m)

その記事がこちら

参考【Cocoon】脱ブログ！固定ページでサイト型トップページにカスタマイズする方法婿養子の島根移住ブログ

本当に感謝です(*’∀’人)✨
ありがとうございました┏○))ﾍﾟｺ

細かく説明が書いてあるので、サイト型にしてみたい方は是非参考にしてみてはいかがでしょうか？
コピペで、あとはちょっとコードをいじるだけで簡単に設置できます(´,,･ω･,,`)

私は、ちょっとアレンジさせて頂きました┏○))ﾍﾟｺ
といっても大幅にではないですけどね(;´∀｀)ｱﾊ

新着記事を横一列で表示する方法

通常縦並びの記事ですが、横並びにしました(`･ω･´)
トップのこちらの部分です↓

カスタマイズの参考にさせて頂いたのは、あかえほを運営されているちびこママさんの記事を参考にさせて頂きました┏○))ﾍﾟｺ
ありがとうございました！

その記事がこちら

参考【Cocoonカスタマイズ】ショートコードで新着記事や人気記事一覧をページ内に表示する際、横並びに並べるCSSあかえほ

置きたいページのカスタムCSSにコードをコピペするだけでOK！
私は、ブログのトップページのカスタムCSSに記載しました(`･ω･´)

ほぼ一緒ですが、少しカスタマイズしたコードがこちらです

.widget-entry-cards.card-large-image .a-wrap {
width:32.5%;
height:auto;
display: inline-flex;
}

@media screen and (max-width: 800px) {
.widget-entry-cards.card-large-image .a-wrap {
width:auto;
display: inline-flex;
}
}

.widget-entry-cards.not-default figure img {
padding: .5em;
}

.widget-entry-cards.card-large-image .a-wrap {
font-size: 95%;
text-align: left;
padding:.5em;
}