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

秋田です。

賢威カスタマイズの個人的な、かつ備忘録的な記事です。
賢威のバリエーションをさらに一歩進めて自分好みにデザインを変えてみる方法の案内。(あくまでも自己流の好みです)

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

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

・賢威6コーポレートのデザインを変える

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

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

 

【自社CM・オリジナルの副業モデル】
⇒ 1グラムの副業

 

目次

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

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

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

ログイン画面から 外観 ⇒ テーマ編集 ⇒ 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;
}
 

まとめ

賢威6カスタマイズイメージ画像

私は賢威バージョン2から愛用しています。
バージョンアップし続けてきた賢威の6はPCとスマホとの両方の画面でみて、違和感なく見ることのできるテンプレートです。
今回のこの賢威6のカスタマイズについての記事でした。

さらに進化した賢威7はPCとスマホの両方にフレキシブルな表示ができる優れものでした。
それがさらに・・・2019年の初夏には賢威8が登場しました。

賢威はカスタマイズすることでかなりデザインのイメージを変えることができます。
逆に、慣れないと難しいかも知れません。

でも逆に勉強にもなりますし、htmlのタグ打ちができるようなレベルだとカスタマイズも(試行錯誤しながらでも)それなりに可能かと思います。

老婆心ながらのアドバイスを一つだけ・・・

【まとめ】
・カスタマイズにコリだすとキリがありません。
・本質はSEOです。コンテンツの充実です。
・デザイン面でのカスタマイズは読者が離脱することなく少しでも滞在時間が長くなる方向を追求するといった程度で考えるのがベターです。(あまり深入りしない、ということです)

なぜなら・・・

自分のパソコンとまったく同じパソコンで(同じ条件で)読者が記事をみることは100%ないからです。

そもそもデバイスそのものが違います。
PCで見る人、スマホで見る人、タブレットで見る人・・・
デバイスにインストールしている「ブラウザ」も違います。

見え方が違って当たり前、です。
深入りして自分が満足しても、読者にとってはそこまで意識することなく記事を読んでいるのが実情だと思います。

カスタマイズに費やすエネルギーがありすぎるくらい、あるのなら・・・記事作成、記事見直し・リライト、コンテンツの充実にそのエネルギーを向ける方が絶対にいい、と言えます。
 

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

 

スポンサードリンク



 

よかったらシェアしてね!

この記事を書いた人

秋田秀一と申します。銀行に31年勤務して定年退職後、二足の草鞋を履いています。副業・起業・借金(資金調達と返済)についてお手伝いできましたらうれしい限りです。⇒ プロフィール

目次
閉じる