サイドバーのカスタマイズをするときはウィジェットメニューからイジることがほとんどなのですが、見出しのデフォルト設定をオリジナル画像に変える場合はテーマを書き換える必要があります。
今回は賢威6.2テンプレートのサイドバーの見出をオリジナル画像にする方法を説明していきたいと思います。
賢威6.2のサイドバーを変更する時の場所
賢威6.2の場合は、『外観』→『テーマ編集』→『design.css』に行きます。
下記コードのsub-column h3内を書き換えることでサイドバーをオリジナルに変更することが出来ます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/*●コンテンツ*/ .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; } |
例えば下記このコードを書き込んで(アップした画像のURL)の中にオリジナル画像を入れてみましょう。
1 2 3 4 5 6 7 8 9 |
.sub-column h3{ padding: 1.3em; color: #454545; font-weight: bold; font-size: 14px; background: url(アップした画像のURL) top left no-repeat #fff; height: 40px; width:243px; } |
このようなオリジナル画像を作ってみました▼
こちらをサイドバーに組み込んでみるとこうなります▼
今回は結構シンプルな見出しを作ってみましたが、もっとこだわったものを組み込んでみるのもありです。
ここからフォントサイズやカラーの微調整を行いたい場合は上記コードの数値を変えればいいだけなのでそこまで難しい操作はありません。
これだけでサイドバーの見出しはオリジナル画像に変更することが出来ます。
特定のサイドバーだけ見出を変更したい
今紹介した方法はサイトのコードを書き換えてすべての見出し変更を行いました。
ですが特定の見出しだけ別の画像を使いたい場合もあると思います。
そのときの手順を紹介します。
まずウィジェットメニューより『テキスト』をサイドバーに埋め込みます▼
その中に下記コードを書き込みます▼
1 |
<img class="aligncenter wp-image-416" src="アップした画像URL" width="225" height="50" /> |
これを行うことで特定のサイドバーだけオリジナル画像で見出しを作ることが出来ます。
するとこんな感じで反映されます▼
ウィジェットのテキストメニューは他にもコードを組み込めばもっとオリジナリティーある仕掛けが出来ると思うのでどんどんトライ&エラーを繰り返してサイトのブラッシュアップをしていきましょう!
以上がサイドバーの見出しをオリジナル画像に変更する方法でした。
賢威テンプレートを使っているサイトはたくさんありますが、そこでいつも思うのはサイドバーの見出しが結構みんな似てるなということでした。
なので今回カスタマイズに踏み切ったわけですけど、いろいろ画像を組み込んでみて行き着いたのは結局シンプルなボーダーラインの見出しでしたね(笑)。なんか一番しっくり来るということに気づいてしまいました。
まあここは好みがあると思うので自分に合うサイドバーの見出しを見つけてみてください!

コメントを残す