WordPressウィジェットのデザイン変更の仕方

a0002 011006 m WordPressウィジェットのデザイン変更の仕方
SDblogをはじめました。

現在WordPressの「Twenty Twelve」というテーマベースに少しカスタマイズした段階なので、これから徐々に変更していきたいと思います。

ウィジェットのデザインを変更する

2013031905 1024x682 WordPressウィジェットのデザイン変更の仕方

「Twenty Twelve」をベースにして作ったのがこちら。
今回は上の画像の赤枠内(ウィジェットタイトル)を更に変えていきます。

現段階のcssは

.widget-title {
 font-size: 18px;
 line-height: 1;
 color: #804000;
 background: #ffe0c0;
 padding: 5px 5px 2px;
 border: 1px dashed #ff8000;
 text-align: center;
 font-weight: bold;
}

背景に色をつけ、周りを囲っただけの簡単なものです。

これをもう少し変えてみましょう。

back04 WordPressウィジェットのデザイン変更の仕方

こんな画像を用意します。

そして用意した画像をメディア→新規追加→ファイルを選択からアップロードします。

2013031902 WordPressウィジェットのデザイン変更の仕方

アップロードが完了したら編集を選び、下記赤枠のURLをコピーしておきましょう。

2013031903 WordPressウィジェットのデザイン変更の仕方

CSSに戻り、編集していきます。

.widget-title {
font-size: 18px;
line-height: 1;
color: #804000;
padding: 10px 5px 5px;
text-align: center;
font-weight: bold;
border-bottom: 1px solid #f4f4f4;
border-left: 8px double #ff8000;
border-right: 1px solid #f4f4f4;
background: #f4f4f4 url(http://www.sdblog.info/wordpress/wp-content/uploads/2013/03/back04.png) no-repeat right bottom;
}
変更点
  • backgroundの色を変え、先ほどアップロードした画像にした
  • paddingを全体的に増やした
  • borderをleftは二重線、bottom&rightは薄い線にした

どのようになったかというと・・・

2013031904 1024x682 WordPressウィジェットのデザイン変更の仕方

こんな感じで、付箋風のデザインになりました。

画像自体に模様をつけたりしても可愛いと思います。

もちろん全く別の画像でもOKです。

応用で見出しタグ等もカスタマイズできます。

簡単に出来るので、ぜひ実践してみてくださいね。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">