フォト終了の前に・・・

コメントで質問されました・・

明日でフォトが終了ですがどうなりますか？

正直・・わかりません

今回のフォト終了について質問です

2/22過ぎたら消えるのか？消えないのか？

アメブロに出した問い合わせにまだ回答はありません

コメントで教えていただきました・・　　(・・。)ゞ

そういわれたら・・
どこかで年末まで表示されるって見た記憶が・・
自分でも記事にも書いた記憶があるような・・
明日ってことでパニクッているようです
どちらにしても記事のようにしておけば差し替えが楽です

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

■引き続き利用可能な機能（2010年末まで）
・ブログに貼り付けたフォト画像の表示
・ルームの「自己紹介」「フリースペース」の「フォト」
（※画像フォルダの画像がお使いいただけるようになります。）

で・・ＣＳＳで使っているフォト画像は？って質問したんですが・・

回答ナシってことは心配するなって～こと？・・ならいいのですが・・

みなさまが800pxを超えた画像をフォトに入れてスキンに使っていることはアメブロ側も承知しています

なので・・

わたしの考えではスキンで使っている分についてはそのまま表示されると思っています

でなければ3/9なんて時期のずれたことを言ってこないと思うんです・・・

あす・・多くのみなさまのスキンから800px超えた画像が消えたら大騒ぎになります

とはいっても・・念のために・・800pxオーバーの画像フォルダーができたときのために準備しておきます

まずはＣＳＳをメモ帳とかにコピペします

編集→検索

/org/ を検索します（ /org/はフォトで必ず使っています・・・）

見つかったら使っているＣＳＳをコピーします

コピーしたらＣＳＳの一番最後に貼り付けます

（これはメモ帳の最後に貼り付けていますが・・ＣＳＳの編集で一番最後に貼り付けてもOKです）

/org/ を検索して使っているＣＳＳを全部検索してＣＳＳの最後に貼り付けます

貼り付け終わったらフォトのＵＲＬをコピー

それをブラウザーのアドレスに貼り付けてEnter・・・すると画像が表示されますから

画像の上で右クリック→名前をつけて保存・・

そのとき画像の名前をその画像が使われているＣＳＳのID名やclass名にしておきます

最後にメモ帳の最後に付け加えた方はＣＳＳの編集の最後にも付け加えておいてください・・

※メモ帳もどこかに保存しておいてください（ＣＳＳの保存になります）

とりあえずはこれで準備は完了です

3月9日に画像がアップできるようになったら保存したところからアップします

header.jpgをアップして画像のＵＲＬを調べます

そしてＣＳＳの最後につけた・・・

#header{
margin:0 auto;
width: 860px;
background-image:url(http://img0.photo1.ameba.jp/e/exlink/org/0734fNR96Eth44tRw6oRS2.jpg);
background-repeat : no-repeat;
}

赤字部分のフォトの画像のＵＲＬと変更します

同じように

wrap.ｊpgもアップして画像のＵＲＬを調べてＣＳＳの最後にある

#wrap{
width: 860px;
background-image:url(http://img0.photo1.ameba.jp/e/exlink/org/1323249.jpg);
}

フォトの画像のＵＲＬと入れ替えます

見本としてわたしのブログの場合ですから#headerや#wrapになっていますが

みなさまのは別の場所で使っている場合もあります

また枚数も多い場合もあります

どちらにしてもこのようにしておけば画像の切替も楽にできます・・・

もし・・

#wrap{
width: 860px;
background-image:url(http://img0.photo1.ameba.jp/e/exlink/org/1323249.jpg);
}

と・・

#wrap{
width: 860px;
background-image:url(http://img0.photo1.ameba.jp/e/exlink/org/0734fRw6oRS2..jpg);
}

このように同じ#wrap{でいくつもあった場合は・・

一番最後に書かれている方（下に書かれている方）だけＣＳＳの最後に書いてください

わかる方だけでいいのですが・・

ＣＳＳの最後に貼るつけるのは・・本当は

↓この部分だけで大丈夫なんですよ・・・・

#header{
background-image:url(http://img0.photo1.ameba.jp/e/exlink/org/0734fNR96Eth44tRw6oRS2.jpg);
}

#wrap{
background-image:url(http://img0.photo1.ameba.jp/e/exlink/org/1323249.jpg);
}

わからない方は・・上の説明のように全部をＣＳＳの最後に貼り付けておいてください

明日・・スキンに貼ってあるフォト画像がいっせい消えたら大騒ぎになりそうですね・・・

どうなるんでしょう？

記事がぎりぎりになってしまってすみませんm(_ _)m

CSS 定義リスト <dl><dt><dd>

アメブロ向上企画書ノート 　とりあえず形になった記念？

定義リスト <dl><dt><dd>　の説明です

定義リスト<dl>は用語<dt>とその説明（定義）<dd>から構成され
今回のようなFQA(Q&A)や用語集などで便利な使われ方をします

HTMLに書くときは・・

<dl>
<dt>定義リストって？</dt>
<dd>定義リスト&lt;dl&gt;は用語&lt;dt&gt;とその説明（定義）&lt;dd&gt;から構成</dd>
<dt>どんなときに使うのか？</dt>
<dd>FQA(Q&A)や用語集などで使うと便利です</dd>
</dl>

ベーシックやグリーンなどのスキンを使っていると

