えっ・・？わたしだけ？

一部サービスにて障害が発生しております。調査、復旧に努めておりますので、しばらくお待ちください。

って・・マイページに書かれていますが・・・

↓これのこと・・・？

ご迷惑をかけていたらすみません

とりあえず記事がアップできるのか確認・・・　の為の記事です？

つまんない記事ですみません

JavaScript+CSS ステルスメニュー

ありがとうございます

読者さまが5000人を超えました

こんなに多くの方に見ていただいていたんだって改めて感激しています

もちろん隠れ読者さまも大歓迎しています

そして感謝読者さま5000人突破記念の？ステルスメニューです

なんじゃこれ・・・・？

ステルス・・・そうです見えないメニューです

見えなかったら使えないジャン

大丈夫・・マウスがヘッドにのったらあらわれるんです

使いにくそう～

使えんの～

めんどくさ～

つまんな～

意味なさそ～

などという批判はナシでお願いします

アメブロは批判してもわたしは批判されたくないんです？

ほんとうにもう引き出しが空っぽで・・キワモノしか出てこないんです・・

最初に言っちゃうとIE6は無視しています

フリープラグインの文字数節約のためにJavaScriptとCSSを使っています

IE6でも対応したいって～方はJavaScriptだけで作り直してください

ステルスメニューなんて書いちゃっていますが・・

この記事のタイトルつけるときすっごく悩んだんだから・・

隠れメニューとかマウスオーバーで現れるメニューとか・・

まっ・・こんなのは最初にやったもの勝ちで・・

ハッタリ！ハッタリ！！

好きなように呼んでください

見本ブログです 　ヘッド部分にマウスがのるとメニューがあらわれます

まずはフリープラグインにこのままコピペします

<script type="text/javascript">
$(function(){
$("#stmenu").appendTo("#header");
});
</script>

#stmenu は・・

もしすでに使っているメニューをステルス化する場合には

#topmenu とかメニューのID名にします

次はフリースペースにメニュー部分を作ります

今までにメニューの作り方は説明してきていますので今回はめちゃ簡単なのでやってみます

<div id="stmenu"><a href="http://ameblo.jp/あなたのID/" title="トップページに戻りま～す">ホーム</a> | <a href="http://profile.ameba.jp/あなたのID/" title="元はルームだけどね～">プロフィール</a> | <a href="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=あなたのID" title="いつもペタありがと～">ペタ</a></div>

説明では3つですが下を参考に好きなだけ増やしてください

もし枠内に入らない場合は下のＣＳＳでwidth: 300px;/*幅*/ココを増やします

あるいはfont-size:1.7em;/*文字サイズ*/文字サイズを小さくするとか（1.7emは普通の文字サイズの1.7倍　1.3emなら1.3倍　2emなら2倍です）

プロフィール（ルーム）
http://profile.ameba.jp/あなたのID/

ペタ
http://peta.ameba.jp/p/addPeta.do?targetAmebaId=あなたのID

読者になる
http://blog.ameba.jp/reader.do?bnm=あなたのID

メッセージ
http://msg.ameba.jp/pub/send/index?toAmebaId=あなたのID

アメンバー
http://amember.ameba.jp/amemberRequest.do?oAid=あなたのID

プレゼント
http://present-shop.ameba.jp/shop/top?toAmebaId=あなたのID

もしすでに使っているメニューをステルス化する場合にはすでにありますから必要はありません

ＣＳＳの最後に・・・・

#stmenu {/*メニュー部分*/
text-align: center;
color: #666666;/* ｜の色*/
font-size:1.7em;/*文字サイズ*/
font-weight:bold;/*太字*/
background: #cccccc;/*背景色*/
border:double 3px #666666;/*枠線の種類・太さ・色*/
width: 300px;/*幅*/
padding: 5px 0;
}
#stmenu a{/*メニュー部分*/
color: #666666;/*文字色*/
}
#stmenu a:hover{/*メニュー部分*/
color: #ffffff;/*マウスオーバー文字色*/
}

↑この部分はメニューを表示するＣＳＳですから

すでに使っているメニューをステルス化する場合には必要ありません

ココからはステルス化のＣＳＳです

#header{/*おまじない*/
position: relative;
}

#stmenu {/*表示位置*/
position: absolute;
bottom: 20px;/*下から*/
left: 30px;/*左から*/
display:none;
}

#header:hover #stmenu {
display: block;
}

↑こちらがステルス化にするためのＣＳＳです

