【STORK】カテゴリーをCSSカスタマイズ

カスタマイズ前は文字が細い上に無駄な空白が目立ち、サイトカラーに合わない青矢印までついていましたが、カスタマイズ後はサイトの雰囲気に合った見た目になっているのが分かります。

マウスオン時のカスタマイズも可能なので『カテゴリー表示したいけど見た目がちょっとなー』っていう方はこの方法でカスタマイズしてください。下の解説に目を通せば自由に変えれると思います。

/* カテゴリ横の矢印消去 */
.widget li a:after {
display:none !important;
}

/*カテゴリーカスタマイズ*/
.widget_categories ul {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 10px;
line-height: 10px;
font-weight:bold;
}

.widget_categories ul li a {
color: black;
font-size: 1.5em;
transition: 0s;
margin:10px;
padding:10px;
}

.widget_categories ul li a:hover {
transition: 0s;
background:red;
color: white;
border:solid 2px black;
border-radius: 8px 8px 8px 8px;
}

【/*   */】で囲まれている部分は『コードから除外されている部分』になります。後から編集する時の為に『どこの部分のコードか』を記載しておくと分かりやすいです。

上記のコードを【追加CSS】にコピペすれば『カスタマイズ後』の状態になります。それではコードの詳細と構成を説明していきます。今回は大きく4つのコード束に分類されていますので、一番上のコード束から。

 

コード束①

/* カテゴリ横の矢印消去 */
.widget li a:after {
display:none;
}

これがデフォルトでは消す事のできない『矢印』を消すコード。最初の一文で『矢印が表示されている場所』を指定しています。僕はこの場所を探すのにPHPとCSSを猛勉強し、計20時間ぐらいかかりました。

【display:none;】で『非表示』の命令を与えています。これで消えない場合は語尾に【!important】という『絶対命令コード』を付け加え【display:none!important;】と記述すれば消えると思います。

 

コード束②

/*カテゴリーカスタマイズ*/
.widget_categories ul {
font-size: 1.5em;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 10px;
line-height: 10px;
font-weight:bold;
}

1文目で『カテゴリ枠全体』を指定しています。

【font-size】で文字の大きさを指定。

【margin&padding】の数値をいじれば『コンテンツの位置』を微調整できます。

【line-height】は上下間隔を調整できます。

【bold】は『太文字』もし細文字がいいならこのコードを一列まるごと削除。

 

コード束③

.widget_categories ul li a {
color: black;
transition: 0s;
}

コード束③は最初の1文で『通常時の表示』を指定しています。

【color】で色指定。カラーコードでもオッケー。

【transition】は『マウスオン時から通常時に戻るまでの時間』を指定。ここでは0になっていますのでマウスが離れた瞬間『通常時』に戻ります。1にすれば戻るまでに1秒のグラデーションを挟みます。

 

コード束④

.widget_categories ul li a:hover {
transition: 0s;
background:red;
color: white;
border:solid 2px black;
border-radius: 8px 8px 8px 8px;
}

コード束④は最初の1文で『マウスオン時の表示』を指定しています。指定している場所は同じですが【hover】がつくと『マウスオン時』という命令に変わります。

【transition】コード束③でも使用されていましたが、ここでは『通常時からマウスオン時に変わるまでの時間』を指定しています。さっきと逆ですね。

【background】背景色を指定。

【color】文字の色を指定。

【border】枠を付ける命令で【solid】で枠線を『直線』に指定しています。数値は線の太さ、そして色ですね。

【border-radius】この命令で4隅の形状を丸めています。数値を上げればどんどん丸くなり、0にすると四角になります。

 

 

玄関の段差をスロープにする工事