コメント欄の画像の作り方・・

リク記事です

コメント欄の画像の作り方（3つの画像の縦は？）

こちらで配布している画像とＣＳＳを使って説明します

http://ameblo.jp/ab-test/page-15.htm

※ゲストさまと管理人のコメントを分けるためには

新・自分のコメントを "もっと"わかりやすく が必要になりますが今回は説明を省きます

まずは・・実際に画像がどう表示されているのか上中下を違う色で表示してみるとこうなります

上画像の部分にはコメントタイトル

中画像の部分にコメント本文

下画像の部分にお名前日付が入ることがわかると思います

では・・作り方ですが・・・・大事なのは横幅だけです

3つの画像の縦は適当でもＣＳＳで何とかなっちゃいます？

参考の3カラム用の画像でしたら横幅は400px以内余裕を持って395px～398pxあたりで作ります

このように横幅を決めてから1つの画像を作ります（縦は気にしなくて良いです）

ここから上・中・下の画像を切って作っていきます

1つの画像から作りますから実際に表示させたときに上下がつながらないって事がありません

こんな感じで3つの画像に分けていきます

特に下の画像は・・縦に短いと・・

お名前の長い方からコメントを頂いたときに2行になってしまいます（特に3カラムの場合）

下の画像が短いと中の画像と下の画像がきれてしまうことがあります


お名前部分が2行になっても大丈夫なくらいに余裕を持って作ります

ちなみに上の画像は・・・適当で？

このような元画像でしたら　（ポカポカ色 さまより）

上画像は青点線で切らないで

少し余裕を持って赤線で切るとＣＳＳでの設定が楽になります

中の画像はコメントの分だけ縦に繰り返しになるので縦のサイズは1pxでも大丈夫なんですが・・

画像フォルダとかにアップしたときに扱い難いので縦は10px～30px程度で作ります

中の画像は繰り返しますので・・

このような元画像を作って↑

このような3枚の画像にすると・・・

中の画像と下の画像がうまくつながりませんので・・・

このような中の画像と下の画像のつながりをごまかす工夫が必要になります

参考までにＣＳＳと画像の関係です・・

/* ゲストコメント　*/
#comment_module .each_comment{/*コメントタイトル部分*/
margin: 0;
padding-bottom:15px;/*コメントとコメントの間Ａ*/
background: url(画像のURL);/*上画像のURL*/
background-repeat : no-repeat;
background-position: center top;
color:#333333;/*←ゲストコメント文字色変更の場合*/
}
#comment_module .comment_body{/*コメント文章部分*/
margin: 0;
padding:0 30px 0 40px;/*上　右Ｂ　下　左Ｃ*/
background: url(画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
#comment_module .comment_footer{/*コメントフッター部分*/
margin:0;
padding: 10px 0 15px;/*上Ｄ　左右0px　下Ｅ*/
background: url(画像のURL);/*下画像のURL*/
background-repeat : no-repeat;
background-position: center bottom;
border-top:none;/*フッタ上の点線を消す*/
}
#comment_module .label{/*コメントタイトル*/
font-weight: bold;
font-size:12px;
padding:20px 0 5px 50px;/*上Ｆ　左　下Ｇ　右Ｈ*/
color:#333333;/*←コメントタイトル文字色変更の場合*/
}
.comment_footer span.comment_author{/*名前*/
padding-left:40px;/*Ｉ*/
}
.comment_footer span.comment_date{/*日付*/
padding-left:20px;/*Ｊ*/
}

昔作ったときのサイズを説明した記事です こちらも参考になるかと・・

このときはお名前部分が2行になることに気が付いていませんでした・・・m(_ _)m

ブログのカスタマイズをされていてもコメント部分はそのままって方・・・

コメントされた方も楽しくなりますので

ぜひコメント部分もカスタマイズされることを薦めます

コメントが増えるかも・・？？？

画像を3つに分けるには

JTrim
初心者向けフォトレタッチソフト
フリー無料の画像加工ソフトです

こちらの記事の中で使い方を説明しています

オリジナルスキンCSSの編集　画像の加工

オリジナルスキンCSSの編集　画像の加工2

JTrim

JTrim2

このような無料のソフトをパソコンにインストールするか

あるいはウェブ上で加工が出来ちゃう

アニメーションgif　ゆれるキーホルダー1

この記事の最後でコメント欄の画像の切り方を説明しています

jquery The ランダム(変身ボタン)

前回のjquery　The ランダム はいかがだったでしょうか？

今度は見本のブログ のように変身ボタンを設置します


まずは前回のフリープラグインに追加です・・

