皆さん、こんばんわー♪(≧∀≦)ノ))フリフリ
どうもかりんです(`・ω・´)ゞビシッ
今回は、WordPress テーマ Cocoon(コクーン)をカスタマイズしました(*´ω`*)
以前、テンプレートを導入した時の記事はこちら
.png)
あれからも、細かいところをいじったりとかしたりしていましたが・・・
今回は、大きく変化しました!
目次
ブログトップページの変化
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クラスが割り当てられてるため、サイドバーの表示が崩れてしまうんですよね。
有難いです┏○))ペコ ちなみに、新着記事のショートコードはこちらです
サイト型にしてみての感想
いろいろ、ちょっとアレンジしようとしてたらちょっと思ったより時間がかかりましたが(;^_^A
基本は、コピペなのでかなり楽でした(*´∀`*)
何かしら時間があると、少しずつカスタマイズしたくなる衝動に( *´艸`)(笑)
不満がある訳ではないけど、より見やすくそしていい感じにならないかな???
なんて、思いながらやってます!
ブログ型からサイト型になり、トップもガラリと変わって個人的には満足です(`・ω・´)
まとめ
今回、カスタマイズして改めて思ったことはWordPressは奥が深い!
今まで違うブログサービスを使ってたのでいろいろ違う点が多くてまだまだ不慣れなところも多いですが・・・
楽しみながら、記事を書いたりさせてもらってます♪
今後も、ちょこちょこカスタマイズしていくかも?しれませんが宜しくお願いします<(_ _)>
こんにちは。自分のブログに応用したいと思います。
一つ教えてください。
新着記事を置くときのショートコードというやつですが、それは上記のCSSと同じ場所に(下とかに)記載するので合っていますか?
こんにちは。
返信が遅れてしまいすみません!
ショートコードは、固定ページ(トップページ)などの表示したい場所に記載する感じです。
ショートコードとCSSは別のものなのです。
わかりづらい場合いや、また気になる点がございましたらご気軽にコメントをください。