【STINGER3】ブログのメインカラーを変更してみる

STINGER3をいじっていて、UIが大幅にくずれてしまった3月末。時間がなくてなかなか手をつけられなかったのですが、一念発起して修正に取り組んだところ、思いの外簡単に修正できたうえになんだか楽しかったので、しばらくSTINGER3をいろいろといじってみることにします。

ブログのメインカラーの変更

現在はデフォルトのテーマを使用しているので、ブログの名前や記事のタイトルは黒文字です。これはこれで見やすいのですが、ぼくは昔から緑が大好きで洋服なんかも緑系が多かったりします。というわけでブログのメインカラーを緑に変更して少しオリジナリティーを出していきたいと思います。※この記事を書きながらいじっていたので、すでにメインカラーを変更した状態になっています。

さてテーマをいじるときに必ずやらなければいけないのがバックアップ。
おそらくもっと正しいやり方があるはずですが、今回もEVERNOTEにいじる前のスタイルシートをコピペします。

ブログの変更履歴とかをEvernoteに入れておく -Evernoteの使い方その2- | ごりゅご.com

①自分の変更したいカラーの16進数を調べる

16進数という数字で色を指定することで、WEB上に表現される色がかわります。そのため、まず自分がイメージする色の16進数を知る必要があります。調べていると原色大辞典というわかりやしサイトがありました。
ここではその色と名称そして16進数を記されているので、すぐに自分の使いたい色とその16進数を見つけることができます。

WEB色見本 原色大辞典 – HTML Color Names

②ブログのカラーを指定している部分を見つける

次にブログのカラーをしている部分を見つけます。STINGER3はこのコードがどこ部分にあたるのかをきちんと日本語で表記してくれているので、ぼくのような素人にも比較的見つけやすいです。今回修正をしたブログのタイトル部分と記事のタイトル部分、そしてh2タグ、h3タグはスタイルシートの上の方にあります。

/*ブログタイトル*/

#container #header #header-in #h-l .sitename {
font-size: 30px;
color: #fff;
margin-bottom: 10px;
line-height: 30px;
}
#container #header #header-in #h-l .sitename a {
color: #006400;/* 元:#333 */
text-decoration: none;
font-weight: bold;
}
/*ブログタイトル下の文*/

#container #header #header-in #h-l h1 {
font-size: 12px;
color: #666;
font-weight: normal;
}
#header #header-in #h-l h1 a {
color: #FFF;
text-decoration: none;
}
#h-l .descr {
font-size: 12px;
color: #666;
font-weight: normal;
margin-bottom: 0px;
line-height: 20px;
}
/*記事タイトル*/

.entry-title {
font-size: 30px;
line-height: 35px;
color: #006400;/* 元:#333 */
margin-bottom: 20px;
}
.entry .entry-content .entry-title a:hover {
text-decoration: underline;
}
.entry-title a {
color: #006400;/* 元:#333 */
text-decoration: none;
}
/*アーカイブタイトル*/

.entry-title-ac {
font-size: 24px;
padding: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
font-weight: bold;
font-size: 24px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
background-color: #FFF;
}
.entry-title-ac a {
color: #006400;/* 元:#333 */
text-decoration: none;
}
.kizi .entry .entry-content .entry-title-ac {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
margin: 0px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0px;
background-image: none;
}
/*中見出し*/

.demo h2 {
font-size: 24px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 75px;
color: #000;
line-height: 30px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: -65px;
background-image: url(images/cah2-bk.png);
background-repeat: no-repeat;
background-position: left top;
}
h2 {
font-size: 24px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 35px;
border-left-width: 10px;
border-left-style: solid;
border-left-color: #006400; /* 元:#1a1a1a */
color: #228b22;/* 元:#333 */
line-height: 30px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: -20px;
}
/*小見出し*/

.moto .post h3 {
font-size: 18px;
margin-bottom: 20px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 20px;
color: #333;
line-height: 30px;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #228b22;/* 元 : #333 */
}
.kizi h3 {
font-size: 20px;
margin-bottom: 30px;
margin-top: 10px;
padding-top: 15px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 60px;
color: #228b22;/* 元:#000000 */
line-height: 30px;
background-image: url(images/cah3-bk.png);
background-repeat: no-repeat;
background-position: left center;
margin-left: 0px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #228b22;/* 元:#999999 */
}
h3 a {
color: #333;
text-decoration: none;
}
h3 a:hover {
color: #C03;
}
.post h4 {
font-size: 16px;
font-weight: bold;
padding: 10px;
margin-bottom: 20px;
background-color: #f3f3f3;
line-height: 28px;
}
.side h4 {
font-size: 16px;
font-weight: bold;
padding: 10px;
margin-bottom: 20px;
line-height: 28px;
}
#footer #footer-in h4 a {
color: #666;
text-decoration: none;
}

いじるのは簡単。でも見やすいサイトになるかは別問題

本当はh3タグの頭にくるチェックボックスの色も変更したかったのですが、どうも画像になっているようで無理でした。

前回もそうだが、じっくり書いてあるコードを見て、何度かいじっていると少しずつですが、サイトに変化を加えられるようになってきました。でも今回は、たた色が変わったっていうだけで見やすくなるというのはまた別の次元の話。
まだまだ、中途半端な部分が多いので、少しずつ改良を加えていきたいです。









コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です