CSS メニューを作っちゃおう（動画はドコ？）
最近プロフィールから動画のリンクが消えてしまいました・・・・
困っています・・・・
遅くなりました・・・ リク記事です
動画のリンクだけポツンと増やしても・・・・
どうせならある程度並べてメニューにしちゃいましょ・・・・・
↑ こんなん目指していますが・・・・・ 見本 http://ameblo.jp/exlink001/
※見本サイトの左下のメニューを説明する予定です
右上のメニューに関しては質問無しでお願いします・・・マウスをのせると面白い動きをします
残念ながらこちらは記事にする予定はありません・・・ m(_ _)m
とりあえずは・・・・・
メニュー項目 と リンク先を確認します
ホーム http://ameblo.jp/あなたのID/
ルーム http://profile.ameba.jp/あなたのID/
フォト http://photo.ameba.jp/user/あなたのID/
動画 http://vision.ameba.jp/search/user.do?user=あなたのID
相談 http://requestion.ameba.jp/user/あなたのID/
チェック http://blog.ameba.jp/reader.do?bnm=あなたのID
プレゼント http://present-shop.ameba.jp/shop/top?toAmebaId=あなたのID
ペタ http://peta.ameba.jp/p/addPeta.do?targetAmebaId =あなたのID
アメンバーになる http://amember.ameba.jp/amemberRequest.do?oAid=あなたのID
メッセージを送る http://msg.ameba.jp/popupSendMessageInput.do?toAmebaId=あなたのID
読者になる http://blog.ameba.jp/reader.do?bnm=あなたのID&readerType=1
これらの中から自分のブログに設置したい項目をえらんでメモ帳とかにコピーして用意しておきます
並べる順番は・・・・ ど～でもかまいません
メニュー項目は・・・・ わかればいいです ホーム・HOME、相談・相 談・リクエスチョン・聞きたいこと・・・・
暑くてたまらないから ・・・・ つづく・・・・・・
次回・・・涼しくなるか、部屋にエアコンが付いてから (ﾟдﾟ;)A
※ ＩＥ以外は全滅しています・・・・・ どーしましょ？
何とかなりました・・・・・ Safariは未確認です・・・・・
CSS メニューを作っちゃおう（動画はドコ？）2
CSS メニューを作っちゃおう（動画はドコ？）3
CSS メニューを作っちゃおう 4
CSS
メニューを作っちゃおう5（横メニュー1）
CSS メニューを作っちゃおう6（横メニュー2）
CSS メニューを作っちゃおう7 画像の置き換え
JavaScript 背景画像をランダムで
2011年4月
もっと簡単に何でも出来ちゃう方法を記事にしましたのでそちらを参考にしてください
＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋
暑い・・・
PCのある部屋・・・・
エアコンが・・・・
もう何年も壊れたままですが
今年は暑すぎです・・・
PCの前に座っても何もする気が起きません
にしても・・・暑すぎです
扇風機が大きなドライヤー状態です・・・・
前にアップしました
の、使い回しです・・・・
ほとんど変わりません・・・・
と、いうことはカンタン！
何枚か背景画像を作って画像フォルダーにアップします
画像のＵＲＬで http://stat.ameba.jp/user_images/ から後ろの部分を
ranimg[0] ～ ranimg[2] に記入
（３枚をランダム表示にする場合です、以後ranimg[3]と増やしてください）
※文字数節約のためこんな書き方をしています
記事につけた背景画像をランダムに表示する場合
http://ameblo.jp/exlink/entry-10095202209.html
コレを参考にＣＳＳの最後に
.entry .contents{
background-image: url(画像のURL);
background-repeat: no-repeat;
background-position:80% 80%;
}
.contents #advertising2{
background:none !important;
}
※ここの画像のURLはhttp://から始まるURLです
画像は上でアップした画像のどれでもかまいません
できましたらフリープラグインに貼り付けてください
<script type="text/javascript">
<!--
var ranimg = new Array();
ranimg[0]="63/0d/143886433.jpg";
ranimg[1]="f6/d0/143886434.jpg";
ranimg[2]="cc/58/143886436.jpg";
var mai = Math.floor(ranimg.length*Math.random());
ranimg = ranimg[Math.floor(mai)];
document.writeln('<style type="text/css">'+"\n"+'<!--'+"\n"+'.entry .contents{background:url("http://stat.ameba.jp/user_images/'+ ranimg +'") no-repeat;}'+"\n"+'-->'+"\n"+'</style>');
// -->
</script>
このサイトのように記事下foot部分に背景画像をおく場合
CSSの最後に
.entry .foot{
padding-bottom:90px;/*foot下にスキマ*/
background: url(画像のURL) ;
background-repeat : no-repeat;
background-position:10% 100%;/*画像の位置 横 縦*/
font-size:10px;
text-align: right;/*記事URL|コメント|トラバ の位置 left-左寄せ center-中央寄せ*/
}
できましたらフリープラグインに貼り付けてください
<script type="text/javascript">
<!--
var ranimg = new Array();
ranimg[0]="63/0d/143886433.jpg";
ranimg[1]="f6/d0/143886434.jpg";
ranimg[2]="cc/58/143886436.jpg";
var mai = Math.floor(ranimg.length*Math.random());
ranimg = ranimg[Math.floor(mai)];
document.writeln('<style type="text/css">'+"\n"+'<!--'+"\n"+'.entry .foot{background:url("http://stat.ameba.jp/user_images/'+ ranimg +'") no-repeat;}'+"\n"+'-->'+"\n"+'</style>');
// -->
</script>
ブログの背景画像をランダムにする場合
ＣＳＳはさわる必要はありませんフリープラグインに貼り付けてください
<script type="text/javascript">
<!--
var ranimg = new Array();
ranimg[0]="63/0d/143886433.jpg";
ranimg[1]="f6/d0/143886434.jpg";
ranimg[2]="cc/58/143886436.jpg";
var mai = Math.floor(ranimg.length*Math.random());
ranimg = ranimg[Math.floor(mai)];
document.writeln('<style type="text/css">'+"\n"+'<!--'+"\n"+'body{background:url("http://stat.ameba.jp/user_images/'+ ranimg +'") ;}'+"\n"+'-->'+"\n"+'</style>');
// -->
</script>
※ブログの背景は繰り返しますのでno-repeatは入れません