（前回の記事をやっていないって方は前回の記事を読んで3の意味だけ理解してからこのままコピペ）

<script type="text/javascript">
var mai = 3;
var ran = Math.floor(mai*Math.random());
$("body").addClass("bgi" + ran);
$(function(){
$("#change").click(function(){
var ran = Math.floor(mai*Math.random());
$("body").addClass("bgi" + ran);
}); return true; });
</script>

水色の部分が前回の記事部分 です

青色の部分を追加するだけです

次は・・変身ボタンを設置します

まずは画像を使う場合・・・

　　　

こんな画像を用意します

マウスがのったときに画像を変化させたい場合は同じサイズで2枚用意します

で・・フリープラグインに

<div id="cb1"><a href="javaScript:void(0)" class="change" onclick="location.reload();"></a></div>

このままコピペしてください

ここにCSSで設定する画像が表示されます

画像の場合はＣＳＳも必要です・・

ＣＳＳの編集の最後に・・

#cb1 .change{
display:block;
width:165px;/*画像の幅*/
height:165px;/*画像の高さ*/
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:center;
}

もしもう1枚画像を用意していてマウスがのったら変化させたい場合は

#cb1 a:hover{/*マウスがのった時の画像*/
background-image:url(画像のURL);
}

わたし画像なんて作れない～って場合

ボタンを使います・・


こちらもフリープラグインに・・・

<div id="cb2"><button class="change" onclick="location.reload();">スキンがおかしくなるから<br>絶対にクリックしないで！</button></div>

赤字部分がボタンに表示される文字になります

2行以上にするのでしたら<br>で改行してください

こちらはＣＳＳはなくてもいいのですが・・・（width:160px;/*幅*/の横幅だけは必要です）

形を整えるためにＣＳＳの編集に・・

#cb2 .change{
width:160px;/*幅*/
padding:5px;/*ボタンの中の余裕*/
font-size:0.8em;/*文字サイズ*/
text-align:center;/*中央に*/
}

赤字部分はそのままでも大丈夫ですが・・

スキンに合わなければ変更ください

paddingは↓こんな感じです・・ないほうがよければpaddingは削除ください

見本ブログ は画像とボタンと2つつけています

<div id="cb1"> と　<div id="cb2">　で囲って分けています

idは1ページに1つだけですので

もし・・3つ変身ボタンを設置する場合は3つ目は<div id="cb3">を使います

jquery The ランダム

今回は訳あって前フリが長いです・・・

いつもジャン・・なんて突っ込みはなしでお願いします

リク記事です

「ランダムでヘッドだけでなく背景も一緒にランダムで変更できたら」

うん・・ランダムでヘッド画像を変更する記事を書いてからすでに3年半近くたちます

この間にわたしも成長しました

jqueryなんて武器を多少は会得しました

「ランダム」で検索をしてこのブログにこられている方も多いです・・

なので今回はJavaScriptでもjquery化したのにチャレンジしました・・

ヘッド画像のランダムをjquery化はすんなりと出来ました

<script type="text/javascript">
<!--
var hi = new Array(
"画像のＵＲＬ1 ",
"画像のＵＲＬ2 ",
"画像のＵＲＬ3 ",
"画像のＵＲＬ4 "
);
var ran = Math.floor(hi.length*Math.random());
$("#header").css("backgroundImage","url("+ hi[ran] +")");
// -->
</script>

注意：

アメブロ以外でこの記事を参考にされている方・・

これはjqueryをすでに読み込んでいるという仮定で作っています

アメブロでは標準？で古いですけど読み込まれています

アメブロ以外で使う場合はhead内にこれより前に
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
これとかを入れてjqueryを読み込んでおいてから実行するようにしてください

さすがはjquery・・文字数もだいぶ減らすことが出来て満足満足・・・

ただ・・画像のURLが3年半の間にだいぶ無駄に長くされてしまっています

せっかくquery化で短くなっても意味がありません・・・逆に長くなってしまいます

3年半前の画像のURL

http://stat.ameba.jp/user_images/67/bb/10043037752.gif

現在の画像のURL

http://stat001.ameba.jp/user_images/20110412/21/how-to/27/8b/j/o0760025011162324490.jpg

だいぶ長くなっています

サムネイルの画像のURLで比べたら倍近く長くなっちゃっています・・

でも・・フリープラグインの文字数制限は3800文字と3年半前と変わっていません

これでは何枚もの画像を設定するわけにはいきません

まして・・背景画像もとなったらさらに倍の文字数が使われるわけで・・・