ブラウザにはこう表示されます↓


※CSSで変更している場合はこのように表示されない場合もあります

/*FQA*/
.fqa{
padding:10px 20px;/*A B*/
}
.fqa dl{
width: 375px;/*C*/
}
.fqa dl dt{
margin-top:10px;/*D*/
padding:1px 0 1px 10px;/*E 0 F G*/
font-size:1.2em;/*文字サイズ*/
background:#cccccc;/*背景色　H*/
}
.fqa dl dd{
margin:0;
padding:10px;/* I */
border:1px solid #cccccc;/* J */
}

↑上の説明は次回説明予定の開閉する場合の画像を使って説明しています

　今回の記事だけでは上のように開閉はしません


記事に書くときはHTMLタグを表示にしてから

上のHTMLを　<div class="fqa">　と　</div>　で囲みます

<div class="fqa">
<dl>
<dt>定義リストって？</dt>
<dd>定義リスト&lt;dl&gt;は用語&lt;dt&gt;とその説明（定義）&lt;dd&gt;から構成</dd>
<dt>どんなときに使うのか？</dt>
<dd>FQA(Q&amp;A)や用語集などで使うと便利です</dd>
</dl>
</div>

と・・　↓こうなります・・・

定義リストって？

定義リスト<dl>は用語<dt>とその説明（定義）<dd>から構成

どんなときに使うのか？

FQA(Q&A)や用語集などで使うと便利です

※　class="fqa"　と　CSSの　.fqa を変更すればいろいろなパターンを作ることが出来ます

次は・・FQA のように開閉できるようにしてみます・・・

JavaScript　定義リスト <dl><dt><dd>　開閉

わからないことがあったら・・まずは・・

FQA 　や　オセロの下のGoogleブログ内検索を使ってください

CSS ピグスキン・大航海時代

ピグスキン・大航海時代を使われているみなさま・・・

コメント欄をこのようにしてみませんか？

3カラムの場合は・・・・・

<style type="text/css">.each_comment{padding:0 0 30px;background:#fff url(http://stat100.ameba.jp/p_skin/piggskin1_voyage/img/bg_entry_bottom.gif) no-repeat center bottom;color:#1072b4;}</style>
<style type="text/css">.label{padding:10px 0 5px 10px;background:url(http://stat100.ameba.jp/p_skin/piggskin1_voyage/img/bg_entry_head.gif) no-repeat 0 0;}</style>
<style type="text/css">#comment_module .comment_footer{padding:60px 0 0 10px;text-align:left;}</style>

↑このままフリースペースへ貼り付けてください

2カラムの場合は

<style type="text/css">.each_comment{padding:0 0 30px;background:#fff url(http://stat100.ameba.jp/p_skin/piggskin1_voyage/img/bg_entry_bottom_l.gif) no-repeat center bottom;color:#1072b4;}</style>
<style type="text/css">.label{padding:10px 0 5px 10px;background:url(http://stat100.ameba.jp/p_skin/piggskin1_voyage/img/bg_entry_head_l.gif) no-repeat 0 0;}</style>
<style type="text/css">#comment_module .comment_footer{padding:60px 0 0 10px;text-align:left;}</style>

↑このままフリースペースへ貼り付けてください

自分のコメントとゲストさまのコメントを分ける場合は・・・・

3カラム用画像・・・

2カラム用画像・・・

画像をダウンロードして自分の画像フォルダにアップして画像のＵＲＬを調べておきます
もちろん自分で作った画像でかまいませんがサイズは同じにしておいてください

で・・・　フリープラグインにＩＤだけ変更してこのまま貼り付けます

<SCRIPT LANGUAGE="JavaScript">
<!--
/* 0902a exlink */
function exAc() {
var myUrl="http://ameblo.jp/アメブロID/";
var myLimit=500,e=0,k=1,i,nC="admin_comment",oC="each_comment";
var Ent = document.getElementById ("main");
var myLinks = Ent.getElementsByTagName("a");
for(i = 0; i < myLinks.length; i++){
var myLink = myLinks[i];
if(myLink.href == myUrl){
var Com = myLink.parentNode.parentNode.parentNode;
if(Com.className == oC ){
Com.className = (Com.className).replace(oC,nC);}}
k++;if (k > myLimit) {break;}}}
function enThickbox() {exAc();
try {initializeUpload(false, false);} catch(e) {}
try {checkpw();} catch(e) {}}
window.onload = function(){enThickbox();}
// -->
</SCRIPT>

赤字部分のアメブロIDだけを入れてそのままフリープラグインに貼り付けてください

たとえばここの場合でしたら
var myUrl=http://ameblo.jp/exlink/;

新・自分のコメントを "もっと"わかりやすく 　参考にして下さい

できましたら・・・フリースペースに追加します（上で設定しているCSSに付け加えます）

<style type="text/css">.admin_comment{margin:0 0 11px;padding:0 0 30px;background:#fff url(画像のＵＲＬ) no-repeat center bottom;color:#666666;}</style>

※ただコメント欄を変えるだけでしたら　フリースペース　にＣＳＳを貼り付けます

　自分とゲストさまを分ける場合は　フリースペース にＣＳＳ 、フリープラグイン に javascript を貼り付けます

　フリースペースにＣＳＳを貼り付ける場合・・
　　　<style type="text/css">～</style>この間は改行はＮＧです