ＣＳＳ アメンバー限定記事
テーマ：CSS注意・アメンバー限定フォトをお使いの場合
アメンバー限定フォトでも アメンバー限定記事 の画像（009の画像）が表示されます
対処方法を考え中です！！！
アメブロさ～ん・・・ 記事とフォトのクラス分けくらいしてくださいよ～
まったく同じって・・・ど～なっているんですか？
問い合わせにアメブロから返事がありました
「変更はしない」との事です・・・
＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋
初心者の方で・・画像が1枚だけ作ったよ～って方・・・
ゴチャゴチャ書かれてもわからないって方・・
記事の下のほうにある
緑のCSS（赤字部分は自分の画像に合わせてください）だけでOKです
リク記事です・・・
アメンバー限定記事をＣＳＳで変更したいんです
残念ながらアメンバー限定記事はＣＳＳを読み込みませんので不可能です・・・
では最初のページは・・・・？
こんなのを
こんなんにしちゃいます
見本ブログ・・・
http://ameblo.jp/exlink001/page-5.html
ブラウザーの更新をしてみてください
10種類出るはずです・・・・ たぶん？
※アメンバー募集はしていませんのでやらないでくださいね
記事だって「テストです」としか書いてないし・・・・
※↓は10枚の画像が出来てから使ってください
1枚だけでしたら・・もっと下にある緑のＣＳＳを使ってください
.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.btn000{
background-image: url(000画像のＵＲＬ);
}
.amemberEntryBtn a.btn001{
background-image: url(001画像のＵＲＬ);
}
.amemberEntryBtn a.btn002{
background-image: url(002画像のＵＲＬ);
}
.amemberEntryBtn a.btn003{
background-image: url(003画像のＵＲＬ);
}
.amemberEntryBtn a.btn004{
background-image: url(004画像のＵＲＬ);
}
.amemberEntryBtn a.btn005{
background-image: url(005画像のＵＲＬ);
}
.amemberEntryBtn a.btn006{
background-image: url(006画像のＵＲＬ);
}
.amemberEntryBtn a.btn007{
background-image: url(007画像のＵＲＬ);
}
.amemberEntryBtn a.btn008{
background-image: url(008画像のＵＲＬ);
}
.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;
}
赤い数字は画像のサイズに合わせてください
※オレンジの数字は画像の高さの半分です
画像000～009 250px × 220px
画像は上半分と下半分に分けます（下はマウスが乗ったときの画像になります）
また000～009の１０枚は同じサイズで作ってください
アメンバー限定記事を読むには 250px × 35px
アメンバーになる 250px × 50px
アメンバーになる 250px × 50px
アメンバーになる 250px × 50px
アメンバーになる 250px × 50px
もし・・・・
画像を１０枚も作れない・・・って場合は
１枚だけ作って
.amemberEntryBtn img{
visibility:hidden;
}
.amemberEntryBtn a{
width:250px;/*画像の横*/
height:110px;/*画像の縦の1/2*/
background-image: url(画像のＵＲＬ);
background-repeat:no-repeat;
display: block;
overflow:hidden;
outline:none;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/*マウスオーバー*/
.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;
}
画像は１枚だけでマウスオーバーも必要ないって～場合
※縦を半分にする必要はありません
.amemberEntryBtn img{
visibility:hidden;
}
.amemberEntryBtn a{
width:250px;/*画像の横*/
height:110px;/*画像の縦*/
background-image: url(画像のＵＲＬ);
background-repeat:no-repeat;
display: block;
overflow:hidden;
outline:none;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/*アメンバー限定記事を読むには*/
.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;
}
画像は１枚だけでマウスオーバーも必要ないし
下は文字のままでいいんだけど～
.amemberEntryBtn img{
visibility:hidden;
}
.amemberEntryBtn a{
width:250px;/*画像の横*/
height:110px;/*画像の縦*/
background-image: url(画像のＵＲＬ);
background-repeat:no-repeat;
display: block;
overflow:hidden;
outline:none;
margin-left: auto;
margin-right: auto;
text-align: center;
}
width:235px;/*画像の横*/ height:130px;/*画像の縦*/
アメンバー限定記事を読むにはだけ画像にしたい・・・
/*アメンバー限定記事を読むには*/
.amemberEntryTxt a{
margin:0;
padding:0;
text-indent:-9999px;
display: block;
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;
}
あ～・・・・・
こんなことやっていたら
アメンバー限定記事を書きたくなってきました・・・
でも書くことがないし書くつもりもないんですけどね・・・・
ただ・・・使ってみたいだけ・・・
さまの
アメンバー限定記事ではなくて
アメンバーを作らないで自分限定記事にされています
画像を２枚使ってのやり方は参考になります
追記です・・・
1枚じゃ寂しいし・・・かといって10枚も作れません・・・
その場合はとりあえず2枚くらい作って・・・
.amemberEntryBtn a.btn000,
.amemberEntryBtn a.btn001,
.amemberEntryBtn a.btn002,
.amemberEntryBtn a.btn003,
.amemberEntryBtn a.btn004{
background-image: url(画像AのＵＲＬ);
}
.amemberEntryBtn a.btn005,
.amemberEntryBtn a.btn006,
.amemberEntryBtn a.btn007,
.amemberEntryBtn a.btn008,
.amemberEntryBtn a.btn009{
background-image: url(画像BのＵＲＬ);
}
※↑前後のＣＳＳは省略しています
このようにグループで分けていけばＯＫです
1枚追加するごとにグループを分けていって
最終的には10枚にチャレンジください
※このＣＳＳをやったのに前の画像も表示されるって～場合・・
このＣＳＳよりすぐ上のＣＳＳにエラーがあります
チェックしてください