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

ど~しても・・・Thickbox が使いたい!!

面倒になりますが・・・・

それでもいいから

Thickbox をど~しても使いたい! ぜったいにThickbox! って~方のために・・・・


↓何もしない場合





HTMLタグを表示にして見ると↓このようになっているはずです

<a href="http://stat.ameba.jp/user_images/02/a1/10082505529.jpg " target="_blank"><img height="165" srchttp://stat.ameba.jp/user_images/02/a1/10082505529_s.jpg " width="220" border="0" /></a>



http://stat.ameba.jp  

http://ameblo.jp/public/image/displayimage.do?imagePath= に無理やり変えてしまいます

・・・以前はアメブロがこの処理を自動でやっていたんですが



<a href="http://ameblo.jp/public/image/displayimage.do?imagePath=/user_images/02/a1/10082505529.jpg " target="_blank"><img height="165" src="http://stat.ameba.jp/user_images/02/a1/10082505529_s.jpg " width="220" border="0" /></a>


imagePath=●/user_images   ←の位置にスペースとかが入らないように注意ください


すると↓こうなります



※ゲストさまと管理人のコメントを分けるのは今まで通り何もしなくても使えます

※画像情報が入っていませんので自動でやらせるのはムリでした m(_ _ )m



今回のアメブロによる変更で画像にタイトル情報が付かなくなっています

「タイトル未設定」と表示されるのを出ないようにするには

if(!myLink.innerHTML.match(/<img/i) && myLink.href != ""){ myLink.setAttribute("title"," ");} else {var myTitle = myLink.childNodes[0].getAttribute("alt"); myLink.setAttribute("title",myTitle);}}

この部分を

myLink.setAttribute("title"," ");}

このように変更してください


またタイトルをつけたい場合は

<a href="http://ameblo.jp/public/image/displayimage.do?imagePath=/user_images/02/a1/10082505529.jpg " target="_blank"><img alt="○× " height="165" src="http://stat.ameba.jp/user_images/02/a1/10082505529_s.jpg " width="220" border="0" /></a>

と、alt="○× "と、1枚ごとにタイトルを加える必要があります  タイトル名・・○×


また・・・・

逆にThickboxは、も~ぜったいに使わない!!って~方は


<link href="http://stat.ameba.jp/blog/ucs/css/common/thickbox.css " rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="http://blog.ameba.jp/ucs/js/editor/selectimage.js"></script >
<script type="text/javascript" language="javascript" src="http://blog.ameba.jp/ucs/js/common/jquery.js"></script >
<script type="text/javascript" language="javascript" src="http://blog.ameba.jp/ucs/js/common/thickbox.js"></script >
<SCRIPT LANGUAGE="JavaScript">
<!--
/* 80416C exlink/vjcatkick */
function enTb() {

・・・・・・・・・・・・・・・・・・・・・・

・・・・・・・・・・・・・・・

・・・・・・・・・・

フリープラグイン から赤字部分を削除してもOKです

その場合でもゲストさまと管理人のコメントを分けるのは動作します



コメントを分ける必要のない方は全部削除下さい・・・・・(ノ_・。)


////// テストです //////////////////////////



広告非表示は有料だってさ・・・

スタッフブログで・・・・

http://ameblo.jp/staff/entry-10124586896.html


サイドバー上のPRが正式に配置が決まったようですね・・・

今まではスキンによってあったりなかったりでしたので消し方を記事にしていましたが

今度からは消し方書いてある記事は消さないとダメですね


の、代わりに記事下の広告はなくします・・・なんて一言も、どこにも書いてありません

その代わり広告無しの有料版をリリースするようです



結局・・・・

広告なしは有料・・・・

無料版はさらに広告を増やすって・・・・ことですね



CSS タイトル画像のロールオーバー・・・・

タイトルのヘッド画像のところにマウスをのせると画像が変るようにしたいのです・・・

リク記事です


自分のこのブログも以前に設定したままなので・・・・

どうやったか覚えていませんので・・・?

やり直す気持ちでやってみます

はじめはオリジナルスキンCSSの編集 ヘッド・タイトル3 の続きで


#header h1 a:hover にマウスがのった時の画像を設定すればいいや・・・

なんて軽く考えていました

たぶんいいはずなんですが・・・・・

画像が大きいからなんでしょうか?うまくいきません

一度クリックするとあとはうまくいくのですが・・・・

最初からは思ったように動いてくれません・・・・?

画像を先読みしないとダメなんでしょうか・・・?



・・・・・で、

つぎに考えたのが#headerにマウスが乗った時の画像を設定

#header h1 a に普段の画像を設定しておいて

#header h1 a:hover でマウスが乗った時に 

display:none; と普段の画像の表示を消せば#headerに設定した画像が表示される・・・・

これなら両方の画像とも最初に読み込んでいるからスムーズに動くはず・・・・


結果は・・・・

なんかうまくいったようないってないような・・・・

画像がチカチカしてしまうんです


http://ameblo.jp/exlink001/  ここに仕込んであります

でも・・・・

この場合は・・・・

なんかヘビのおもちゃが悲鳴を上げているようで・・・

これはこれでよくないですか?



でも、皆さんに紹介するには失敗です



むかし・・・・?

ホームページを作ったときに使った方法・・・・

2枚の画像を1枚にして

background-position で表示位置を変更する方法なんですが

それなら最初から画像が読み込まれるのでうまくいくはず!!!!

って思い込んでいます



次にチャレンジしますのでもう少しお待ちください

どうせなら全部の画像をまとめて1枚にチャレンジしてみようかな・・・ 

出来るはずなんです・・・・・けど・・・・ たぶん・・・・




CSS タイトル画像のロールオーバー2

CSS タイトル画像のロールオーバー3