あつ森のマイデザイン配布中

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

【Cocoon】ブログのトップページをサイト型に変更

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

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

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

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

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

とのことでした! なるほど💡
有難いです┏○))ペコ ちなみに、新着記事のショートコードはこちらです
 
[new_list count=”3″ type=”large_thumb_on” cats=”all” children=”0″ post_type=”post”]

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

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

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

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

まとめ

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

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

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

かりん
かりん

それでは、フリフリ((ヾ(。・ω・。)マタネー♪
ランキングバナーを押してくれた方
ありがとうございます( *’ω’)
励みになります♪

☆ランキング参加中☆
 にほんブログ村 ゲームブログ ニンテンドースイッチへ

0

2 COMMENTS

アバター うめ

こんにちは。自分のブログに応用したいと思います。
一つ教えてください。
新着記事を置くときのショートコードというやつですが、それは上記のCSSと同じ場所に(下とかに)記載するので合っていますか?

0
返信する
かりん かりん

こんにちは。
返信が遅れてしまいすみません!
ショートコードは、固定ページ(トップページ)などの表示したい場所に記載する感じです。
ショートコードとCSSは別のものなのです。
わかりづらい場合いや、また気になる点がございましたらご気軽にコメントをください。

0
返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

 日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)