賢威6.2でサイドバー変更まとめ 文字大きさ色見出し背景 幅まで!!
サイドバーは多くの訪問者が注目する場所であり、
サイドバーをうまく利用することで物販アフィリエイトでは
収益を増やしていくことができます。
よって
今回は賢威6.2サイドバーの
- 文字の大きさ
- 見出し文字の色
- 見出しの色
- 見出し枠の色
- 見出し下線の色
- コンテンツ下の余白幅
- サイドバーの幅
とほぼ全てのサイドバーの変更(カスタマイズ)方法を
お教えしていきます。
これらの設定をマスターすることでサイドバーをかなり細かく、
あなたの好み通りにカスタマイズしていくことができます。
しっかりマスターしていきましょう。
賢威6.2サイドバー見出し文字 大きさ、色カスタマイズ方法
賢威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 |
/*-------------------------------------------------------- サブコンテンツ / サイドバー --------------------------------------------------------*/ #sub-contents, #sidebar, #sidebar-in, #sub-contents-in{ margin: 0; padding: 0; } * html #sub-contents, * html #sidebar{ overflow: hidden; } #sub-contents .sub-contents-btn, #sidebar .sidebar-btn{ display: none; } .sub-column{ font-size: 1.2em; } /*全体の文字の大きさ*/ .sub-column li{ list-style: none; } /*●コンテンツ*/ .sub-column .contents{ margin-bottom: 1.5em; padding: 0.5em; } .sub-column hr{ clear: both; } .sub-column h3{ padding: 0.7em; border: 1px solid #959595; /*サイドバー見出しの枠線/横線、下線色*/ border-top: 3px solid #414141; /*見出しの上部の太線/上部線色*/ color: #454545; /*見出し文字の色*/ font-weight: bold; } |
賢威6.2サイドバー幅変更方法
『外観』⇒『テーマ編集』⇒『layout.css』
と進み、各カラムの幅の比率を変更します。
現在最も多いと予想される2カラムでの
変更方法を紹介しますと、
まず『layout.css』内の『2カラム』という
キーワードを検索します。
変更による変化はコメントアウト部分(/* */に囲まれた箇所)を
参考にして下さい。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/*-------------------------------------------------------- 2カラムレイアウト --------------------------------------------------------*/ .col2 #container, .col2 #top, .col2 #header, .col2 #global-nav, .col2 #main, .col2 #main-image, ~~~~~~~~~~~~~~~~~~~~ 途中省略 ~~~~~~~~~~~~~~~~~~~~ .col2 #sidebar, .col2r #sidebar{ width: 29.5%; } <span style="color: #ff0000;">/*サイドバーの幅*/</span> .col2 #main-and-sub, .col2r #main-and-sub{ width: 66.8%; } <span style="color: #ff0000;">/*記事部分の幅*/</span> |
『2カラム』の設定箇所の後半部分に上記のように
幅の比率が設定してありますので、
最終的にこの2つのパーセンテージを足した96.3%になるように、
数値を変えていけば好きな幅に設定変更することができます。
上記の変更を行っていくことで、サイドバーを
あなたのイメージにかなり近づけることが出来るはずです。
うまく活用していって下さい。
また、
賢威6.2の全パーツカスタマイズ一覧まとめページを作成しましたので、
他の箇所をカスタマイズされたい場合は一度見てみて下さいね。
⇒賢威6.2【全カスタマイズを一覧まとめ】ワードプレステンプレート