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

Google Sky・・・・

先週Google Skyが発表されました

http://www.google.com/intl/ja/sky/


いきなり日本語化されていてビックリ

画面左上に、月 Moon や 火星 Mars へのリンクもあります
(こちらは日本語化されていません)



ちょっと重いかもしれません

星の好きな方はぜひみてください

サイドにあるメッセージを送るって・・・・?

※3/18午前中までにコピーされた方・・・

 m(_ _)m 間違いがありました 

 =あなたのアメーバID  の =の前に半角のスペースが入っているために動作しません

 =の前のスペースを削除してから使ってください

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


質問ありがとうございます

「サイドにあるメッセージを送る」・・・・・



実は・・・・

ニックネーム:・・・・から

メッセージを送る  までが全部フリースペースに書いているだけなんです

プロフィールは使っていないんです



プロフィールでもよかったのですが

当初、プロフィールの画像を作っていませんでした

作るつもりもなかったので

画像がアメーバのプロフィール使っても意味がありませんので

フリースペースに必要と思われる部分?だけ載せたんです



CSSが使えないスキンの場合は


<ul id="amemberProfArea"><br>
<li class="nickname">ニックネーム:<a href="http://profile.ameba.jp/あなたのアメーバID/">あなたのニックネーム</a><br>
<li id="peta"><a href="http://profile.ameba.jp/general/peta/checkPetaFlag.do?targetAmebaId=あなたのアメーバID">ペタを残す</a></li><br>
<li class="checkList"><a href="http://blog.ameba.jp/reader.do?bnm=あなたのアメーバID">チェックリストに追加</a></li><br>
<li id="amemberProf3"><a href="http://amember.ameba.jp/amemberRequest.do?oAid=あなたのアメーバID">アメンバーになる</a></li><br>
<li><img src="http://stat.ameba.jp/p_skin/cmn/img/icon_msg.gif"><a href="http://msg.ameba.jp/popupSendMessageInput.do?toAmebaId=あなたのアメーバID" class="linkMsg" target="_blank"> メッセージを送る</a></li><br>
</ul>


赤字部分をあなたのID、ニックネームにかえてから
フリースペースに貼り付けてください






CSSが使えるスキンの場合は


CSSの最後にこのままコピペ


.mess {
margin-bottom: 5px !important;
padding: 2px 0 3px 21px !important;
background: url(http://stat.ameba.jp/p_skin/cmn/img/icon_msg.gif ) no-repeat 0 4px !important;
}


赤字部分をあなたのID、ニックネームにかえてから
フリースペースに貼り付けてください

チャント綺麗に並びます


<ul id="amemberProfArea"><br>
<li class="nickname">ニックネーム:<a href="http://profile.ameba.jp/あなたのアメーバID/">あなたのニックネーム</a><br>
<li id="peta"><a href="http://profile.ameba.jp/general/peta/checkPetaFlag.do?targetAmebaId=あなたのアメーバID">ペタを残す</a></li><br>
<li class="checkList"><a href="http://blog.ameba.jp/reader.do?bnm=あなたのアメーバID">チェックリストに追加</a></li><br>
<li id="amemberProf3"><a href="http://amember.ameba.jp/amemberRequest.do?oAid=あなたのアメーバID">アメンバーになる</a></li><br>
<li class="mess"><a href="http://msg.ameba.jp/popupSendMessageInput.do?toAmebaId=あなたのアメーバID" class="linkMsg" target="_blank"> メッセージを送る</a></li><br>
</ul>


もちろん、全部書く必要はありません

「メッセージを送る」だけとか

文面を「メッセージを送る」ではなく「プチメ」にしたりとか

自由に変えてください

CSS float の見栄えをよくする

文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。
水元公園2 文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。 水元公園2 文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。

↑右と左は同じ画像を使っていますが表示のしかたが違っています・・・

  左は細工無しの場合・・・・右は細工をしています・・・


種明かし・・・・

左は・・・・そのままで

<img style="CLEAR: both; FLOAT: left" height="160" src="画像のURL" width="220" border="0" />


右は・・・・赤字部分を付け加えています
<img style="CLEAR: both; FLOAT: left; margin:20px" height="160" src="画像のURL" width="220" border="0" />

右の方は画像の周りに20pxの余裕をつけているんです・・・・

margin:0 0 0 20px ・・・ 画像の左側のみ20pxあける

margin:10px 20px  ・・・ 画像の上下に10px、左右に20pxあける

・・・・・・などなど、自分で自由に設定してかまいません

むしろ、設定して画像と文章を離した方が読みやすいと思います・・・・

※上下のスキマは文章の行間が影響しますので設定より多くなる場合があります