#stmenu は・・

もしすでに使っているメニューをステルス化する場合には

#topmenu とかメニューのID名にします

top または bottom と　left または right のメニューの表示位置関係

別にメニューじゃなくても・・

このブログのように ・・　ペタボタンだったり

このブログのように ・・　すでにあるメニューをステルス化することも出来ます

↑どちらもヘッド部分にマウスをのせてみてください

いろいろ工夫して楽しんでください

なかなかコメントを開放できなくてすみません m(_ _)m

ブログに写真を貼りたい・・画像フォルダ

記事に画像を貼る方法をやろうとしたら

その前に・・・・画像をアップしなければ・・・

ブログに写真を貼り付けるためには写真を画像フォルダにアップする必要があります

また・・画像フォルダから写真を削除すると

その写真が記事に貼り付けられていた場合・・・その記事から写真が消えます

だから画像ファイルからの削除は気をつけて行ってください

※記事を書いている最中でも写真を画像フォルダにアップすることも出来ますが

　今回は最初に画像フォルダにアップする方法で説明していきます

ブログに写真を貼りたい・・拡張子(GIF・JPG・PNG)

ブログに写真を貼りたい・・縮小 　

↑これらの記事まだの方は読んでおいてくださいな

一度に3枚（または5枚）までアップすることが出来ます

Google Chromeの場合はチョット画面が違いますが・・・

参照を押してパソコンの中にある画像の中からアップする写真を選択します

アップする写真を選び終わったらアップロードボタン・・・

もし3枚（5枚）以上アップするときは再度同じことを繰り返します

注意：

アップした順番通りにフォルダに入るとは限りません

アップする写真の中で容量の小さい順にフォルダに入ります

ココのように説明画像の順番が大事な場合はすっごく困るんです

以前は順番通りに入ったからよかったんですが・・・

以前のように元に戻して欲しいです　(T_T)

↑タイトル未設定　になっていますが画像をアップするときに面倒でなければタイトルを入れておきます

わたしはほとんど入れたことがありません・・・　が

順番が大事な場合は1　2　3　ってタイトルをつけると後で楽です

1なんとか　2なになに　3これこれ　なんて本来のタイトルの前につけておいて記事にありつけた後で123の部分だけ消すって手も・・・

↑順番通りにはアップできない場合があります（ファイルサイズの小さなものが先に入ります）
alt="アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！-1"

タイトルはブログ名の後につけられます
alt="アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！-1なんとか"
HTMLタグを表示にしておいて1を消せば本来のタイトルになります

サムネイル画像をクリックすると後でもタイトルを入れたり変更した理が出来ます

ついでに・・・ＣＳＳでよく使う画像のＵＲＬや画像の横や縦のサイズの調べ方・・

Internet Explorer は画像の上で右クリック→プロパティで調べることが出来ます

注意：

Ａの画像を右クリックしてプロパティではオリジナルの画像のＵＲＬはわかりません

このときの画像のＵＲＬは縮小されているサムネイル画像の画像のＵＲＬです

↓アドレス（URL)が画像のＵＲＬです　※大きさは実際のサイズではありません

IEで実際のサイズを調べるには・・

↓500px×375px と画像のサイズがわかりました



大きさ　500×375 ピクセル　（　横 500px　縦 375px ）

Firefox の場合は　画像の上で右クリック→画像のＵＲＬをコピーで画像のＵＲＬがわかります

画像のサイズを調べる場合は・・　画像の上で右クリック→プロパティ　（横×縦）

（画像のＵＲＬもここでもわかります）

画像の大きさ（　)内の数字は今見えているサイズで本来のサイズではありません

Google Chromeの場合は右クリック→画像のＵＲＬをコピーで画像のＵＲＬをコピーできます

が・・・画像サイズは・・？

ＣＳＳで画像サイズを使いますので画像サイズがすぐに調べることが出来ないと不便です・・

そこで・・・

Google Chromeに拡張機能をインストールします

拡張機能 > Image Properties Context Menu
https://chrome.google.com/extensions/detail/khagclindddokccfbmfmckaflngbmpon




↓インストールに成功すると・・・

新しいタブで調べたい画像を開きます

※↑このとき　Image Properties をクリックで調べることが出来ました（後で気がついた・・）

画像の上で右クリック

Image Properties で・・・

↑画像のサイズ（横×縦）を調べることが出来ます

次こそ画像を記事に貼り付け・・・かな？