Cooconを愛用しています。開発者のわいひら様には本当に感謝申し上げます。また、多くのブロガーがCSSコードを提供してもらい、私のブログもいろいろと改善させてもらっています。
ブログカードのラベルが表示されていないことに気づいていろいろ調べたら、背景白でラベルも白で埋もれてしまっていました。色を変更したら表示されました。CSSって便利ですよね。CSSコードを使い過ぎて、なにがなんだか分からなくなってきたので、ブログノートにまとめることにしました。
【ワンポイント】
CSSは、たった1文字の入力ミスでも反映されないことがあります。
- 「{」 … ここから設定を書く
- 「}」 … ここで設定が終わる
「.sample {」のように「{」を書いたら、最後に必ず「}」で閉じます。うまく反映されないときは、「{」と「}」が対になっているか確認してみてください。たった1文字が原因だった！ということも意外と多いですよ。
実は私は、「{」と「}」がセットになっていることを知りませんでした（笑）。
- グローバルメニューを白線で区切りをつける
- グローバルメニューのフォントサイズ変更
- グローバルメニューを横幅ぎりぎりまでメニューを並べる
- モバイルのグローバルメニューの高さを変更
- モバイルのグローバルメニューのフォントサイズを変更
- おすすめカード モバイルで非表示
- サイドバー見出し装飾
- 見出しデザイン変更
- カテゴリにアイコンや線を入れて見やすくする
- ブログカードのラベル色変更
- フッター上部に点線
- フッターの余白
- モバイルフッターを一列に
- 投稿本文下のウェジェットのみ真ん中寄せ
- サイドバーのタグクラウドをカスタマイズ
- カテゴリページ・タグページ（非固定ページ）のサイドバーをPCで非表示/モバイルで表示
- コンテンツ・投稿ページ上部の余白を削除
グローバルメニューを白線で区切りをつける
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;
}グローバルメニューを横幅ぎりぎりまでメニューを並べる
知りたいねっと様の記事を参考にしました。横幅が広がってジャストフィットしました。諦めかけていたのでみつけたときは本当にうれしかった。感謝です。
モバイルのグローバルメニューの高さを変更
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をコピーさせていただきました。
サイドバー見出し装飾
情報ビジネス支援クラブ様の記事からCSSコードをコピーさせていただきました。「淡い背景に白の点線枠」を選びました。
見出しデザイン変更
Xserver様の見出しデザイン18選から「ナチュラル・キュートな見出しデザイン【4】」を選びました。
カテゴリにアイコンや線を入れて見やすくする
ゆずゆろぐ様の記事からCSSをコピーさせていただきました。マウスのクロスオーバー時に背景色を入れるようにしました。
/* カテゴリマウスオーバー時の背景色 */
.widget_categories ul li a:hover {
background-color: #cbcccd;
text-decoration: none;
color: #000;
}ブログカードのラベル色変更
pyonlog.com様の記事からCSSをコピーさせていただきました。
フッター上部に点線
solidは一本線。doubleは二重線。dottedは点線。dashedは破線。私はdottedの青にしています。
/*フッター上部に点線*/
.footer {
border-top: 4px dotted #72c7e6; /*上部に点線追加*/
}フッターの余白
フッターの余白をなしにしました。
/*フッターの余白変更*/
.footer {
margin-top: 0px; /フッターとコンテンツの間/
}
.footer-bottom {
margin-top: 0px; /フッター内上部の余白/
}
モバイルフッターを一列に
Cooconフォーラムで見つけました。記事のCSSではうまくいかなかったのでアレンジを加えました。
/*フッターメニューを一列にする*/
@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; /*フッターメニューの文字の大きさを変更*/
}投稿本文下のウェジェットのみ真ん中寄せ
.article-footerを足すことにより、投稿本文したのウィジェットのみを真ん中寄せにできました。すべてにするとサイドバーのカテゴリも真ん中寄せになってしまいます。
/* 投稿本文下のウィジェットのみ真ん中寄せ */
.article-footer .widget {
text-align: center;
}サイドバーのタグクラウドをカスタマイズ
サイドバーのタグクラウド（KODI・ファイルマネージャー＋）の文字サイズ・下線などカテゴリと同じ仕様にしたかった。さらにタグを1行で改行したかった。
/* タグクラウドのフォントサイズを統一・1行表示 */
.tagcloud a {
font-size: 16px !important;
display: block !important;
width: 100%;
height: 38px;
}
/* タグクラウドのマウスオーバー時の背景色 */
.tagcloud a:hover {
background-color: #cbcccd;
text-decoration: none;
color: #000;
}
/* タグクラウドの下線 */
.tagcloud a {
border-bottom: 1px dashed #CCCCCC;
}カテゴリページ・タグページ（非固定ページ）のサイドバーをPCで非表示/モバイルで表示
カテゴリページ（沖縄・お気に入り・めだかなど）・タグページ（KODI・ファイルマネージャー＋）をパソコン開いたときにサイドバーは非表示にして、モバイルではフッターのモバイルボタンにサイドバーを常に表示させたかった。
/* カテゴリ1カラム */
@media screen and (min-width: 1024px) {
.category .content-in {
display: block;
}
.category .main {
width: 100%;
}
}
@media screen and (min-width: 1024px) {
.category #sidebar {
display: none;
}
}
/* タグ1カラム */
@media screen and (min-width: 1024px) {
.tag .content-in {
display: block;
}
.tag .main {
width: 100%;
}
}
@media screen and (min-width: 1024px) {
.tag #sidebar {
display: none;
}
}
コンテンツ・投稿ページ上部の余白を削除
モバイルでトップページを開いたときに、おすすめカードの下と投稿記事ページ上部の間の余白が広いのが気になったため、余白をなくした。
/* コンテンツ上部の余白をなくす */
.content {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* メインコンテンツ */
.main {
padding-top: 0 !important;
}