フリープラグイン3800文字の中では気軽に使うわけにはいかなくなっています
フリープラグイン文字数無制限化極秘計画書 とセットにしないと紹介できないような・・

それだとマニアックな方しか使っていただけない・・・

で・・・これを何とか短くしたいって

画像のURLを短く省いてかけないか・・とか

あれこれと頭を悩ませていたんです・・・

悩んでいると神様はおられるようで・・・

何か知らないけど教えてくれるんですね・・

何の気はなしにぼーっとソースを見ていたら・・・

だいぶ前から知ってはいましたがbodyにid="mainIndex"なんてidが付いているんですね・・

なぜか今回はそこで引っかかっちゃってなんでbodyにidなんか・・・・

jqueryを使ってCSSで背景画像をランダムに変更しようとして悩んでいたんですが・・
jqueryならaddclassって～新たにクラスを付け加えることが出来るジャン！

ランダムのクラス名をつければ長い画像のURLをフリープラグインからCSSに追い出せるジャン！

クラスなら背景画像だけじゃなくいろんな設定が可能ジャン！

おまけにその分フリープラグインは短くなるジャン！

CSSなら文字数は関係ないジャン！

簡単かつ良いことばっかしジャン！

シャンシャンシャン　

あまりのうれしさに・・　いつもはほとんど使わない絵文字も今回はいっぱい使ってみました　

しかしやってみると

あまりにも簡単すぎて「今までの時間を返して欲しい！」

やった～！ってより・・・腹が立ってくるくらいあっけなかったです・・

この怒りをどこに向けようか・・・

って～ことで

前フリを無駄に長くしてみなさまに意地悪をしています・・・ぅん？

あっ・・まっ・・・そんなんで・・・

これが訳あっての訳だったんです・・・・　m(_ _)m

で・・・

見本のブログです 　

↑3パターンしか仕込んでありませんので更新しても同じって場合も1/3の確立であります
ブラウザーの更新またはブログのヘッド画像をクリックしてください

左サイド上の「スキンチェンジボタン？」をクリックしてもランダムで変わります

このボタンについては次回記事にします

お待たせしました・・・

ここから本文です

フリープラグインに・・・

<script type="text/javascript">
var mai = 3;
var ran = Math.floor(mai*Math.random());
$("body").addClass("add" + ran);
</script>

どんだけ～　これだけ～～　フリープラグインにコレだけ入れるだけです

maiの部分に枚数というか何パターンのランダムにするか入れます

3なら3パターンだし4なら4パターンでclass名をbodyにつけていきます

以下体力気力と暇な方はドンドン増やしてかまいません

ここでは数字だけですから増やしてもフリープラグインの文字数制限には関係ありません

フリープラグインの最初の方に書いてください

また・・サイドバーの上の方・・3カラムでしたら左の上の方が早く動作します

あとは全部ＣＳＳです・・・・

3パターンでしたら add0 add1 add2が

4パターンでしたら add0 add1 add2 add3 の4つのうち1つがclassとしてbodyにつけられます

※addに0からはじまる数字を順番にフリープラグインで設定した枚数分つけていきます

以下・・maiが3の3パターンの場合で説明します

背景をランダムにするのでしたら・・CSSの最後に

.add0{/*背景0*/

background-image:url(背景画像のURL0);
}

.add1{/*背景1*/

background-image:url(背景画像のURL1);
}

.add2{/*背景2*/

background-image:url(背景画像のURL2);
}

ランダムでこのうちのどれかが使われることのなります

基本はこうですが

.add0{/*背景0*/
background-image:url(画像のURL);
}
.add1{/*背景1*/
background-color:#ff00ff;
}
.add2{/*背景2*/
background-image:url(画像のURL);
}

このように1つは画像ではなくて背景色を設定したり・・・

3パターン全部画像は使わないで背景色を設定しても大丈夫です

たとえば・・・・

見本のブログ の場合は・・

マ●トリクスぽいのは

.add0{/*背景0*/
background-image:url(画像のURL);
}
普通に画像を全面に繰り返し並べています

※このときbodyにbackground-repeat:no-repeat;なんて設定があると繰り返してくれません

ター●ネーターのようなやつは

.bgi1{/*背景1*/
background-image:url(画像のURL);
background-position:left top;
background-repeat:repeat-y;
background-color:#171717;
}

背景画像を左端に縦にだけに繰り返して表示して残りは#171717色で塗りつぶします

ロボ●ップらしきのは

.bgi2{/*背景2*/
background-image:url(画像のURL);
background-position:right bottom;
background-repeat:no-repeat;
background-attachment: fixed;
background-color:#2A0B13;
}

