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

ブログ画像一覧を見る

このブログをフォローする

<< 前のページへ最新 | 102 | 103 | 104 | 105 | 106 | 最初次のページへ >>

ブーシュカをサイドバーに・・・

みなさまブーシュカを記事に貼り付けて紹介していますが・・・

サイドバーに貼り付けたら

いつでも・・

どのページでも・・

ブーシュカを見てもらうことが出来ます

まずは記事に貼り付けます

記事の編集でHTMLタグを表示にしてみると・・・

<div style="TEXT-ALIGN: center"><object type="application/x-shockwave-flash" height="200" width="240" data="http://stat.boo.ameba.jp/boo_images/20100129/12/5a/cd/s/exlink.swf"><param value="http://stat.boo.ameba.jp/boo_images/20100129/12/5a/cd/s/exlink.swf" name="movie" /></object></div>
<div style="TEXT-ALIGN: right">⇒<a href="http://boo.ameba.jp/room/exlink?guid=ON">exlinkさんのﾌﾞｰｼｭｶを見る</a>
</div>

この中の青字部分をコピー・・・

赤字の高さと幅を

height="200" width="240" 　　→ 　　height="133" width="160" 　に変更します

※width="240" height="200" と height と widthが逆になっている場合もありますので数字を入れるときに注意下さい

↓あとは・・これをフリープラグインに貼り付けるだけ・・・・

設置していただいているみなさまです・・・　ご協力ありがとうございます

ゆきだるま　さま

パニパニ♀絵日記さま

S L O W L I F E さま

ゆうの部屋　さま

☆｡毎日がひとりごと｡☆ 　さま

GZ 　さま

メッセージボードに貼り付ける場合は

メッセージボードでHTMLタグを表示にして貼り付けてください

フリープラグインの文字数が余裕な方は・・2つとか3つとか違うのを貼ってはいかがでしょうか？

くっつくのが気になるようでしたら間に　<br> を入れれば1行空間が開きます・・・

CSS　ルームが変わりました　3　（アイコンを変更)

今度はアイコンを変更します

ルームのフリースペースに・・・

アイコン画像のＵＲＬだけ変更して改行をしないで貼り付けます

↓コレはＮＧです

#leftArea #userLink #peta { background: url(ペタアイコン画像のＵＲＬ);

padding:2px 0 2px 23px; }

</style>

改行しないで貼り付けてください

ペタアイコンを変更・・・

アメンバーアイコンを変更・・・

<style type="text/css">#leftArea #userLink #amember{ background: url(アメンバーアイコン画像のＵＲＬ) no-repeat 0 0; padding:2px 0 2px 23px; }</style>

メッセージアイコンを変更・・・

<style type="text/css">#leftArea #userLink #msg { background: url(メッセージアイコン画像のＵＲＬ) no-repeat 0 0; padding:2px 0 2px 23px; }</style>

プレゼントアイコンを変更・・・

<style type="text/css">#leftArea #userLink #present{ background: url(プレゼントアイコン画像のＵＲＬ) no-repeat 0 0; padding:2px 0 2px 23px; }</style>

基本的にココから下はさわる必要がありません
もし・・サイズが極端に違うアイコンを使って表示位置がおかしくなった場合に参考にして下さい

padding:2px（Ａ） 0 2px（Ｂ） 23px（Ｃ）;/*上　右　下　左*/

23px（Ｃ）を大きくすれば文字が右に移動します・・・

が・・全体の幅が決まっていますのであまり大きくすると表示が崩れます・・

上下の間隔は上（Ａ）または下（Ｂ）あるいは両方の数字を大きくします