スポンサーサイト

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

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

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

この記事は前回のMr.ポンバシのブログ改造術part11-1の続きですので、前回の記事をご覧になっていない方は、そちらからお読みになってください('-^*)/

では、説明の方にうつります

今回は"メッセージボードの改造方法"について説明しようと思います





①メッセージボードの量が多いため、スクロールバーをつけたい場合

メッセージ量が多いとどうしても
Mr.ポンバシのブログ

というように、メッセージボードが縦に長くなってしまいますよね

こういった場合に
Mr.ポンバシのブログ

Mr.ポンバシのブログ

というように、スクロールバーをつけたら、メッセージがどんなに多くても、メッセージボードを自分の好きな高さに設定することができます

そういった場合は次のコードをCSSのいちばん最後に書きくわえてください

#message/*メッセージボード全体*/
{
border:none;/*下の点線を消す*/
text-align:center;/*テキストを中央に寄せる(不要なら消す)*/
height:150px;/*メッセージボードの高さ(自分で調節する)*/
overflow:auto;/*メッセージボードの中身がheightを超えた場合にスクロールバーを表示させる*/

}

#message .contents/*メッセージボード内のテキスト等*/
{
color:#ffffff;/*メッセージボードの文字色(すべての色を統一したい場合)*/
border:none;/*下の点線を消す*/
}




②メッセージボードに1枚の背景画像をつけたい場合

Mr.ポンバシのブログ


まず、メッセージボードの幅(=記事部の幅)と同じ幅の画像を用意します

そして次のコードをCSSのいちばん最後に書きくわえてください

#message/*メッセージボード全体*/
{
border:none;/*下の点線を消す*/
text-align:center;/*テキストを中央に寄せる(不要なら消す)*/
background-image:url(画像のURL);
background-repeat:no-repeat;/*繰り返さない*/
background-position:center;/*中央に配置*/
}

#message .contents/*メッセージボード内のテキスト等*/
{
border:none;/*下の点線を消す*/
padding:20px 20px 20px 20px;/*上右下左に20pxの余裕を持たせる*/
color:#ffffff;/*メッセージボードの文字色(すべての色を統一したい場合)*/
}

padding:20px 20px 20px 20px;の20px 20px 20px 20pxですが、これは左から順に、時計回りに上右下左の余白をつくることができます
Mr.ポンバシのブログ


ここで問題があります!

画像に対し、メッセージボードの方が小さいと
Mr.ポンバシのブログ

このように文字が切れてしまいますし、

仮に上のbackground-repeat:no-repeat;/*繰り返さない*/
の部分をbackground-repeat:repeat-y;/*縦に繰り返す*/
に書き換えたとしても、
Mr.ポンバシのブログ

というように切れ目が不格好になってしまいます

なので、次の③のやり方が一番ベストかと思われます!




③背景画像を複数に分ける場合

このやり方は、僕のブログのコメント欄に使われています

まず下のような画像を用意します
Mr.ポンバシのブログ


角を丸めておいた方がいいと思います(方法はググってくださいm(u_u)m)

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


Mr.ポンバシのブログ

Mr.ポンバシのブログ

Mr.ポンバシのブログ


真ん中の画像のみ縦に繰り返しますので、真ん中の画像の上部と下部は同じ色のものを選んだほうがいいです

その後次のコードをCSSのいちばん最後に書きくわえてください

#message {
margin:0;
padding:0;
border:none;
background-image:url(上の画像のURL);
background-repeat:no-repeat;
background-position:left top;
}
#message .contents{
margin:0;
padding:0;
border:none;
background-image:url(下の画像のURL);
background-repeat:no-repeat;
background-position:left bottom;
}
#message .subContents{
position:relative;
top:35px;/*上の画像の縦幅*/
margin:0;
padding:0;
margin-bottom:96px;/*下の画像の縦幅*/
padding-left:50px;/*文字の左の余白*/
background-image:url(真ん中の画像のURL);
background-repeat:repeat-y;
background-position:left center;
}
#message .contents{
border:none;
color:#ffffff;/*メッセージボードの文字色(すべての色を統一したい場合)*/
}

上の画像で実行してみたら次のようになりました!
Mr.ポンバシのブログ


この技術はメッセージボードだけでなく、コメント欄や他の場所にも活用できます!

ぜひ試してみてください!





とまあこんな感じです

はぁ~(*´Д`)=з

今回は前回予告していたことができませんでしたね・・・

これ書くだけでも3時間くらいかかりました・・・

実証するためと、画像を用意するために、もう一つアメーバのアカウント作ってやったんで、かなり時間を喰いました(ノ◇≦。)

でもこれで今後はより確実性の高いものをみなさんに提供できそうですp(^-^)q

それでは次回の改造をお楽しみに!
スポンサーサイト
web拍手 by FC2

コメントの投稿

非公開コメント

1 ■無題

お疲れ様で!!早速参考に!!

2 ■無題

ほうほう!こんな風にコメントを!
ふむふむ!これはやってみると楽しそうなんでv
やってみますww

3 ■無題

お疲れ様ですっ

わかりやすくて凄く参考になりました!
難しそうですが後で試してみたいと思いますっ☆

4 ■感謝です。

毎度毎度、ためになる記事ありがとうございます。

参考にさせていただきまね。

5 ■無題

参考になります(`・ω・´)

確かにメッセージボードはかさばると厄介ですな。

6 ■無題

乙です~

いつもいつも頭が下がります♪

7 ■無題

いつもながら素晴らしい改造術ですねっ!
私もブログを一新する時は別のアカウントを用意しましたねww

8 ■無題

相変わらずすごいですね(;^ω^)
ブログ改造ができる、ひまな時間ができたら参考にさせて頂きますw

9 ■無題

おおっ!すごいですね~やっぱり

ブログが改造できたら楽しいですからね!
僕も時間ができそうなのでやってみたいと思います・・・とりあえずブログだけでもww

10 ■無題

これは難易度高そうですね(((゜д゜;)))

でも出来ればいい感じになりそうですね♪

時間があるときにでも挑戦してみます(^^!

11 ■無題

おお、分かりやすい説明有難うございます!
メッセージボードやコメントはこのように改造するんですね('-^*)/

自分も、別のアカウント作って色々試してみましょうかね(笑

12 ■無題

お疲れさまです

今度やってみようかな♪
プロフィール

ポンバシ

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


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

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

アクセスカウンター

カテゴリ

最新コメント

全記事表示リンク

全ての記事を表示する


月別アーカイブ

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

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

恋がさくころ桜どき

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

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

この人とブロともになる

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