アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦! -17ページ目

七夕ペタ・・7月7日バージョン

七夕ペタ

http://stat100.ameba.jp/peta/user/swf/event_100707/tanabata.swf


アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

上のURLを見て不思議に思われた方・・・そうです

7月4日の記事 【ペタ】七夕限定キャラが登場しました  と同じなんです



これは見ている方のパソコンの日付をチェックして

7月6日以前のときには織姫バージョンか彦星バージョンのどちらかを表示して

パソコンの日付が7月7日だったら上の2人バージョンを表示するようになっていると思われます


ためしにコントロールパネルでパソコンの日付を7月6日にして上のURLをクリックしてみてください

上のではなくて織姫バージョンか彦星バージョンのどちらかが表示されるはずです・・・



おまけ・・・何回か更新(キーボードのF5キー)してみると・・


アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

これらの6種類のどれかが表示されるはずです・・・

七夕だから・・・もう1種類あるのかな?(全部で7種類?)

CSS 最近の画像つき記事

急に記事下に出現した「最近の画像つき記事」

どうやらトップページの最初の記事にだけ付くようですね・・




で・・・こんなのいらね~って方・・・

(どれもCSSの編集で青字部分を最後に付け加えてください・・)





最近の画像つき記事を消す・・


アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!
            ↓        ↓        ↓

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

アメブロの設定で・・・
http://blog.ameba.jp/ucs/blog/bloginfoinput.do



アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

表示しないを選択します


翔稀. さまのご指摘のようにアメブロ設定で出来ましたね・・ありがとうございました
ついついCSSでやっちゃう悪い癖です・・・




記事へのリンクは必要だけど・・・

[画像一覧]はいらない・・・って~場合は

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

#imageList{
display: none;
}





中央寄せ・・・

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!



div#imageBoxHeader,
div#imageBox ul {
margin:0 auto;
}





間隔を広げる場合は・・
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!


div#imageBox li {
padding-right:30px;/*元は14px*/
}


30pxは見ながら調整下さい・・・

※注意・・・
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

スキマを空けて全体の幅を広げると

このように2段になってしまう場合があります・・・

IEで見たときは大丈夫でもGoogle Chromeだと2段になっちゃたりと・・

使っているブラウザーによってもこうなってしまう場合があります

その場合は・・


div#imageBoxHeader,
div#imageBox ul {
width:300px;
}


元の幅は252pxで設定されていますのでこの中に入りきらない場合に2段になります

適当に広げちゃってください

あまり広げちゃうと中央寄せをしていた場合に中央になりませんよ・・・




アイコンを変更・・
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

div#imageBox h5 {
background-image:url(アイコン画像のURL);
}




最近の画像つき記事の色を変更・・
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

div#imageBox h5{
color:#ff00ff;
}




日付の色を変更・・

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

.imageDate{
color:#ff00ff;
}




上下の点線を消す・・・


アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!


div#imageBox,
div#imageBoxWrap{
background:none
}




上下の点線を画像に・・

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

↑こんなライン画像を用意します(お持帰りはご自由に)・・・



アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!


div#imageBox,
div#imageBoxWrap{
background-image:url(ライン画像のURL);
}



もし・・ドキドキ このような大きなアイコン画像を使った場合・・


アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!
重なっちゃう場合は・・・


div#imageBoxWrap{
padding:10px 0;
}



画像を使ってみる・・・


アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!


↑こんな画像を作って(お持帰りはご自由に)・・

(画像の内側のサイズは280px×180px以上で作ります)



アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

※記事タイトルによっては記事リンク部分が3行になりますのでその場合も考えて画像を作ります



div#imageBoxWrap{
height:198px;/*画像の縦*/
background-image:url(画像のURL);
background-repeat: no-repeat;
background-position:center;
}
div#imageBox,
div#imageBoxWrap{
background:none;
}
div#imageBoxHeader,
div#imageBox ul {
margin:0 auto;
}



Ameba検索が変わったようですが・・・

Ameba検索・・・



たとえば・・・アメブロ向上企画書で検索してみて・・
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

普通・・・検索結果をもっと見るをクリックすれば・・・

当然これ以上が表示されるはずですよね・・

ごくごく当たり前のことなんですが・・

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!
・・・・

なぜ?まったく同じページ・・・?

ただページナビが表示されただけ・・?

これなら最初からページナビで良いのではないですか~?

または・・クリックしたら2ページ目を表示するとか・・・

じぇったいにおかしいと思いますよ・・・あめぶろさま~!!



ほかにすることが無かったんですか?

ほかにすべきことまだまだあると思いますが・・・?

PCの調子が悪くてなかなかコメント開放も質問の回答も出来なくてすみませんm(_ _)m