極秘です・・・・？
2010.2.22
アメブロのフォトサービス終了にともない使用できなくなりました
------------------------------------------
ある筋から仕入れた極秘情報です・・・・
http://upphoto.ameba.jp/ucs/photo/uploadpop.do?popup=1&backPageNo=2
ログイン状態で ↑ をクリックしてみてください
さ～って・・・・ これは な？ん？だ？
ほんとうはここのブログの読者さまに教えていただいただけなんですけど・・・
どこについているか場所がわかんないようにＵＲＬだけにしてみました・・・
（これが出来る場所は2ヶ所確認できています）
アメブロさんにはナイショです・・・・？
ＣＳＳ ブログの横幅を広げませんか・・・
スタンダードのグリーン、ピーチ、ブルー、グレイのスキンは
初期の状態では横幅が760pxしかありません
サイドバーの中もキチキチで苦しそうです？
もう少し横幅を広げて余裕を作ってみませんか
そのほうが見やすいと思いますが・・・・
※1 ： 実際はwidth:99%;で設定されていますので400pxではありません
横幅を 760px から 820px に広げてみます
↑このように 増やした分は余白に使って見やすくしてみます
#frame{/*全体の横幅*/
width:820px;/*Ａ*/
}
#main{
width:400px;/*Ｂ*/
padding-left:20px;/*Ｃ*/
}
#sub_a{
width:170px;/*Ｄ*/
padding-left:10px;/*Ｅ*/
padding-right:10px;/*Ｆ*/
}
#sub_b{
width:170px;/*Ｇ*/
padding-left:10px;/*Ｈ*/
padding-right:10px;/*Ｉ*/
}
※ベーシックスキンの場合は↓も必要です
#wrap{/*全体の横幅*/
width:820px;/*Ａ*/
}
横幅が広がったためヘッド画像が繰り返して表示されてしまいます
#header{
background-repeat:no-repeat;/*繰り返さない*/
}
繰り返しはなくなりましたが・・・・・
元のスキンの背景色が・・・・
横幅820pxの画像を配置すればいいのですが・・・・
アメブロによりフォトに画像がアップできなくなりましたので
横幅820pxの画像を使うことができません（記事下の注）
画像フォルダ限度いっぱいの横幅800pxの画像をアップしても20px足りません
どうせ足りないのでしたら・・・ 中央に配置しちゃいましょう
で、周りは他と同じ色にすれば・・・よくない？
#header{
background-position:center;/*中央に*/
background-color:#f0e0d1;/*周りの色と合わせる*/
background-repeat:no-repeat;/*繰り返さない*/
}
いい感じになってきましたが・・・・
画像の下がくっついているのが逆に気になります
#wrap{
padding-top:20px;/*Ｌ*/
}
周囲が同じ色で囲われて画像が小さくても気にならなくなりました
次はユーザーナビとタイトルと概要の位置を画像に合わせます
#userNaviArea a#userNickName{
padding-left:50px !important;/*a*/
}
#header h1,
#header h2{
margin-left:50px;/*c、d*/
}
完成です・・・・・！！！
/* 横幅拡大 760px → 820px */
#frame,
#wrap{/*全体の横幅-ベーシックスキン対応*/
width:820px;/*Ａ記事を広げる場合は820+α*/
}
#main{
width:400px;/*Ｂ記事を広げる場合は400+α*/
padding-left:20px;/*Ｃ*/
}
#sub_a{
width:170px;/*Ｄ*/
padding-left:10px;/*Ｅ*/
padding-right:10px;/*Ｆ*/
}
#sub_b{
width:170px;/*Ｇ*/
padding-left:10px;/*Ｈ*/
padding-right:10px;/*Ｉ*/
}
#header{
background-position:center;/*中央に*/
background-color:#ffffff;/*周りの色と合わせる*/
background-repeat:no-repeat;/*繰り返さない*/
}
#wrap{
padding-top:20px;/*Ｌ*/
}
#userNaviArea a#userNickName{/*ユーザーナビ*/
padding-left:50px !important;/*a*/
}
#header h1,
#header h2{/*タイトルと概要*/
margin-left:50px;/*c、d*/
}
/*横幅拡大ココまで*/
今回は広げた分を余白に使いましたが・・・
記事部分を広げたりする場合は
現在の記事部分400pxから広げたい分だけＡとＢを増やしてください
Ａの820px+α Ｂｎｏ400px+α どちらも同じα分だけ増やしてください
※上のＣＳＳはスタンダードのグリーン、ピーチ、ブルー、グレイのスキン以外はうまくいかない場合があります
やばいです・・・先ほどより
背筋がゾクゾク～ のどが痛いような、辛い？ような・・・
完全に・・・ また風邪です・・・
土日はダウンしていると思います
質問の回答遅れるようでしたらすみません
とりあえず寝ます おやすみなさい
鼻水がたれてきた・・・って思ったら鼻血！
ご心配おかけしてすみません
おとなしくしています
注 ： 横幅800px以上の画像をアップする方法
http://ameblo.jp/exlink/entry-10197585673.html
http://ameblo.jp/exlink/entry-10057879053.html
スキンと背景のスキマだけ（ E と I ）広げたい場合は・・・・
もっと簡単に出来ます
CSS カーソルの変更
最近・・・ クロス（＋）のカーソルの変更方法の質問が多くなりました・・
私はカーソルを変更することには反対なんです
正直・・・教えたくはないんです
ネットにアップしていると言うことは
みなさまの友達だけが見に来るわけではありません
極端な話・・・ 世界中の方たちが見に来れるわけです
カーソルは意味を持ち
世界中で同じに使われています
ですから
カーソルを勝手に変更することは見に来てくれた方たちを戸惑わせ
みなさまのブログ自体を扱いにくくさせることです
これらのことはわかった上で使ってください
カーソルを変更するにはカーソル画像が必要になります
しかしカーソル画像の.ani、.cur、.ico などの拡張子が付いた画像は
アメブロの画像フォルダが受け付けてくれません
そこでアメブロでカーソルを変更するには
直リンがＯＫと明記してある素材サイトさまのカーソル素材を使うか
自分でサーバーを借りてカーソル画像をアップするしか方法はありません
私が知っている直リンＯＫの素材サイトは・・・・ひとつだけなので・・・・
ここにリンクをしてしまうと迷惑がかかりますから検索をしてください
すみません
こちらのサイトオーナーさまは直リンOKと書かれているのですが
直リンはサーバー負担が大きくなります
そのためサーバーから契約解除される場合があります
（こちらの読者さまならご存知のvjcatkickさまの場合もそのためにサーバーを変更され
現在はアメブロからも撤退されておられます）
こういったサイトがそのために消えていかないことを望みます
※こちらに限らず各サイトの注意事項は必ず読んでください
直リンについては こちらのサイトさまにわかりやすく書かれています
http://paki.s33.xrea.com/
または・・・わたしの記事の
http://ameblo.jp/exlink/entry-10271597365.html#direct
ＣＳＳに書く場合
body{cursor:url(カーソル画像のurl);}
a{cursor:url(カーソル画像のurl);}/*リンク部分のカーソル*/
フリープラグインに書く場合
<style type="text/css">
<!--
body{cursor:url(カーソル画像のurl);}
a{cursor:url(カーソル画像のurl);}
-->
</style>
body{cursor:url(カーソル画像のurl);}・・・こちらが通常のカーソルになります
a{cursor:url(カーソル画像のurl);}・・・こちらがリンク部分のカーソルになります
＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋
※素材サイトで・・・
<style type="text/css">
<!--
body{cursor:url(カーソル画像のurl);}
a{cursor:url(カーソル画像のurl);}
-->
</style>
このように配布している場合があります
これは本来は<head>部分に記入するためにこのように配布されています
アメブロでは<head>部分にさわれませんのでフリープラグインにこのまま貼り付けて使います
ＣＳＳの編集ができるスキンの場合は
<style type="text/css">
<!--
と
-->
</style>
この部分以外をＣＳＳに貼り付けてください
CSS 動きません・・ 質問するその前に
http://ameblo.jp/exlink/entry-10131393930.html
＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋
OSやブラウザによって表示されるカーソルの形状は異なる場合があります
表の上にカーソルをのせると そのカーソル形状が確認できます
|
IE（internetexplorer）限定独自のカーソルです
対応しているブラウザーの場合カーソルが変わります
|
ＣＳＳに書く場合
全体のカーソルに適用
body{cursor : 形状;}
リンク部分に適用
a{cursor : 形状;}
フリープラグインに書く場合
<style type="text/css">
<!--
body{cursor : 形状;}
a{cursor : 形状;}
-->
</style>
クロスのカーソルでリンク部分はいままで通り変えない場合は
body{cursor : crosshair;}
クロスのカーソルでリンク部分はヘルプにする場合は
body{cursor : crosshair;}
a{cursor : help;}
カーソルで使用可能な形式は.ani、.cur、.ico などですが
ブラウザーによってはgif,png 画像もカーソルとして使用できます
みなさまのご協力で確認することが出来ました ありがとうございました
ブラウザーが対応していれば表の上でカーソルが変わります
|
FF ：Firefox OP ： Opera SA ： Safari CH ： Chrome
また、カンマ「, 」で区切って複数のカーソルを設定しておくことも出来ます
そのことにより最初が使えない場合は次の設定のカーソル・・・ってことが出来ます
body{
cursor: url(カーソル画像.gif),url(カーソル画像.cur),auto ;
}
gif・pngのカーソル画像が使えるブラウザーでみると カーソル画像.gif のカーソル
対応していないブラウザーの場合は カーソル画像.cur のカーソルが表示されます
※ 最後の ,auto; がないと動作しません（autoでなくてもdefaultなどでもOK）
|
このカーソルに変わります