賢威6.2サイト全体、ヘッダーカスタマイズ 文字・背景 色、大きさ等
賢威6.2のCSS等の記述は非常にわかりやすく、
慣れればカスタマイズしやすく
非常に使いやすいテンプレートです。
今回はサイト全体とヘッダー に対する
ほぼ全てのカスタマイズ方法を紹介していきます。
このカスタマイズをマスターすることで
全体の印象を一気に変えることができ、
他のサイトとの差別化もしっかりできますので、
是非この記事でカスタマイズをマスターして下さいね。
賢威6.2記事サイト全体、ヘッダー全カスタマイズ
サイト全体とヘッダーのカスタマイズは、
ワードプレス管理画面から『外観』⇒『テーマ編集』の
『design.css』に集中しています。
下の赤字箇所を変更していくことによって、
あなたがされたい変更はほとんど行なうことができます。
※サイト全体の背景色の変更は『クール版』のみ場所が違うので一番下で紹介しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
/*-------------------------------------------------------- 1、サイト全体の背景設定 ------------------------------------------------------*/ #container{ background-color: #fff; } /*サイト全体の背景色*/ /*-------------------------------------------------------- 2、サイト全体の共通設定 -------------------------------------------------------*/ body{ color: #333; } /*サイト全体の文字色*/ /*●リンク文字*/ a{ text-decoration: underline; } a:link, a:visited{ color: #39f; } /*リンク文字色の指定*/ a:hover, a:active{ color: #f60; } /*リンク文字マウスオーバー時色の指定*/ /*-------------------------------------------------------- 3、エリアの設定 --------------------------------------------------------*/ #container{ position: relative; padding-top: 25px; } /*～～～～～～～～～～～～～～～～～～～～～～～～～～ 途中省略 ～～～～～～～～～～～～～～～～～～～～～～～～～～*/ /*-------------------------------------------------------- コンテンツ全体 --------------------------------------------------------*/ #main-in{ padding-top: 1.5em; } /*グローバルメニュー下間隔*/ /*●メイン画像*/ #main-image{ padding-top: 1.5em; } #main-image-in{ position: relative; padding-bottom: 1.5em; } #main-image img{ width: 100%; height: auto; } #main-image .catch-copy{ position: absolute; top: 1em; /*メイン画像のキャッチコピー文字位置調整*/ left: 1em; /*メイン画像のキャッチコピー文字位置調整*/ color: #fff; /*メイン画像のキャッチコピー文字色*/ font-size: 3em; /*メイン画像のキャッチコピー文字大きさ*/ } /*～～～～～～～～～～～～～～～～～～～～～～～～～～ 途中省略 ～～～～～～～～～～～～～～～～～～～～～～～～～～*/ /*-------------------------------------------------------- メインコンテンツ（本文） --------------------------------------------------------*/ #main-contents{ font-size: 1.4em; } /*サイト全体の文字の大きさ*/ #main-contents .contents{ margin-bottom: 3.5em; /*フッター上部スペース調整*/ padding: 0 10px; } |
※『クール版』の場合
クール版のみ背景色を変更する際の記述場所が違います。
（CSSファイルはdesign.cssで変わりありません。）
下記のHTML箇所を変更して下さい。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/*-------------------------------------------------------- コンテンツ全体 --------------------------------------------------------*/ #main{ background-color: #f0f0f0; /*背景を指定*/←こちらを変更 } #main-in{ padding-top: 1em; padding-bottom: 1em; } /*●メイン画像*/ |
アフィリエイトを行っている場合は、
記事文章を読みやすくして、メッセージを
伝えられるかが非常に大事です。
そういった点を意識して賢威6.2をカスタマイズして
あなたのサイトの反応を上げていかれることをおすすめします。
また、
賢威6.2の全パーツカスタマイズ一覧まとめページを作成しましたので、
他の箇所をカスタマイズされたい場合は一度見てみて下さいね。
⇒賢威6.2【全カスタマイズを一覧まとめ】ワードプレステンプレート