背景画像を右下にスクロールしても動かないように1つだけ固定して

残りは#2A0B13色で塗りつぶします

このようにどのようにでも設定可能になります

※すでにbodyに背景とか設定している場合はその部分は削除してください

たとえばすでにこのようにbodyを設定していた場合

body{

margin:0;
padding:0;
text-align:center;
background-image:url(画像のURL);
background-position:left bottom;
background-repeat:no-repeat;
background-color:#ff00ff;
filter:alpha(opacity=90); /*IE*/
-moz-opacity:0.90; /*FF*/
opacity:0.90;
}

bodyの中の赤字部分がかち合っちゃいますから削除します

本当は背景画像と背景色は上書きされるので残っていてもいいんですが・・たぶん？

background-positionとかbackground-repeatとかbackground-attachmentは影響する場合があるので削除します

3つのうち1つででリピートさせたい場合があってもここでbackground-repeat:no-repeat;なんて設定してあるとリピートしてくれません・・

background-repeat:repeat;ってadd0の方で設定するのでしたら大丈夫なんですが面倒なのでbodyの方の設定を削除します

わからなければbodyはそのままさわらないでやってみてください
実際にやって影響が出なければさわらないでかまいません

表示がおかしかったら影響している部分だけ削除すれば良いだけです

もしすでに背景を設定していてランダムにしたときにも1つのパターンで使いたい場合は

上のbodyから赤字部分を削除してから

.add0{/*背景0*/

background-image:url(画像のURL);
background-position:left bottom;
background-repeat:no-repeat;
background-color:#ff00ff;
}

と・・.add0にそのまま設定します（.add1でも.add2でもランダムなんでどこでも良いです）

ヘッド画像をランダムで表示する場合・・・

画像のサイズは全部同じにして下さい

.add0 #header{/*ヘッド画像0*/

background-image:url(画像のURL0);
}

.add1 #header{/*ヘッド画像1*/

background-image:url(画像のURL1);
}

.add2 #header{/*ヘッド画像2*/

background-image:url(画像のURL2);
}

すでにヘッド画像を使っていてそれもランダムで使いたい場合は

これらのどれかに今まで使っていた画像のURLを入れてください

すでに入っているヘッド部分のＣＳＳは画像サイズさえ変らなければ変更しなくてそのままでかまいません

今までのＣＳＳ設定をそのまま使います

まだヘッド部分のカスタマイズをされていない方は

オリジナルスキンCSSの編集　ヘッド・タイトル3 　こちらを参考にして

↓ここからはまだヘッド部分のＣＳＳがない方だけ参考にして下さい

#header{
height:420px;/*画像の縦*/

background-repeat:no-repeat;/*繰り返さない*/
background-position:center;/*中央に*/
}

#header h1,
#header h2{/*位置の初期化*/
margin:0;
padding:0;
}
#header h1 a{
width:760px;/*画像の横*/
height:420px;/*画像の縦*/
display:block;
position:absolute;
text-indent:-9000px;
text-decoration:none;
}
#header h2{
display:none;/*概要を非表示*/
}
↑ここまではまだヘッド部分のＣＳＳが設定していない方だけ参考に

と・・background-image: url(画像のURL);　以外のＣＳＳは設定しておきます

この部分が全部の共通のＣＳＳ設定になりますので

ランダム部分には画像のURLだけ設定すれば大丈夫なんです

赤字部分は記事を参考にして下さい

見本のブログはそれだけでなく・・・

.add0 #frame{ }
.add1 #frame{ }
.add2 #frame{ }
.add0 #wrap{ }
.add1 #wrap{ }
.add2 #wrap{ }
他にもメッセージボードの枠や
上の記事枠、中の記事枠、下の記事枠や
サイドバーのブックマークのタイトル画像などもランダムで変るようになっています
また・・ター●ネーターのようなやつが表示された場合はリンクの文字色も変るようにしています

最初に　.add0 とか　.add1 ってつけてＣＳＳを書けば良いだけです・・・

見本は手抜きで画像の色を変更しているだけですのでそれほど変っていないように見えますが
根気と気力と暇さえあればまるっきり変更させることも可能です

ブラウザーを更新するたびに・・
ページを移動するたびに・・
ヘッド画像をクリックするたびに・・　　スキンがガラって変るって・・・

見に来てくれた方にとっては・・　面倒なだけですよね・・　　　ぁれっ？

見本のブログ のように変身ボタンをつけるには

http://ameblo.jp/exlink/entry-10863034501.html