FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか?

プラグインの背景を画像にする(standard)

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


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

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

.menu_title {

background-image: url("http://~画像URL~");
}


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


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

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

.menu_cont {

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


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

関連記事
[ 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 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
08 | 2023/09 | 10
- - - - - 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
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

08 | 2023/09 | 10
- - - - - 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
ユーザータグ


△ ページトップへ戻る