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

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

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

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

関連

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;
}

広い1カラム（サイドバーなし）でトップページを作る場合にご活用ください*。

*というのも、サイドバーに大きなサムネイルで新着記事、人気記事一覧を表示している場合、同じCSSクラスが割り当てられてるため、サイドバーの表示が崩れてしまうんですよね。

サイト型にしてみての感想

いろいろ、ちょっとアレンジしようとしてたらちょっと思ったより時間がかかりましたが(;^_^A
基本は、コピペなのでかなり楽でした(*´∀`*)

何かしら時間があると、少しずつカスタマイズしたくなる衝動に( *´艸`)(笑)
不満がある訳ではないけど、より見やすくそしていい感じにならないかな？？？
なんて、思いながらやってます！

ブログ型からサイト型になり、トップもガラリと変わって個人的には満足です(`･ω･´)

まとめ

今回、カスタマイズして改めて思ったことはWordPressは奥が深い！
今まで違うブログサービスを使ってたのでいろいろ違う点が多くてまだまだ不慣れなところも多いですが･･･

楽しみながら、記事を書いたりさせてもらってます♪

今後も、ちょこちょこカスタマイズしていくかも？しれませんが宜しくお願いします<(_　_)>

かりん

それでは、ﾌﾘﾌﾘ((ヾ(｡･ω･｡)ﾏﾀﾈｰ♪
いいねボタン（♡）を押してくれた方
ありがとうございます( *’ω’)
励みになります♪