ランキング・ジャンルが新しくなります！だってさ・・

なぜ？スタッフブログで発表しないんでしょ？

知らないうちにランキングのエントリーができるようになっています・・

アメブロの設定から入ってみてください

一応・・・ココも見て

よぼよぼブログ とか　ネクラ とかでトップになりたくないな～

・・・・

わたしのブログのジャンルが・・・ない？

インターネット？違うよな・・・　まとめサイトってなに？

備忘録 ・・・これも違うよね・・・・　

闘病・・メタボなだけだしな・・・

ジャンルを作ってくれなきゃ・・・

アメブロ批評のジャンルで　アメブロ批判のブログにしちゃうぞ～

ＣＳＳ アメンバー限定フォト2

ＣＳＳ　アメンバー限定フォト の続きです・・・

画像が出来ましたか？

ではＣＳＳです・・・

ココまで読まれている方は・・・

アメンバー限定記事もアメンバー限定フォトも両方使われる方で・・

すでにアメンバー限定記事 のＣＳＳが入っていると思います

なので・・・・

.amemberEntryBtn a.btn010{/*←ココを変更します*/
background-image: url(010画像のＵＲＬ);
}

コレだけです

他はまったくアメンバー限定記事のＣＳＳと同じなので必要ありません

注意はこの部分です

