賢威カスタマイズ(賢威6)ヘッダー部分をインパクトがあるようにする!

賢威6カスタマイズ

WPテーマとして(特に最近では)いろんなテンプレートが登場しました。

最近メジャーなものはSWELLがあるかと思います。
WP初期の頃からのテンプレートで、賢威というWPテーマがありました。

秋田秀一

今回の記事は、賢威というテンプレートを2003年から使い続けてきている元銀行員で定年退職後にネット通販で起業した私がご案内します。

賢威のバリエーションをさらに一歩進めて自分好みにデザインを変えてみる方法の案内は、あくまでも自己流の好みの一環でカスタマイズしたものです。

(繰り返しますね)
ただし、今回の記事は賢威のバージョン6です。
(賢威6のテンプレートを使ってのカスタマイズになります)

※正直、令和になった今現在賢威のバージョン6を使っている方はいらっしゃらないかとは思いますけど。

【今回の記事の内容】
・賢威6コーポレートのデザインを変える

について忘備録的に説明します。

個人的に私は賢威2から賢威8までのユーザーです。
元銀行員の秋田が運営している本ブログの今回の記事は、あくまでも賢威カスタマイズの個人的な、かつ備忘録的な記事だったものです。(賢威6のカスタマイズですから。今は賢威8までバージョンアップしています)

\ 3年以内に借金300万円を0(ゼロ)にする /
借金ダイエット30ドットコム 

借金ダイエット30ドットコムバナー画像
借金ダイエット30ドットコムのイメージ
目次

コーポレイトのデザインを変える

ヘッダー部分を少し(インパクトのあるように)変える。

ヘッダーロゴを太字にして、フォントサイズを小さく。
グローバルナビを上下のラインを太くして目立つようにする。
(それと、画像のコメントを太くする)

ログイン画面から 外観 ⇒ テーマ編集 ⇒ design.css を開きます。

#header .header-logo{
margin-bottom: 0.2em;
font-size: 2.5em;
}

を次のように変えます。

#header .header-logo{
margin-bottom: 0.2em;
font-size: 2em;
font-weight: bold;
}

そしてヘッダー右側の文章とh1のフォントを変えます。

/*●ヘッダーテキスト・右上の文章*/
#header-in #header-text{
float: right;
width: 40%; /*・1行の幅はwidthの値を変更*/
color: #333;
font-size: 1.1em;
font-weight: bold;
}

#header h1{
margin-bottom: 1em;
padding-left: 0.5em;
font-size: 1.167em;
font-weight: bold;
}

次にグローバルナビの変形です。

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

#global-nav{
background-color: #fff;
border-bottom: 4px solid #000;
} /*メニュー下のラインの設定*/

これを次のようにします。

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

#global-nav{
background-color: #fff;
border-top: 3px solid #000;
border-bottom: 3px solid #000;
} /*メニュー下のラインの設定*/

さあ、最後です。
キャッチコピーの字体・フォントを変えます。

#main-image .catch-copy{
position: absolute;
top: 1em;
left: 1em;
color: #fff;
font-size: 3em;

これを以下のようにします。

#main-image .catch-copy{
position: absolute;
top: 1em;
left: 1em;
color: #fff;
font-size: 2em;
font-weight: bold;

さらにグローバルナビの高さを変えておしまいです。

/*●グローバルメニュー*/
#global-nav .menu-wrap{ display: block; }

#menu{
padding-bottom: 5px;
font-size: 1.2em;
}

こんな感じです。

/*●グローバルメニュー*/
#global-nav .menu-wrap{ display: block; }

#menu{
padding-bottom: 0px;
font-size: 1.2em;
}

まとめ

今ではランディングページとか、1カラム、2カラムといったキーワード・概念をよく耳にするようになりましたが、昔はそんな柔軟性のあるWPテーマなどもあまり存在していませんでした。

1つにはスマホの普及が著しく進んだことがあるかと思います。

その影響でレスポンシブデザインに対応できるようになったWPテーマ(テンプレート)がどんどん登場するようになったと思っています。

昔のカスタマイズではなくて、あらかじめWPテーマの中にランディングベージを用意できるデザインが用意されているものもあります。いい時代になったものです。

秋田秀一

残念ながら自分が本記事でカスタマイズしたサイトはすでに消滅しています。違うデザインのWPになっていますので、ご案内できません。どうぞご理解・お許しください。

ここまで本当にありがとうございました。

スポンサードリンク

【自社CM】
\ オリジナルの副業モデル /
ママドリーム 副業

ママドリーム 副業バナー画像
新しい副業モデルです
賢威6カスタマイズ

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

秋田秀一のアバター 秋田秀一 コンサル・ネットビジネス

元銀行員・約30年勤めて定年退職後にコンサル・ネットビジネスで起業しました。副業・お小遣いアップ・ローン返済を応援しています。⇒ 秋田秀一公式サイト

目次