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

アメブロさ~ま~ 使いにくくなってますよ~

最近・・・・

見えるところ見えないところでアメブロの手が入っています



使いず~ら~・・・・・



メッセージになぜアメブロの画像のURLが書けないの?

画像をあげることも・・・

CSSの説明も出来ません・・・



いままで使えていたCSSの編集が使えなくなって困っているみなさまがおられますよ~




そのうち・・スキンも有料になりますか?

プレミアムデザイン・・なんかにおうのは気のせいなんでしょうか?


前にも書いていますが・・・

広告をいっぱいつければそれが広告収入に結びつくと思ったら大きな間違いではないですか?

ブログが使いにくくなってアメブロから会員が減っていくようなことにならなければいいのですがね・・




他のブログに乗り換えようとは思いませんが・・・・

もう少し・・初心者以外の方たちにも使いやすくしてくれませんか?




【追記】

メッセージと画像のURL

http://stat.ameba.jp/user_images/20100801/03/exlink/21/53/g/o1111111111111111111.gif ○
http://stat.ameba.jp/user_images/20100801/03/exlink/21/53/g/o0901111111111111111.gif ×
http://stat.ameba.jp/user_images/20100801/03/exlink/21/53/g/o1090111111111111111.gif ×
http://stat.ameba.jp/user_images/20100801/03/exlink/21/53/g/o1109011111111111111.gif ×
http://stat.ameba.jp/user_images/20100801/03/exlink/21/53/g/o1110901111111111111.gif ×
http://stat.ameba.jp/user_images/20100801/03/exlink/21/53/g/o1111090111111111111.gif ×
http://stat.ameba.jp/user_images/20100801/03/exlink/21/53/g/o1111109011111111111.gif ×
http://stat.ameba.jp/user_images/20100801/03/exlink/21/53/g/o1111110901111111111.gif ×
http://stat.ameba.jp/user_images/20100801/03/exlink/21/53/g/o1111111090111111111.gif ×
http://stat.ameba.jp/user_images/20100801/03/exlink/21/53/g/o1111111109011111111.gif ×
http://stat.ameba.jp/user_images/20100801/03/exlink/21/53/g/o1111111110901111111.gif ○
http://stat.ameba.jp/user_images/20100801/03/exlink/21/53/g/o1111111111090111111.gif ○
http://stat.ameba.jp/user_images/20100801/03/exlink/21/53/g/o1111111111109011111.gif ○

http://stat.ameba.jp/user_images/20100801/03/exlink/21/53/g/t01690090_1111111111111111111.gif ○
http://stat.ameba.jp/user_images/20100901/03/exlink/21/53/g/o1111111111111111111.gif ○


オリジナル画像ファイル名のはじめの部分の 090080070 がNGになるようです 

JavaScript サイドバーにスライドショー

記事にスライドショー は試していただけましたか?


こんどはサイドバーにスライドショーを設置します

いぜんはフォトのスライドショーがあってそれをサイドバーになんて記事 も書きましたが・・

アメブロがフォトを廃止したおかげでスライドショーも使えなくなってしまいました



ほとんどやり方は記事にスライドショー と同じような物です

と・・言うより参考先そのままなのでコチラを先に記事にすべきでした


参考: http://snook.ca/archives/javascript/simplest-jquery-slideshow




前の記事 と同じで画像サイズは統一する必要があります



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


画像サイズがわかりにくくてすみません

この画像の場合は全部横が165px(サイドバーの幅より狭くしてください)縦が190pxです

画像サイズは揃えてあればどのようなサイズでも(サイドバーにはいれば)大丈夫です


画像サイズが決まったら


フリープラグインに・・


<script type="text/javascript">
$(function(){
$('#ss-show img:gt(0)').hide();
setInterval(function(){
$('#ss-show :first-child').fadeOut("slow")
.next('img').fadeIn("slow")
.end().appendTo('#ss-show');},
3000);
});
</script>


3000約3秒で画像が入れ替わります

4500なら4.5秒 10000なら約10秒

他のブログパーツや見ている方のパソコンによって誤差がありますが目安くらいで・・



CSSに・・・



#ss-show {
position:relative;
margin:10px auto;/*上下10px&中央*/
width:165px;/*画像の横*/
height:190px;/*画像の縦*/

}
#ss-show img {
position:absolute;
left:0; top:0;
}

先ほど決定した画像のを入れてください
10pxは上下のスキマです・・自由に調整下さい


CSSの編集が使えないスキンの場合はフリープラグインに・・


<style type="text/css">
#ss-show { position:relative; margin:10px auto; width:165px; height:190px; }
#ss-show img { position:absolute; left:0; top:0; }
</style>



スライドショーに使う画像を用意します

わかりやすく見やすく書くと・・


<div id="ss-show">
<img src="画像のURL">
<img src="画像のURL">
<img src="画像のURL">
<img src="画像のURL">
<img src="画像のURL">
</div>


注意です・・・

フリースペースに貼り付けますが改行をなくしてから貼り付けてください

たとえば上のでしたら↓このようになります・・↓この状態のをフリースペースに貼り付けます

<div id="ss-show"><img src="画像のURL"><img src="画像のURL"><img src="画像のURL"><img src="画像のURL"><img src="画像のURL"></div>



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

↓こちらはOK!

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



途中に改行が残っていると↓うまく画像が入れ替わりません
このように途中で空白が現れる場合は途中に改行がないか確認します









これでフリースペースの中にスライドショーが表示されます



今回はさらにおまけです・・

サイドバーの中で表示位置を自由に変更してみます・・・

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


<script type="text/javascript">
$(function() {
$("#ss-show").insertAfter("#calendar");
});
</script>


たとえば・・

#calendar はカレンダーの下に表示します
#profile    ならプロフィールの下に表示
#recent_entries なら最近の記事一覧の下に表示
#theme_list   ならブログテーマ一覧の下に表示
#archives   ならアーカイブの下に表示
#search   ならブログ内検索の下に表示
#reader   ならこのブログの読者の下に表示
#favorite   ならお気に入りブログの下に表示
#ranking   ならアメブロランキングの下に表示
#bookmark   ならブックマークの下に表示
#ameblo   ならRSSの上に表示
#rss   ならRSSの下に表示
#defaultAd   ならPRの下に表示

赤字部分を変更して表示したい位置に設定します


見本に・・このブログの右サイドのRSSの上につけてみました (表示間隔は3000です)




スライドショーを2つ以上付けたい場合は・・ID名を変えて同じことをやってください




+++++++++++++++++++++++++++

あれからすぐに病院に行ったおかげで顔面まで腫れあがる事は避けられましたが・・

なかなか耳の周りの腫れがひきません

どうやら今週末もコメントは開放できないようです

すみません m(_ _)m


このブログのサイドバー・・オセロの下にある「Googleブログ内検索」に探したいキーワードを入れて検索するか・・

http://ameblo.jp/plan-note  こちらで探してみてください

も~イヤだ!!!!!

あ~・・・


また耳の後が腫れちゃってきてるよ・・


さわっちゃダメだってわかっていてもついついさわってしまいます





また・・顔半分腫れちゃうの?



とりあえず前回のまなかった抗生剤を飲んだのですが・・


前に薬局でクセになっちゃうと危ないよって脅かされたんで・・・

(実際には脅されていません・・・つい・・被害者ぶってみたかっただけです・・)



エアコンをつけたり消したり・・

何度も何度もトイレにいったり・・

なかなか眠れません・・

このところ毎週末・・・

調子が良くない日が続いています・・

また今週もコメント開放・・できないかも・・・ m(_ _)m





ど~なる・・・ 自分?