風景

賢威はどんどん進化し続けるテンプレートです。私も平成9年から愛用させていただいております。
もちろんバージョンアップし続けているのですが・・・デザインの一部や文字色などが賢威6で使っていたテンプレートの方が良かった、なんてことも時々あったりします。

実例的に私の忘備録を兼ねて記録に残しておきたいと思って当ページを用意しました。サイト・ブログの運営の基本は質です。コンテンツの中身です。あまり「見てくれ」的なものにこだわるといたずらに時間の浪費だけに終わったり、自己満足の世界に浸ったりということになりかねません。そこだけはご注意ください。

本質は、稼ぐためです。忘れないようにしましょう。

賢威7のテンプレート・クール(ブラック)の文字色を賢威6のコーポレートに変えてみる

賢威の7で、私のいちばん好きなテンプレートがクールタイプです。シンプルかつ馴染みやすいというイメージです。

無印良品的な感じです。もちろん私が、ピンクや可愛いものが大好きな若い女性であったり、化粧品などのブログを運営するのであれば・・・賢威7のクールはあまり自分のイメージ・皮膚感覚に適さないかも知れません。

まあ、今のところは男が普通に、普通のテーマやキーワードで運営するフログ・サイトですから当たり前と言えば当たり前ですね。いちばん無難な感じがすることから好んで選択しています。

さて、賢威6コーポレートの文字色は、#39fという色コードになっています。
一方、賢威7クール(ブラック)の本文の文字色は、#444となっています。#444は灰色(グレー)です。

新しい方・賢威7のcssを開いてみます。テンプレートにあるcssのフォルダ内に、base.cssというファイルがあります。
それをテキス・トエディタで開きます。(私が使用しているテキスト・エディタはCrescent Eve と TeraPad です)

base.cssの230行目当たりに、賢威テンプレートの共通設定という項目があります。
その242行目には、以下のような文字列が並んでいます。

a{
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
color: #444; ⇒ #39f; に変更します。
}
a:hover,
a:active,
a:focus{
color: #5077a2;
}

パンくずリストの変更

パンくずリストはbase.cssの825行目にあります。

/*——————————————————–
パンくずリスト
——————————————————–*/

.breadcrumbs-in{
margin:0 0 1.5em;
color: #555; ⇒ #39f に変更します。
}

.no-gn .breadcrumbs-in{
margin-top: 0;
}

.breadcrumbs-in a{
color: #555; ⇒ #39f に変更します。
}

.breadcrumbs-in a:hover,
.breadcrumbs-in a:active,
.breadcrumbs-in a:focus{
color: #5077A2;
}

フッターの変更

同じく1021行目当たりに、フッターという箇所があります。

/*——————————————————–
フッター
——————————————————–*/
.site-footer{
background: #444;
color: #fff;
}

.site-footer-in a{
color: #fff;
}

.site-footer-in a:hover,
.site-footer-in a:active,
.site-footer-in a:focus{
color: #5077A2; ⇒ #39f に変えます
}

※ただし、私はわざとフッターだけはそのまま(#5077A2)にしてあります。
まあ、人の好みです。

タイトルの大きさ、太さ(bold)を変えてみる

ヘッダーの部分にあるタイトルです。同じくbase.cssを見ると526行目当たりにヘッダーというところがあります。

/*——————————————————–
ヘッダー
——————————————————–*/
.site-header{
background:#fff;
margin-bottom:-3px;
}
.site-header:after{
content:”;
display:block;
height:3px;
width:100%;
background:#222;
}
.site-header-conts{
width: 100%;
padding: 60px 0 40px;
}
.site-header-in{
position:relative;
}

/*ヘッダーロゴ*/
.site-title{
text-align:center;
margin: 0 auto;
font-size: 2.25em; ⇒ この数値を変えたら文字の大きさが変わります
}

さらにfont-weightという指示事項を入れたら太字になります。次の例は、文字の大きさを変えて、太字にした例です。

/*ヘッダーロゴ*/
.site-title{
text-align:center;
margin: 0 auto;
font-size: 2.0em;
font-weight: bold;
}

賢威7・クールの見出しを賢威7コーポレート・ブラウンの色に変えてみる

これには、ちょっとした工夫が必要です。

実は、テンプレートのbase.cssの中には、h2・・・とかh3・・・といったような見出しや表など、(この場合においては)#222がたくさんありますから、探しながら一つ一つ手作業気味に修正をかける必要があります。
テキストエディタでの検索機能を使いながら、一つずつ確認しながらの修正になるかと思います。

エディタの検索(又は置換)機能で、#222という文字コードを探してみてください。
たとえば、一つの例ですがグローバルナビのところにも#222が登場(出現)します。

/*——————————————————–
グローバルナビ
——————————————————–*/

.global-nav{
padding: 0;
background:#fff;
border-bottom:#222 solid 3px; ⇒ #222を#866659に変更します。
margin-bottom:-3px;
z-index: 200;
position: relative;
}

上のケースは、border-bottomとありますから見出しのアンダーラインの色変更です。デザインに統一感を持たせるようなものです。
また、下のように、backtround-colorにも#222がありますが、これはグローバルナビの背景色です。

.global-nav-in li a:hover,
.global-nav-in li a:active,
.global-nav-in li a:focus{
background-color: #222;
color: #fff;
}

まあ、完全に理解した上での色変更とはならないかも知れませんが、機械的に#222を変更しても良いかも知れません。
一つずつ変更しながら別にブラウザを立ち上げて確認しながら進める方法もあります。、

まとめ

最初は、面倒でしょうけど変更したら忘れることなく「更新」をクリックして、その都度、フログを確認してみてください。
数回の作業で十分に理解・マスターできると思います。

お薦めとしてはやり方そのものをブログの記事にするとかして残しておくことも「アリ」だと思います。一石二鳥です。記事にもなりますし、忘備録にもなってくれます。

ちゃんとノートなどに残しておくようなマメな方もいらっしゃるかと思いますが、私はそれができないタイプです。
そのため・・・こういう私も忘備録として本フログ内に残す、という選択をしました。