プラグインの背景を画像にする（standard）

プラグインの背景を画像にするカスタマイズを紹介します。
このカスタマイズは"standard"のテンプレートが対象です。

まずプラグインタイトルの背景を画像にする方法を紹介します。
プラグインタイトルの背景に使う画像を用意してください。

画像をアップロードしたらスタイルシートを編集します。

.menu_title {
～
background-image: url("http://～画像URL～");
}

これでプラグインタイトル背景が画像になります。

次にプラグイン本文の背景を画像にする方法を紹介します。
本文の場合は高さが可変なので、背景画像を繰り返し表示させずに右下に表示する方法を紹介します。

画像をアップロードしたらスタイルシートを編集します。

.menu_cont {
～
background-image: url("http://～画像URL～");
background-repeat: no-repeat;
background-position: right bottom;
}

これでプラグイン本文の右下に画像が表示されます。

関連記事

プラグイン３の幅を広げる(standard) (2009/11/10)
ページナビゲーションを記事の下に表示する (standard) (2009/10/19)
white_eagle、fullmoon_howling から画像を取り除く (2009/07/06)
プラグインの背景を画像にする（standard） (2009/06/02)
プラグインの間隔 (standardシリーズ) (2009/05/27)
プラグインの下を伸ばす (standardシリーズ) (2009/05/15)
『最新の記事』の便利ナビを設置する (standard) (2007/05/05)

[ 2009/06/02 23:32 ] カスタマイズ standard 専用 | TB(0) | CM(8)

≪ アイコン付きツリー化リンクをグループで折りたたむ | HOME | 親子カテゴリの折りたたみ ≫

[ 4586 ]

記事にはあまり関係ありませんが質問です。
http://blog-imgs-18.fc2.com/p/e/r/perfectgamelaborator/20090605144523438.png
この画像のように記事タイトル背景を変更しました。
変更したのはいいんですが、タイトルが一定の文字数を超えると勝手に改行（？）されてしまいます。
黒で囲ってあるところにまだスペースがあるのでそこに表示させたいのですが・・・
こういうときはテンプレートのどこを編集すれば(*´･ω･`）

[ 2009/06/05 15:03 ] [ 編集 ]

[ 4591 ] > 風鈴さん

スタイルシートのpaddingが原因です。

.ently_title {
～
padding:16px 100px;
}

値を2つ設定した場合、[上下][左右]の余白となります。
これを4つの設定[上][右][下][左]とし、右の余白を少なくします。

.ently_title {
～
padding:16px 10px 16px 100px;
}

としてみてください。

[ 2009/06/05 23:52 ] [ 編集 ]

[ 5739 ]

どこに入力すればいいのか分かりません＞＜
教えてください

[ 2009/08/30 22:10 ] [ 編集 ]

[ 5741 ] > 名無しさん

テンプレートは何をお使いですか？
URLを教えてください。

[ 2009/08/30 22:50 ] [ 編集 ]

[ 6418 ]

これってスタイルシートの末尾に追加で良いですか？
それと↓↓の画像をプラグインの背景にしたいのですが出来ません＾＾；
http://blog-imgs-34.fc2.com/n/a/t/natuki777/20091010111155706.png

今のスタイルシートの状況は

.menu_title {
～
background-image: url("http://blog-imgs-34.fc2.com/n/a/t/natuki777/20091010111155706.png");
}
です。いつもお世話になってます。

[ 2009/10/10 11:18 ] [ 編集 ]

[ 6421 ] > 東城@さん

「～」を削除してください。

.menu_title {
～
background-image: url("http://blog-imgs-34.fc2.com/n/a/t/natuki777/20091010111155706.png");
}

[ 2009/10/10 14:14 ] [ 編集 ]

[ 6425 ]

有難うございます＾＾
これからもがんばってください！
応援してます！

[ 2009/10/10 14:45 ] [ 編集 ]

[ 6428 ] > 東城@さん

お役に立てて良かったです＾＾

[ 2009/10/10 23:24 ] [ 編集 ]

コメントの投稿