【ブログノート】随時更新　”CSSコードを利用してカスタマイズ”　　～超初心者・アラフィフの私がブログ始めました～

グローバルメニューを白線で区切りをつける

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;

タグクラウド（ウィジェット→サイドバー）をカスタマイズ

}
/* タグクラウドのフォントサイズを統一 */
.tagcloud a {
    font-size: 16px !important;
    height: 45px;
}
/* タグクラウドのマウスオーバー時の背景色 */
.tagcloud a:hover {
    background-color: #cbcccd;
    text-decoration: none;
    color: #000;
}
/* タグクラウドの下線 */
.tagcloud a{ 
  border-bottom: 1px dashed #CCCCCC; /* 下線の種類 */

カテゴリページ・タグページ（非固定ページ）のサイドバーをPCで非表示/モバイルで表示　

}
/* カテゴリ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;

【ブログノート】