Cooconを愛用しています。開発者のわいひら様には本当に感謝申し上げます。また、多くのブロガーがCSSコードを提供してもらい、私のブログもいろいろと改善させてもらっています。
ブログカードのラベルが表示されていないことに気づいていろいろ調べたら、背景白でラベルも白で埋もれてしまっていました。色を変更したら表示されました。CSSって便利ですよね。CSSコードを使い過ぎて、なにがなんだか分からなくなってきたので、ブログノートにまとめることにしました。
グローバルメニューを白線で区切りをつける
Cooconフォーラムでみつけて、少しアレンジしました。モバイルに反映させたくて上部にも白線を加えました。Cooconフォーラムグローバルメニューを白線で区切りについて
/*グローバルメニューの白線区切り*/
#navi .navi-in > ul > li{
border-left: 1px solid #ffffff;
}
#navi .navi-in > ul > li:last-child{
border-right: 1px solid #ffffff;
}
#navi .navi-in > ul > li{
border-top: 1px solid #ffffff;
}
.navi-in > ul > .menu-item-has-children > a::after{
right: 10px;
}グローバルメニューのフォントサイズ変更
/*グローバルメニューのフォントサイズ変更*/
.navi-in .menu-header .item-label{
font-size: 14px;
}グローバルメニューを横幅ぎりぎりまでメニューを並べる
知りたいねっと様の記事を参考にしました。横幅が広がってジャストフィットしました。本当に助かりました。諦めかけていたのでみつけたときは本当にうれしかった。https://shiritai.net/cocoon_header-globalnavigation/#google_vignette
モバイルのグローバルメニューの高さを変更
Cooconフォーラムで見つけました。 Cooconフォーラムグローバルナビメニューの高さを変更したい
/*モバイルグローバルメニューの高さ変更*/
@media screen and (max-width: 834px) {
#navi .navi-in > .menu-mobile li {
height: 34px;
}
#navi .navi-in > .menu-mobile > .menu-item-has-description > a > .caption-wrap {
height: 34px;
}
}
モバイルのグローバルメニューのフォントサイズを変更
/*モバイルグローバルメニューのフォントサイズ等変更*/
#navi .navi-in > .menu-mobile li a {
font-size: 13px;
}
おすすめカード モバイルで非表示
Web構築の備忘録と本探し様の記事からCSSをコピーさせていただきました。https://ayaito.net/cocoon/c_customize/32666/
サイドバー見出し装飾
情報ビジネス支援クラブ様の記事からCSSコードをコピーさせていただきました。「淡い背景に白の点線枠」を選びました。https://info-biz.club/wordpress/cocoon/cocoon-sidebar-custom.html
見出しデザイン変更
Xserver様の見出しデザイン18選から「ナチュラル・キュートな見出しデザイン【4】」を選びました。https://www.xserver.ne.jp/blog/blog-headlines-design/
カテゴリにアイコンや線を入れて見やすくする
ゆずゆろぐ様の記事からCSSをコピーさせていただきました。https://yuzuyu3.com/cocoon-cate/
ブログカードのラベル色変更
pyonlog.com様の記事からCSSをコピーさせていただきました。https://pyonlog.com/change-blog-card-label-color/
フッター上部に点線
solidは一本線。doubleは二重線。dottedは点線。dashedは破線。私はdottedの青にしています。
/*フッター上部に点線*/
.footer {
border-top: 4px dotted #72c7e6; /*上部に点線追加*/
}フッターの余白
フッターの余白をなしにしました。
/*フッターの余白変更*/
.footer {
margin-top: 0px; /フッターとコンテンツの間/
}
.footer-bottom {
margin-top: 0px; /フッター内上部の余白/
}
モバイルフッターを一列に
Cooconフォーラムで見つけました。記事のCSSではうまくいかなかったのでアレンジを加えました。Cooconフォーラム・フッターメニューを一列にする
/*フッターメニューを一列にする*/
@media screen and (max-width: 834px){
.navi-footer-in>.menu-footer{
flex-wrap: nowrap; /*フッターメニューを一列に*/
justify-content:space-between;
}
.navi-footer-in a{
font-size: 13px; /*フッターメニューの文字の大きさを変更*/
}【ブログノート】
