カスタマイズ ブログ

【Stinger5】トップページのカテゴリに背景ボックスを付ける方法

ブログカスタマイズ

ゴリラっているじゃないですか。あれってカテゴリに似てますよね!^^

そんなカテゴリーですが、この記事では「Stginger5のトップページのカテゴリに背景ボックスを付ける方法」を紹介します!

 

…と言ってもよくわからないと思うので、完成イメージ写真を貼り付けます!  色や角の丸みは個々人で調節できます。

キャプチャ

 


トップページのカテゴリに背景ボックスを付ける方法

さて、それでは説明です。今回はすぐ終わります。

ダッシュボード→外観→テーマの編集から「style.css」を選択します。

キャプチャ

そうしたら、その一番下に下記のスクリプトをコピペします。ただ、その前にバックアップはしておきましょ~。基本、カスタマイズは自己責任になるものなのです。

 

/*-- カテゴリのCSSをカスタマイズ --*/
.blog_info p a {
 margin-right : 3px ;
 color : #FFFFFF ;
 padding: 2px;
 border-radius : 1px ;
 background-color: #4169E1;
}

 

これで完了です。簡単ですね。
本当は隠して自分だけそのカスタマイズをしてしまえ…ぎょへーへ!!!!!とか思ってたのですが、世のため人のために何かできることはないか?と日々考え、今回の公開に踏み切りました。

ちなみに、このブログは「自主映画・音楽・ブログ」などを作る人に向けたブログですが、先日、踏切をテーマにした自主CMを作成したのでよかったらご覧ください。全ては世のため人のため自主映画のためです。

 

細かいカスタマイズをする方は

色や角の丸みを調節したい!という方のために、スクリプトを模擬授業風で解説します。

ケース1

木下くん「文字の色を変えたい!」

先生「 そんなときは color : #FFFFFF ; の♯以降を変えればよいのじゃ! 色のコードはこのページを参照するのじゃ!

ほかにも色んなサイトがあるぞい」

ケース2

骨村さん「角をもっと丸くしたいわ~」

先生「そんなときは border-radius : 1px ; の数字を大きくすればよいのじゃ! やり過ぎると丸くなり過ぎて変になるよ」

ケース3

骨下くん「背景ボックスの色を変えたいんですが」

先生「そんなときは background-color: #4169E1; の♯以降を変えればよいのじゃ! 色のコードはさっきのページを参照しろ」

骨下くん「命令されました」

 

まとめ

どうでしょうか。いい感じのカスタマイズができましたか?

なんとなく覚えてきた初心者レベルのためカスタマイズにはそんなに詳しくないので、もしこれでできなかった!という方がいた場合、対処法がわからないかも…なので、そんなときは諦めて元に戻してください;;;;

ほかにも色々と試して、いいのがあったらこのブログで公開していこうと思います。

 

■この記事も役に立つかも

 

 

ちなみに、もっと色々自由にカスタマイズしたい! という方は本を買うと早いです。急がば回れなのです。