.amemberEntryBtn a.btn010{/*←ココを変更します*/

アメンバー限定記事とダブっているクラス名を　btn010　に変更します

別に名前はアメブロで使っていなければ何でもかまいません

p-001でもphoto-aでも何でもいいのですが・・・

手で修正することを考えると　btn009 となっているのを　btn010 にする方が

忘れないし・・簡単かもです・・・

それ以外はまったく同じです

また本来限定フォトの画像は1つしか有りませんが

手で変えるのでしたら自由に増やしちゃってください

.amemberEntryBtn a.btn011{/*←ココを変更します*/
background-image: url(011画像のＵＲＬ);
}

.amemberEntryBtn a.btn012{/*←ココを変更します*/
background-image: url(012画像のＵＲＬ);
}

用意した画像分だけ増やします

では記事に貼り付けます・・・

ここで　先ほどＣＳＳに設定したクラス名に変更します

btn009 →　btn010 とかにします

画像を何枚も用意した方は好きなクラス名に変更してください

アメンバー限定フォトを見るには・・の部分は

リンク先が　アメンバー限定記事を読むには　と同じなんで・・・

べつに変更する必要はナイと思います

ただ・・・　画像は「アメンバー限定フォトを見るには・・」でも

「アメンバー限定記事を読むには・・」のどちらでも大丈夫な画像にしてください

アメブロさまが変更してくれていればＣＳＳだけで大丈夫だったのですが・・・・

しかたがないですね・・・・

ＣＳＳ アメンバー限定フォト

重要：アメンバー限定記事も書くよ～って方は絶対に使わないで下さい

　　　アメンバー限定記事なのにアメンバー限定フォトになってしまいます

　　　両方使うよ～って方は手作業で変更する必要があります・・・・・　次回になります

＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋

先日・・問い合わせていました

アメンバー限定フォトの件・・・・

回答をいただきました

弊社担当部門のほうで確認させていただきましたところ、
アメンバー限定記事、アメンバー限定フォトのclass名については
現状維持をさせていただくこととなりました。

理由といたしましては、フォトについてはアップロードをクローズしたことから
今後のサービス拡大を予定していないためです。

うっ・・・・　

残念ではありますが検討をいただいて回答いただけたことはすごくうれしいです・・・

と、いうことで

ＣＳＳ　アメンバー限定記事 　の続きです

　　　　　↑こんなのを　↓こんなんにしちゃいます(マウスをあわせてください）

まずは・・・画像を作ります

前回のＣＳＳ　アメンバー限定記事 と同じサイズで作った方がわかりやすいかも

250px　×　220px

上半分が通常表示される画像で下半分がマウスが乗ったときの画像です

上と下は同じサイズでないとまずいです

アメンバー限定記事の場合はＣＳＳで設定すれば自動で出来たのですが・・

今度はアメブロからの回答で仕様を変更しないとのことなのでいちいち自分で設定する必要があります

※アメンバー限定記事は絶対に書かないって～方は自動で出来ます

アメンバー限定記事のタグ

10通りのランダムで表示されますが10番目が限定フォトとまったく同じなんです

<div class="amemberEntry">
<p class="amemberEntryBtn"><a href="http://secret.ameba.jp/exlink/amemberentry-10123456789.html " class="btn009"><img src="http://stat.ameba.jp/p_skin/cmn/img/amember/btn001.gif " alt="アメンバー限定記事を読む"></a></p>
<p class="amemberEntryTxt" ><a href="http://help.ameba.jp/content/amemberguide/amember_guide.html " target="_blank">アメンバー限定記事を読むには</a></p>
<p class="amemberEntryReq"><a href="http://amember.ameba.jp/amemberRequest.do?oAid=exlink ">アメンバーになる</a></p>
</div>

アメンバー限定フォトのタグ

<div class="amemberEntry">
<p class="amemberEntryBtn"><a class="btn009" href="http://photo.ameba.jp/user/exlink/07060o143hob831ABCDEFG/1234567891hP7P2e5/"><img alt="アメンバー限定フォトを見る" src="http://stat.ameba.jp/p_skin/cmn/img/amember/btn_photo001.gif " border="0" /></a></p>
<p class="amemberEntryTxt" ><a href="http://help.ameba.jp/content/amemberguide/amember_guide.html " target="_blank">アメンバー限定フォトを見るには</a></p>
<p class="amemberEntryReq"><a href="http://amember.ameba.jp/amemberRequest.do?oAid=exlink ">アメンバーになる</a></p>
</div>

・・・と

まったく同じでＣＳＳでは区別することが出来ません

前回のアメンバー限定記事を使われている場合には

アメンバー限定フォトに「アメンバー限定記事」の10番目の画像と

限定フォトなのに「限定記事を見る」が表示されてしまいます

「アメンバーになる」はどちらも同じなのでかまいません

なぜわざわざ同じにする必要があるのか理解が出来ませんので質問をしたのですが・・・

残念ながら改善はされないと言うことなので面倒でも手作業が必要になります

ということで・・・

アメンバー限定フォトは貼るけどアメンバー限定記事は絶対に書かないって～方は

.amemberEntryBtn img{
visibility:hidden;
}
.amemberEntryBtn a{
width:250px;/*画像の横*/
height:110px;/*画像の縦の1/2*/
background-repeat:no-repeat;

display: block;

overflow:hidden;
outline:none;

margin-left: auto;
margin-right: auto;
text-align: center;
}
.amemberEntryBtn a.btn009{
background-image: url(009画像のＵＲＬ);
}
/*マウスオーバー*/
.amemberEntryBtn a:hover{
background-position: 0 -110px;
}
/*アメンバー限定フォトを見るには*/
.amemberEntryTxt a{
margin-left: auto;
margin-right: auto;
text-align: center;
padding:0;
text-indent:-9999px;
display: block;

overflow:hidden;
outline:none;
width: 250px;/*画像の横*/
height:35px;/*画像の縦*/
background-image: url(限定フォトを見るにはの画像のＵＲＬ);
background-repeat:no-repeat;
}
/*アメンバーになる*/

div.amemberEntry p.amemberEntryReq{
background:none;
}
.amemberEntryReq a{
margin-left: auto;
margin-right: auto;
text-align: center;
padding:0;
text-indent:-9999px;
display: block;

overflow:hidden;
outline:none;
width: 250px;/*画像の横*/
height:50px;/*画像の縦*/
background-image: url(アメンバーになる画像のＵＲＬ);
background-repeat:no-repeat;
}

赤い数字は画像のサイズに合わせてください

※オレンジの数字は画像の高さの半分です

「アメンバー限定フォトを見るには」の画像や
「アメンバーになる」の画像は前回のＣＳＳ　アメンバー限定記事 を参考に作成してください

重要：アメンバー限定記事も書くよ～って方は絶対に使わないで下さい

　　　アメンバー限定記事なのにアメンバー限定フォトになってしまいます

両方使うよ～って方は手作業で変更する必要があります・・・・・　

ＣＳＳ　アメンバー限定フォト2 　につづきます