スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
web拍手 by FC2

Mr.ポンバシのブログ改造術part11-4

こんばんは!! Mr.ポンバシです(-^□^-)

さて、Mr.ポンバシのブログ改造術 part11-3"メッセージボードを常に表示する方法"を紹介しましたが、このままだとメッセージボードの背景画像を設定することができません

今から説明するのは、前回の記事で説明した手順の後の話ですので、まだ前回の手順を踏んでいない方はこの記事のことをしても意味がないので注意してください○| ̄|_


これから書く記述をフリープラグインの最後に追記してくださいひと

背景画像が一枚の場合

①記事部の幅と同じ幅の背景画像を用意する
Mr.ポンバシのブログ


この画像は縦に繰り返すので、繰り返しても違和感がないものを選ぶこと!

※今回は下の画像を使わせてもらいます
Mr.ポンバシのブログ



②次の記述をメモ帳にコピペする

<script language="javascript"><!--
document.writeln('<style type="text/css">'+"\n"+'<!--'+"\n"+'
#message
{
background-image:url(画像のURL);
background-repeat:repeat-y;
background-position:top;
}
'+"\n"+'-->'+"\n"+'</style>');
// --></script>



Mr.ポンバシのブログ


③必要事項を書き込んだ後、上の画像の青い部分の全ての改行を消す
Mr.ポンバシのブログ


④③の内容をフリープラグインの最後に追記する
Mr.ポンバシのブログ


完成♪
Mr.ポンバシのブログ





背景画像が三枚に分ける場合

Mr.ポンバシのブログ改造術 part11-2で紹介したように、画像を3つ分ける方法を紹介します

①記事部の幅と同じ幅の背景画像を用意する

今回は例によってこの画像を使いますwww
Mr.ポンバシのブログ


ペイントなどのソフトを使って、上、真ん中、下に切り取り、それぞれうpします


Mr.ポンバシのブログ

Mr.ポンバシのブログ

Mr.ポンバシのブログ


②次の記述をメモ帳にコピペする

<script language="javascript"><!--
document.writeln('<style type="text/css">'+"\n"+'<!--'+"\n"+'
#message {
margin:0;
padding-top:47px;/*47pxのところは上の画像の縦幅を入れる*/
border:none;
background-image:url(上の画像のURL);
background-repeat:no-repeat;
background-position:left top;
}
#message .contents{
padding:0;
border:none;
background-image:url(下の画像のURL);
background-repeat:
no-repeat;
background-position:left bottom;
}

#message .subContents{
border:none;
margin:0px 0px 90px 0px;/*90pxのところは下の画像の縦幅を入れる*/
background-image:url(真ん中の画像のURL);
background-repeat:repeat-y;
background-position:left;
}
'+"\n"+'-->'+"\n"+'</style>');
// --></script>


Mr.ポンバシのブログ


③必要事項を書き込んだ後、上の画像の青い部分の全ての改行を消す
Mr.ポンバシのブログ


④③の内容をフリープラグインの最後に追記する
Mr.ポンバシのブログ


完成♪
Mr.ポンバシのブログ




こんな感じで今回の紹介を終わります

さて、part11-4まで来ましたが、今回でメッセージボードの説明は終わりです!

どうだったでしょうか?

メッセージボードを活用しようとする気になりましたか?

なかなか便利なツールですので、ぜひとも活用してほしいと思います(-^□^-)

それではまた、次回のブログ改造術をお楽しみにノシ
スポンサーサイト
web拍手 by FC2

コメントの投稿

非公開コメント

1 ■無題

家に帰り次第試してみます!

2 ■無題

やってみます!!!

main幅はCSSの何処で確認できるか分かりませんか???

3 ■無題

いつもながらすごいです!
うまく活用していきたいですね
ちょっと試してみます!

4 ■無題

なんてすごいんだ!?

よくここまでの改造をできますね!
感心してしまいますww
俺もそろそろやらねば!

5 ■無題

おお!これはうれしいなぁ
プロフィール

ポンバシ

はじめまして!Mr.ポンバシです。
呼び名は「ポンバシ」「ポンさん」などなどです ^ ^
2次元をこよなく愛しており、エロゲ、ギャルゲ、アニメ、ラノベなんでも話を振ってください。
コメントしてくれると天に昇る勢いで喜びますww


アクセスランキング
[ジャンルランキング]
ゲーム
6074位
アクセスランキングを見る>>

[サブジャンルランキング]
PCゲーム
823位
アクセスランキングを見る>>

アクセスカウンター

カテゴリ

最新コメント

全記事表示リンク

全ての記事を表示する


月別アーカイブ

OHPバナー
紅い瞳に映るセカイ 応援中!!

「魔女こいにっき」応援中

恋がさくころ桜どき

すたじお緑茶『南十字星恋歌』応援中!

検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。