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

【Cocoon】ブログのトップページをサイト型に変更 カスタマイズ
この記事は約5分で読めます。

皆さん、こんばんわー♪(≧∀≦)ノ))フリフリ
どうもかりんです(`・ω・´)ゞビシッ

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

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

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

スポンサーリンク

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

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

変更前

変更前

変更後

サイト型に変更しました!

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

カスマイズの参考

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

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

その記事がこちら

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

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

私は、ちょっとアレンジさせて頂きました┏○))ペコ
といっても大幅にではないですけどね(;´∀`)アハ

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

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

横並び

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

その記事がこちら

置きたいページのカスタム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クラスが割り当てられてるため、サイドバーの表示が崩れてしまうんですよね。

とのことでした! なるほど💡
有難いです┏○))ペコ
ちなみに、新着記事のショートコードはこちらです
[~new_list count=”3″ type=”large_thumb_on” cats=”all” children=”0″ post_type=”post”~]
前後の~は消して使って下さい(*’▽’*)b

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

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

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

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

まとめ

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

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

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

かりん
かりん

それでは、フリフリ((ヾ(。・ω・。)マタネー♪

拍手ボタンを押してくれた方ありがとうございます( *’ω’)

励みになります♪

コメント(感想)も良かったら書いてね♪

この記事が気に入ったら
いいね ! しよう

Twitter で

コメント

タイトルとURLをコピーしました