おきつねさまのひまわりTips

20110630 060431

CSS Tips －あしあとコメント枠と、入力枠を上下逆さまに－ FTひっくりかえる･･･

ついでに ひまSt風に、入力枠を上にして診るw


たったコレだけ、

/* ***** ServiceKeySettings *********************** */ 

/* ▼▼ Rights ▼▼ */

#profile_footprintcomment_ret
	{
		position: absolute;
		margin: 350px 0px 0px 0px;
	}
キホンは激シンプルw


で、フォロー部分が･･･

/* ***** ServiceKeySettings *********************** */ 

/* ▼▼ Rights ▼▼ */

#profile_footprintcomment_form_textarea
	{
 		position: relative; /* Update 20110628 xxxxxx － 無いと入力出来なくなる */
	}

#profile_footprintcomment_form_submit
	{
 		position: relative; /* Update 20110628 xxxxxx － 無いとボタン押せなくなる */
	}
コンなカンジ。


あと、ソレより下のオブジェクト表示のサポートがﾒﾄﾞｲさんで放置したので、

/* ***** NoDisplays *********************** */

#imobile_adspotframe1, /* 下部広告枠 - Update 20110628 */
#fc2count, /* 馬カウンタ - Update 20110628 */
#sh_fc2footer_menu, /* 馬フッタ タブ - Update 20110628 */
#sh_fc2footer /* 馬フッタ */
	{
		display: none;
	}

が、必要だったり(^_^;)


詳細は おきつねさまのトコのCSSソースに･･･　って、ソレ診るならコッチが オススメw



＜  ＞

20110627 152007

CSS Tips －左と右のオブジェクトを入れ替える－ ~~LRひっくりかえる~~[砕月式左右反転部屋]･･･

とある利用者さんの面白いアプローチを、基本的な手法で補完して診ました。
この方法なら　くろむたんでも大丈夫♪


これらを･･･

/* ***** ServiceKeySettings *********************** */ 

/* ▼▼ Lefts ▼▼ */

#profile_left_box
	{
		padding: 0px;
		float: right; /* ココだけが重要w */
	}

#profile_footprintcomment_body
	{
		width: 710px; /* コメント全体枠の幅を拡大 */
		padding: 0px;
		position: relative;
	}
そのまま追記、ないし、既存の宣言内に追加訂正してください。


つか、これだけで良い時もw･･･

/* ***** ServiceKeySettings *********************** */ 

/* ▼▼ Lefts ▼▼ */

#profile_left_box
	{
		padding: 0px;
		float: right; /* ココだけが重要w */
	}



p.s.
放置していた要追記事項w

/* ***** ServiceKeySettings *********************** */ 

/* ▼▼ Rights ▼▼ */

.profile_footprintcomment_text
	{
		width: 660px; /* Update 20110628 1539xx － 幅を指定しないと食み出る */
	}




＜  ＞

20110625 164704

CSS Tips －ユーザーアイコンを任意に差し替える･･･

･･･登録変更では無く、装飾として差し替えたい場合に有効。


[CSS]

/* ***** OverWriteSessions *********************** */

/* ▼▼ Lefts ▼▼ */

/* ▼▼ ユーザーアイコンを乗っ取り ▼▼ */

#profile_image_img
 	{
		visibility: hidden; /* ← 既定の ユーザーアイコン を 非表示に */
	}

/* ▲▲ ココまで ▲▲ */


[内容書き換え]

#profile_image_body
	{
		[img=170]http://任意の画像URL[/img]
	}



画像置く処理だけは innerHTML[内容書き換え]でBBCodeを使う方が、画像サイズが自動調節され便利。



＜  ＞

20110622 153219

CSS Tips －装飾に動画を使いたい－オブジェクトに動画を貼る･･･

･･･とある利用者さんの質問に応えて診る。


任意のオブジェクトに対して動画を貼るにはどうするか？


前置きとして、コレは、CSSのみで実現出来る機能ではありません、innerHTMLで 任意の空間とIDを確保する必要があります。
暇では、[内容書き換え]機能で、innerHTMLを利用出来、その中では、あしあとで使えるBBCodeは全て使えます。

また、暇で許容されている利用者側から可能なアプローチは、BBCodeで可能な範囲に限られます。
そして、今回のような利用での主要な役割は、CSSよりもBBCodeの側が負っています。


ソレを踏まえた上で、実効サンプルなど･･･

[内容書き換え](コピペ用)

#profile_right_freespace_3_body
	{
		[div=video_frame_a][video]http://www.youtube.com/watch?v=vIpzF_2JQ8c[/video][/div]
		[div=video_frame_b][video]http://www.youtube.com/watch?v=vIpzF_2JQ8c[/video][/div]
	}


その内訳は、

#profile_right_freespace_3_body  ← 任意の空きオブジェクトを指定してください。 
	{
		[div=video_frame_a][video]http://www.youtube.com/watch?v=vIpzF_2JQ8c[/video][/div]  ← Youtubeソースだとコンなカンジ 
		[div=video_frame_b][video]http://www.youtube.com/watch?v=vIpzF_2JQ8c[/video][/div]  ← キー(ID)を変えれば複数設置も可能 
	}



このうち、重要な点は、この　 [div=video_frame_a]
[div=video_frame_b] 赤文字の部分 で 指定しているID。
コレは各位任意で指定するキーです。

後述するサンプルCSSで、対象の各種プロパティを設定する為に利用する例を挙げています。


ツマるトコ、上述の[内容書き換え]の指定だけだと、貼る事は出来ても、
通常、上下に余白が無く、左に寄った配置になってしまうので、以下のように[CSS]枠で指定してください。

[CSS]

#video_frame_a,
#video_frame_b
	{
		padding: 50px 0px 50px 0px; /* ← 動画の上下余白を指定 */
		text-align: center; /* ← 動画を、オブジェクト内で水平中心へ配置するよう指定 */
		
	}


このTipsで指定しているプロパティや値は、実効値Deathが、あくまで例です。
CSSで扱う他のオブジェクト同様、多彩な指定が可能です。



＜  ＞

20110620 020935

･･･

･･･



＜  ＞

20110617 045310

BBCode Tips －あしあとに動画貼りとなっ!?･･･

･･･BGM設置の質問が来ていたので、その前に類似な ココへの動画埋め込みってドウやるのか試行して診た。


結果としては、

[video]http://www.youtube.com/watch?v=動画ID[/video]
コレだけ!?･･･( ; ﾟДﾟ)


HTMLのつもりで、何気に難しい(遠回りな)コト考え過ぎて、結構無駄に時間喰って おきつねさま 激敗北･･･orz



＜  ＞

20110616 034103

JavaScript Tips － (ほぼ)アクセス毎ランダムに配置画像を変えたい－考証編･･･

･･･ReSもしないで、コンなモノにハマっていたのだが。
暇のようなトコでは、サスガに安直には有効にならない･･･orz

縦しんば、その方法を見つけたとして、公開したらシャレにならん(´ﾍ｀；)
自サイト等での活用向けにサンプルは曝しておきます･･･

で、暇対応版は、おきつね鯖の恩恵の元 実現できる目途が立ったので、次のログに･･･



[Thumbnails.js]

// ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
// 標準出力で HTMLへ直接書き込みます。
function RndThumbnails()
	{
		var imgSet = new Array("画像1-URL","画像2-URL","画像3-URL","画像4-URL");
		var imgCount = 4;
		var RndNum = Math.floor(Math.random()*imgCount);
		document.write("<img src='" + imgSet[RndNum] + "' border='0' />");
	}
	
// ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
// 指定IDの内容を乗っ取ります。(暇の[内容書き換え]と同じ処理を利用)
function idRndThumbnails()
	{
		var imgSet = new Array("画像1-URL","画像2-URL","画像3-URL","画像4-URL");
		var imgCount = 4;
		var RndNum = Math.floor(Math.random()*imgCount);
		var tgtURL = "url(" + imgSet[RndNum] + ")";
		document.getElementById('profile_image_body').style.backgroundImage = tgtURL;
	}


[index.html]

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="Content-Language" content="ja" lang="ja" xml:lang="ja" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<link rel="shortcut icon" href="http://www.okitsunesama.com/favicon.ico" type="image/vnd.microsoft.icon" />
		<link rel="icon" href="http://www.okitsunesama.com/favicon.ico" type="image/vnd.microsoft.icon" />

		<style type="text/css">
		<!--
			#profile_image_body
				{
					width: 133px;
					height: 173px;
					margin: 0px;
					border: 0; 
				}
		-->
		</style>
		<script type="text/javascript" src="Thumbnails.js"></script>
		<title>OkitsunesamaServer Script - RandomThumnails</title>
	</head>
	<!-- body onLoad="RndThumbnails()" -->
	<body onLoad="idRndThumbnails()">
		<div id="profile_image_body"></div>
	</body>
</html>




＜  ＞

20110614 223630

CSS Tips －ユーザーアイコンの強制変更－決定版･･･

･･･ブラウザ差異による影響を最小限に。




/* ▼▼ ユーザーアイコンを乗っ取り ▼▼ */

#profile_image_img
 	{
		visibility: hidden; /* ← 既定の ユーザーアイコン を 非表示に */
	}

#profile_image_body
	{
		background: url(http://～任意の画像URL);
		background-repeat: no-repeat;
		width: 133px; /* ← 幅を画像に合わせる */
		/* height: 174px; */ /* ← 高さを画像に合わせる */
		padding: 0px;
	}




＜  ＞

20110613 230628

CSS Tips － FC2ロゴ消去－ 20110613確定版･･･

･･･ふっ、馬め、おきつねさまを本気にさせたな(￣ー￣)ﾆﾔﾘ


って、前より激簡単･･･(; ・ ・)


/* ＝＝＝＝＝ OverWriteSessions ＝＝＝＝＝＝＝＝＝＝ */

/* ▼▼ 馬消すだけ ▼▼ */
#sv_logo a
 	{
	 	background: url();
	 	padding: 0px;
 	}
ナンだ、この単純さはっっ!!　･･･馬め、おきつねさまを ｳﾞｧｶにしてるのかっっっ(#ﾟДﾟ)ι


つまらん、また退屈になってしまったぁぁ (#＿ー＿)ゴロン(＿ー＿#)ゴロン(#＿ー＿)ゴロン(＿ー＿#ゴロン


nanoで、おきつねさまは 呪ってみる♥

/* ＝＝＝＝＝ OverWriteSessions ＝＝＝＝＝＝＝＝＝＝ */

/* ▼▼ ひまわり動画 タイトルロゴをCSSで乗っ取り完全版 ▼▼ */

#sv_logo a img
	{
		visibility: hidden; /* ← 既定の ひまわり動画ロゴ を 非表示に */
 	}

#sv_logo a
	{
		background: url(http://www.okitsunesama.com/HimaCommu/FC2/umawari_logo.png) no-repeat left top;
		margin: 0px;
		padding: 0px;
		display: block;
	}

/* ▲▲ ココまで ▲▲ */




･･･で、フッタがウザいと云う向きにはコチラΨ(｀∀´)Ψ

/* ＝＝＝＝＝ NoDisplays ＝＝＝＝＝＝＝＝＝＝ */

#sh_fc2footer,
#sh_fc2tooter_tab
	{
		display: none;
	}




＜  ＞

20110611 0812

CSS Tips － FC2ロゴ消去－確定版･･･




 このTipsは、現在無効Death、最新版をドゾ♪ 



･･･って、コレは、おきつねさま発行の方法ではなく、
ポテトサブさんより寄稿して貰った、激シンプルにして完璧なモノDeath。




記述は･･･　 img[alt|=FC2]
	{
		display:none; /* ← FC2ロゴ消去 */
	} ･･･コレだけ ( ; ﾟДﾟ)


確かにCSSを色々イジってて セレクタがドウのってハナシは よく聞いてたケド、
自鯖で自サイトやる分にはマズ不要だったので気にしたコト無かったと云う罠がっ(← ダメぎつねっっ

やってることは簡単、キー中のプロパティ(上の例では alt が該当)に列挙されている値を検索して、
対象を確保し、内容を置き換える機能、CSSでのセレクタ。　なんかもう、C言語みたいで･･･(´ﾍ｀；)


ただ、コレだけだと、一寸遊びが 物足り無いので･･･


おきつねさま用として コンなモノをツクって診たw

/* ＝＝＝＝＝ OverWriteSessions ＝＝＝＝＝＝＝＝＝＝ */

/* ▼▼ ひまわり動画 タイトルロゴをCSSで乗っ取り完全版 ▼▼ */

img[alt|=ひまわり動画]
	{
		visibility: hidden; /* ← 既定の ひまわり動画ロゴ を 非表示に */
 	}

td div a[href="http://himado.in/"] /* 対象オブジェクトを、要素の順序を条件に、検索して取得する */
	{
		position: absolute;
		background-repeat: no-repeat;
		top: 0px;
		background-image:url(http://www.okitsunesama.com/HimaCommu/FC2/umawari_logo.png);
	}

/* ▼ 高さ確保処理、代替。 */
.headmenu
	{
		margin: 35px 0px 0px 0px; /* ← 20110611夜以降の新仕様に対応 */
	}

/* ▲▲ ココまで ▲▲ */


/* ▼ 高さを決める親要素(table)を、プロパティstyleの内容を鍵にして取得･･･
FF3.x以前と他のブラウザで機能しない為 排除 －

table[style="border: 0px none; margin: 0px; padding: 0px; width: 992px; font-size: 90%;"] 
	{
		height: 55px; ← 親要素の高さを再設定 
	}
*/


･･･ 一寸だけ セレクタの利用方法を垣間見れると思う。　って、理屈は ぢつに単純w


上述中の、

td div a[href="http://himado.in/"]  部分で、
td配下の div配下の hrefの内容が "http://himado.in/" の a(リンク)オブジェクトを捜して、
その対象に任意の設定を、強制適用する･･･ と、云う流れ。

因みに、td div  の 部分を省いただけで、暇では 一寸したオチが憑きますwΨ(｀∀´)Ψ


idやclassのキーが無くて触れられないオブジェクトでも、この方法なら、ナニかしらの値を検索して利用出来る分、まだ救いがあるかもw
ただ 気掛かりは、古い資料によるトコロ、コレら処理は りんご系機材を 一切無視されたモノの様nanoで、
ソレらが最新環境では 扱いが どうなっているのか･･･　おきつねさまは りんご機は所有していないので、未確認だったりする(^_^;)


ただ、

table[style="border: 0px none; margin: 0px; padding: 0px; width: 992px; font-size: 90%;"]
は、条件が複雑過ぎたのか、火狐2.x/3.x 以外(お嬢(IE)/くろむたん)では、処理出来なかった(´ﾍ｀；)

対策として、キーのある近接オブジェクトから marginを設定した。



＜  ＞

20110611 0626

CSS Tips －ユーザーアイコンの強制変更･･･




 このTipsは、ブラウザに依存がある為、改訂版を提示しました、最新版をドゾ♪ 



･･･今、暇ではユーザーアイコンの差し替えが出来なくなって困っている模様。
nanoで、自分の部屋だけでも暫定的に変更したい向きに、策を２つほど提供しようと思う。


まずは、次のログで扱う、ポテトサブさん提供の FC2アイコンの消去法を 少しモジって展開してみた。


記述は･･･

/* ▼▼ ユーザーアイコン表示乗っ取り ▼▼ */

#profile_image_img /* ← ユーザーアイコン */
	{
		display:none; /* ← 対象を非表示に */
	}
div[id|=profile_image_body] /* ← 親要素を選択 */
	{
		height: 150px; /* ← 高さを再度確保。　･･･画像に合わせて変更して下さい。 */
		background-repeat: no-repeat;
		background-position: left top;
		background-image:url(http://～任意の画像URL);
	}

/* ▲▲ ココまで ▲▲ */
と、云ったカンジ。　ただ、･･･りんご系機材で実行可能かは不明。



で、もう ひとつの策は、一寸遠回り･･･ つか、もう こうなるとCSSではナイDeathが(^_^;)
もう、面倒なので、やっぱり乗っ取ります♪w


[内容書き換え]枠に

>#profile_image_body
	{
		[img=133]http://～任意の画像URL[/img]
	}
列挙自体はシンプルですが、元の表示が一瞬表示されてしまいます。


 赤文字部分 を 任意に書き換えるコトで、もう好き放題Death♪Ψ(｀∀´)Ψ
しかし、コレらの手段だと、他の利用者さんのトコでは、反映されないのDeathが･･･(´ﾍ｀；)



＜  ＞

20110611 0308

使ってる画像群･･･

･･･取り敢えず纏めておこうかと(^_^;)


・logo.png － 本家ロゴ
　< from WebSite


・umawari_logo.png － ../HimaCommu/FC2/umawari_logo.png
　< from WebSite - Edit with PhotoshopCS

・fc2_logo_00.png － ..HimaCommu/FC2/fc2_logo_00.png
　< from WebSite - Edit with PhotoshopCS


・Hima_logo_00.png － ../HimaCommu/Himawari/Hima_logo_00.png
　< from WebSite - Edit with PhotoshopCS


・pb_fc2_logo_81_34_00.png － ../HimaCommu/FC2/fc2_logo.gif
　< Creating InDesignCS - with PhotoshopCS




▼▼▼ IE6.x以前向け透過GIF群･･･ ▼▼▼▼▼

・fc2_logo.gif － ../HimaCommu/FC2/fc2_logo.gif
　< from WebSite - Edit with PhotoshopCS


・Hima_logo_00.gif － ../HimaCommu/Himawari/Hima_logo_00.gif
　< from WebSite - Edit with PhotoshopCS


・Hima_logo_long_00.gif － ../HimaCommu/Himawari/Hima_logo_long_00.gif
　< from WebSite - Edit with PhotoshopCS


・pb_fc2_logo_81_34_00.gif － ../HimaCommu/FC2/pb_fc2_logo_81_34_00.gif
　< Creating InDesignCS - with PhotoshopCS



＜  ＞

20110611 0106

BBCode Tips －あしあとでの画像の貼り付け－ imgの使い方･･･

･･･前ログのimg(画像貼り付け)の部分だけを別途説明、利用したい向き多いみたいだし、暇での書式を扱います。
但し、相手に迷惑にならないよう、 画像のサイズには気を付けて 下さいね(^_^;)


まず、そのまま貼るのなら･･･

[img]http://画像URL～[/img]
これだけnanoだけど、


画像の表示サイズを指定したい場合は、

[img={画像サイズpx}]http://画像URL～[/img]
コレで横幅のみ指定して、縦横比を最適に保持して縮小表示されます。

例)

[img=70]../image/profile/169272.jpg[/img]
おきつねさまのReS用テンプレでは この書式が適用されています。


対して、縦横比無視してでも、任意の表示サイズを適用したい場合は、

[img={幅(横サイズ)px}x{高さ(縦サイズ)px}]http://画像URL～[/img]
と、記述してください。　･･･尚、数字の区切りは、ANK(半角)小文字の x (エックス)です。

例)

[img=70x10]../image/profile/169272.jpg[/img]
この記述の場合、画像サイズが判っている場合にのみ、数値を最適化して適宜利用しないと、
画像が正しく表示されないので、余りオススメ出来ません。


また、コレらのサイズを一定サイズに抑える記述をCSSで定義出来ます。

大き過ぎる画像を貼られても困らないよう、CSS側で適宜対応出来ますから、
ソレに関しては、後程 別途触れますね(^_^;)



p.s.
例で扱っているURL記述で  ../  と していますが、コレはHTMLのルールになるので、
説明放置しようと思ったのですが(ﾏﾃｺﾗ

あの記述で、ルートURL(暇なら "http://himado.in/")を表すことが出来ます。
 ./  で、一つ上の階層(フォルダ)、　 /  か 指定ナシで、同じ階層 を現すコトが可能Death。

この記述は、HTMLファイルサイズ縮小のほか、URLを隠蔽する手段としても有効Death。
って、鯖運営側としての利点ってコトになるのですが･･･w

従って当然、外部鯖のファイルには適用出来ませんよ(^_^;)



＜  ＞

20110609 1822

BBCode Tips － BBCodeテンプレート－ほしみっつ書式･･･

･･･ReSに相手のサムネも表示できますよ(^_^)／
以下をテキストファイルに保存して管理すると、相手別のテンプレートになります。


◆◆◆ !! update 20110611 1121 !! ◆◆◆


 赤色  の部分は、マクロ実行用の緩衝スペースです、ポストの際には消して下さい。

 UserNo.  部分に、自身のUserNo.を記述して利用して下さい。


ひま動用

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
>> [url=http://himado.in/?mode=profile&user_no= UserNo. ]さん　[img=70]../image/profile/.jpg[/img][/url]


[url=http://himado.in/?mode=profile&user_no= UserNo. #yyyymmddhhnnss]<< from - yyyy/mm/dd hh:nn:ss[/url] ★★☆ [url=http://himado.in/?mode=profile&user_no= UserNo. #yyyymmddhhnnss]   Next - yyyy/mm/dd hh:nn:ss >>[/url]


－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
>> [url=http://himado.in/?mode=profile&user_no= UserNo. ]さん　[img=70]../image/profile/.jpg[/img][/url]


[url=http://himado.in/?mode=profile&user_no= UserNo. #yyyymmddhhnnss]<< from - yyyy/mm/dd hh:nn:ss[/url] ★★☆ [url=http://himado.in/?mode=profile&user_no= UserNo. #yyyymmddhhnnss]   Next - yyyy/mm/dd hh:nn:ss >>[/url]


		:
		:
		:



ひまスト用

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
>> [url=http://himast.in/user/ UserNo. ]さん　[img=70]../image/profile/ UserNo. .jpg[/img][/url]

[url=http://himast.in/user/ UserNo. #yyyymmddhhnnss]<< from - yyyy/mm/dd hh:nn:ss[/url] ★★★ [url=http://himado.in/?mode=profile&user_no= UserNo. #yyyymmddhhnnss]   Next - yyyy/mm/dd hh:nn:ss >>[/url]


－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
>> [url=http://himast.in/user/ UserNo. ]さん　[img=70]../image/profile/ UserNo. .jpg[/img][/url]

[url=http://himast.in/user/ UserNo. #yyyymmddhhnnss]<< from - yyyy/mm/dd hh:nn:ss[/url] ★★★ [url=http://himado.in/?mode=profile&user_no= UserNo. #yyyymmddhhnnss]   Next - yyyy/mm/dd hh:nn:ss >>[/url]


		:
		:
		:



＜  ＞

20110609 1756

CSS Tips －内容書き換え機能とBBCode －一寸仕様が･･･

･･･一般的なものと異なる模様。


本来動く筈の、入れ子記述が機能しなくて少し困りました。
ソレでも、自身の機材の低性能起因の経験が生きました･･･orz
･･･Processorの超限定情報(実クロックのみ)取得し、条件如何でプロセッサに倍率変更命令を投げるだけのプログラム組む為、
C++とC#触れたことがありまして、あの へんちくりんな記述の理屈を模倣したら動作しました(爆)



＜  ＞

20110609 0104

CSS Tips － FC2アイコン対策－ BBCodeで処理自体を上書きするΨ(｀∀´)Ψ･･･

･･･って、内容置き換え機能でBBCodeを利用して、貼り替えた部分にリンクを適用する。


 確定版追記更新しました! << コチラ >> を利用して下さい。



このログは、内容置き換えを利用したHTMLの上書き方法サンプルとして残しますが、
メニューを任意で増やす等の場合を除いて、この用途としては煩雑過ぎてオススメ出来ません。



 !! 注意 !! 
 現状、[検索枠] 部分を まだ処理出来ていません。 
 [検索枠] が 必要と思われる方は、このTipsを適用しないで下さい。 

･･･って、他は ほぼ実現出来たのだが、そもそもソレって、
BBCodeで何とかなるモノなのか!?( ; ﾟДﾟ) ってトコが、目下の課題･･･(´ﾍ｀；)


で、適用するのは、まず[CSS]枠に、

/* ＝＝＝＝＝ RootKeySettings ＝＝＝＝＝＝＝＝＝＝ */

/* img */ /* ← コチラでも可 */
#header img /* ← 必須 */
	{
		text-decoration: none;
		border: none;
		vertical-align: middle;
	}


/* ＝＝＝＝＝ OriginalKeySettings ＝＝＝＝＝＝＝＝＝＝ */

#header_inner
	{
		font-size: 9pt;
	}

#headmenu_ex
	{
		color: #4169E1 !important;
		margin: 8px 0px 8px 0px;
		font-size: 9pt;
		height: 34px;
		text-align: center;
		vertical-align: middle;
	}

#headmenu_ex_01
	{
		padding: 11px 0px 0px 0px ;
		font-size: inherit;
		height: 23px;
		width: 82px;
		border-left: 1px solid #7FBFFF;
		border-top: 1px solid #7FBFFF;
		border-bottom: 1px solid #7FBFFF;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
		-webkit-border-top-left-radius: 5px;
		-webkit-border-bottom-left-radius: 5px;
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-bottomleft: 5px;
		vertical-align: middle;
	}

#headmenu_ex_02
	{
		margin: -36px 0px 0px 82px;
		padding: 11px 0px 0px 0px ;
		font-size: inherit;
		height: 23px;
		width: 82px;
		border-left: 1px solid #7FBFFF;
		border-top: 1px solid #7FBFFF;
		border-bottom: 1px solid #7FBFFF;
		vertical-align: middle;
	}

#headmenu_ex_03
	{
		margin: -36px 0px 0px 164px;
		padding: 11px 0px 0px 0px ;
		font-size: inherit;
		height: 23px;
		width: 82px;
		border-left: 1px solid #7FBFFF;
		border-top: 1px solid #7FBFFF;
		border-bottom: 1px solid #7FBFFF;
		vertical-align: middle;
	}

#headmenu_ex_04
	{
		margin: -36px 0px 0px 246px;
		padding: 11px 0px 0px 0px ;
		font-size: inherit;
		height: 23px;
		width: 82px;
		border-left: 1px solid #7FBFFF;
		border-top: 1px solid #7FBFFF;
		border-bottom: 1px solid #7FBFFF;
		vertical-align: middle;
	}

#headmenu_ex_05
	{
		margin: -36px 0px 0px 328px;
		padding: 11px 0px 0px 0px ;
		font-size: inherit;
		height: 23px;
		width: 80px;
		border: 1px solid #7FBFFF;
		vertical-align: middle;
	}

#headmenu_ex_06
	{
		margin: -36px 0px 0px 410px;
		padding: 11px 0px 0px 0px ;
		font-size: inherit;
		height: 23px;
		width: 82px;
		border-right: 1px solid #7FBFFF;
		border-top: 1px solid #7FBFFF;
		border-bottom: 1px solid #7FBFFF;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		-webkit-border-top-right-radius: 5px;
		-webkit-border-bottom-right-radius: 5px;
		-moz-border-radius-topright: 5px;
		-moz-border-radius-bottomright: 5px;
		vertical-align: middle;
	}

#headmenu_ex_01:hover,
#headmenu_ex_02:hover,
#headmenu_ex_03:hover,
#headmenu_ex_04:hover,
#headmenu_ex_05:hover,
#headmenu_ex_06:hover,
#headmenu_ex_01:hover a,
#headmenu_ex_02:hover a,
#headmenu_ex_03:hover a,
#headmenu_ex_04:hover a,
#headmenu_ex_05:hover a,
#headmenu_ex_06:hover a
	{
		color: #4169E1 !important;
		background-color: #fbc800;
	}
と、定義を追加するだけ･･･　オリジナルのキーがあるので、判り易く分けてある。


次いで、今Tipsの要、[内容置き換え]枠に、

#header
	{
		[div=header_inner]
			[url=http://himado.in][img]http://himado.in/image/logo.png[/img][/url]
			　　　　　　　　　　　　　　
			| 動画 | 
			[url=http://himado.in/st/]ストリーム(移転します)[/url]
			　　　　　　　　　　　　　
			　[url=http://himado.in/?mode=series][Myシリーズ][/url]
			　[url=http://himado.in/?mode=mylist][Myリスト][/url]
			　[url=http://himado.in/?sort=movie_id&user_no=任意入力][登録動画][/url]
			　[url=http://himado.in/?mode=mypage][Myページ][/url]
			　[url=http://himado.in/?mode=logout][ログアウト][/url]
		[/div]

		[div=headmenu_ex]
			[div=headmenu_ex_01]動画登録[/div]
			[div=headmenu_ex_02]コメント[/div]
			[div=headmenu_ex_03]ランキング[/div]
			[div=headmenu_ex_04]タグ一覧[/div]
			[div=headmenu_ex_05]ヘルプ[/div]
			[div=headmenu_ex_06]お問い合わせ[/div]
		[/div]
	}

#headmenu_ex_01{[url=http://himado.in/?mode=add]動画登録[/url]}
#headmenu_ex_02{[url=http://himado.in/?mode=commentgroup]コメント[/url]}
#headmenu_ex_03{[url=http://himado.in/?mode=rank]ランキング[/url]}
#headmenu_ex_04{[url=http://himado.in/?mode=tags]タグ一覧[/url]}
#headmenu_ex_05{[url=http://himado.in/wiki/]ヘルプ[/url]}
#headmenu_ex_06{[url=http://himado.in/?mode=contact]お問い合わせ[/url]}
と、先頭位置にコヒペで追記(そうしないと、コレで処理される表示(上書き)が遅れる)して下さい。
そして上述の 任意入力 部分に、自身のUserNo.を記述して[Preview]し、支障が無ければ[保存]で確定して下さい。

また、 緑色 の部分は、間隔調整の為、全角スペースで埋めてある部分Death。
フォントや そのサイズを変えている場合は、その配置数で調節する必要があります。
その際、半角スペースは使わないで下さい。


ただ、コレだと 前述の通り、まだ検索枠が表示されない。
アレが要る向きは、今の処 前のログのモノを適用するほうが良いのかも･･･(´ﾍ｀；)
って、あっちはあっちで･･･orz


･･･で、このまま馬表示しておかないのもアレだから、

/* ＝＝＝＝＝ RootKeySettings ＝＝＝＝＝＝＝＝＝＝ */

.footer
	{
		height: 34px;
		background-image: url(http://www.okitsunesama.com/HimaCommu/FC2/pb_fc2_logo_81_34_00.gif);
		background-repeat: no-repeat;
		background-position: right top;
	}
と、定義してあげようね、みなさん寄って集って上から目線でww



＜  ＞

20110607 1827

CSS Tips － FC2アイコンの背景色変更－別オブジェクトで上書きしてるだけw･･･


 現在、このTipsは、再検証ちぅDeath。 
 ブラウザ起因か、鯖起因か、原因不明のズレが発生する事が判りました。 

 おきつね環境下では、各ブラウザで正しく機能しているのDeathが、 
 暇の[内容書き換え]機能の初期化が、Previewで失敗している可能性が確認されています。 

 再度クロスブラウザチェックの後、更新しますので、急ぎ適用する場合は、 
 次ログのTipsを参考にして下さい m(_ _)m 


 <<< !! UnderConstruction !! >>> 


･･･って、消してしまっているワケではナイし、問題ない! ってコトにしておこう♪


ただ、リンクとしては機能しないケド･･･(^_^;)

 !!) 
ひまロゴをリンクさせつつ、以前の位置に表示し、且つ 壁紙を阻害しないようにするには、HTML側を上書きする必要が出てくる･･･
で、次のログでは、ソレを試行して診ているので、参照して、良いほうを利用して下さい。




#profile_center_freespace_1_body
	{
		background-image: url(http://www.okitsunesama.com/HimaCommu/FC2/fc2_logo_00.png); /* ← 透過処理済FC2ロゴ */
		background-repeat: no-repeat;
		background-position: left top;
		background-color: #1e50a2; /* ← 任意の背景色を指定して下さい。 */
		position: absolute;
		top: 0px;
		left: 8px;
		width: 101px;
		height: 55px;
		padding: 0px;
	}

<< 20110609 0416 >>
▲ widthの行、間違って消してました m(_ _)m
あと、表示位置、値の変更を要する部分を排除しました。



－－－－－ p.s.
<< 20110608 1852 >>
上述中の該当部分を以下の様に変更するとww

background-image: url(http://www.okitsunesama.com/LazwardFox/Reports/HimaLog/parts/Himawari/Hima_logo_00.png);
width: 350px;



<< 20110608 2220 >>
更にアップグレード! Blogger的にしてみたww(^_^)
但し、コレだと、ひまロゴもリンクしなくなる･･･oTZ




.footer
	{
		height: 34px;
		background-image: url(http://www.okitsunesama.com/HimaCommu/FC2/pb_fc2_logo_81_34_00.gif); /* ← Powered By FC2透過ロゴ */
		background-repeat: no-repeat;
		background-position: right top;
	}

#profile_center_freespace_1_body
	{
		background-image: url(http://www.okitsunesama.com/LazwardFox/Reports/HimaLog/parts/Himawari/Hima_logo_00.png); /* ← 横幅拡大版ひまわり動画透過ロゴ */
		background-repeat: no-repeat;
		background-position: left top;
		background-color: #1e50a2; /* ← 任意の背景色を指定して下さい。transparentも可 */
		position: absolute;
		top: 0px;
		width: 350px;
		height: 58px;
		padding: 0px;
	}




使ってる画像群･･･



＜  ＞

20110605 0729

CSS Tips －ひまわり動画でのCSSカスタマイズの流れ－今までナンで放置ぷれい!?･･･

･･･いやぁ、ココから列挙すべきでしたよね(^_^;)


まずは、大まかな手順は、

・CSSのカスタマイズを開始する。

　　▼

・記述後の動作確認作業を行って、デザインを決める。

　　▼

・確定保存。
と云う流れnanoだケド･･･



細かく文章化するのがﾒﾄﾞｲさんnanoで、画像を並べて対応して診た(ﾏﾃｺﾗ



まずは 暇へログインしてあるとして、[Myページ]を選択･･･



　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　▼

この画面で[CSSカスタマイズ]をクリック･･･



　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　▼

ココ(赤枠内)の入力枠にCSSを記述して下さい･･･



　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　▼

一通り記述を終えたら、動作確認に入ります･･･

ソレは、[保存]ではなく、[Preview]で行います。
他の同様のサイトと異なり 暇の特徴は、この機能の秀逸さにあります、
このボタンを利用するコトで、様々な設定の試行が容易に可能になっています。


　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　▼

設定が確定したら、[保存]ボタンを押して確定して下さい。


保存後は、[Myページ]から[プロフィールの確認]で、出来上がったページを参照できます。



＜  ＞

20110604 1525

CSS Tips －るどてなさんのトコで･･･

･･･思わずTipsヒントだけをポストしてしまったので、責任持って画像も作って検証してみました。

因みに、gifでは 完全に透明のみが透過、pngでは 多色透過が可能。

そもそも #profile_comment_bodyにhoverした時に、別オブジェクトであるbackground-imageを消したいってのは、
現状の暇では、CSSだけで対応するのが無理nanoで、逆説的に、ハナから表示してなければ結構楽じゃない♪ 

ってコトに則って試行してみました･･･　結果は当然大成功♥


http://www.okitsunesama.com/HimaCommu/169272/169272prof00.png
http://www.okitsunesama.com/HimaCommu/169272/169272prof00.gif
http://www.okitsunesama.com/HimaCommu/169272/169272prof_Black20.png
http://www.okitsunesama.com/HimaCommu/169272/169272prof_Blue20.png

http://www.okitsunesama.com/HimaCommu/169272/169272prof.psd (PhotoshopCS)



このように、

>#profile_comment_body
	{
		background-image:url(http://www.okitsunesama.com/HimaCommu/169272/169272prof_Blue20.png); /* ← 単色透過例 */
		/* background-image:url(http://www.okitsunesama.com/HimaCommu/169272/169272prof00.gif); */ /* ← IE系でも無難に透過 */
		background-position: center; /* left top; */
		background-repeat: no-repeat; 
		color: #000000;
	}

#profile_comment_body:hover
	{
		/* background-image:url(http://～); */ /* ← 任意の不透過画像URLを指定 */
		background-color: #ffffff; /* ← 透過処理のキャンセル */
		/* color: #ffffff; */ /* ← 親要素とは別の色を利用したい場合に設定して下さい。 */
	}

#profile_image_img
	{
		display: none; /* ← 既定の主アイコンは非表示に */
	}
各 対象キー内に、それぞれ追加列挙して試行して下さい。



＜  ＞

20110604 0433

暇Tips －あしあとコメントでのBBCodeの列挙－メッセージの接続を便利に･･･

･･･っても、BBCodeでググると判ってしまうのに、あえて列挙する試行w


リンクを配置するだけなら、基本的な書式はコレ ▼

[url=http://～]任意の文字列[/url]




で、おきつねさまが << from ★☆☆ next >>の列挙に使っているテンプレートはコレ ▼

[url=http://himado.in/?mode=profile&user_no=169272#]<< from - [/url] ★☆☆ [url=http://himado.in/?mode=profile&user_no=169272#]Next - >>[/url]


実際使う場合がコレ ▼

[url=http://himado.in/?mode=profile&user_no=169272#20110604010756]<< from - 2011/06/04 01:07:56[/url] ★☆☆ [url=http://himado.in/?mode=profile&user_no=169272#20110604042904]Next - 2011/06/04 04:29:04 >>[/url]


･･･そう、あしあとポストに憑いてる日時から、記号とスペースを省いて、プロフURLへ　#に続けて記述しているだけ。

おきつねさまはフリーのテキストエディタ VxEditorで、記号抜いて貼り付けまでヤルのをマクロ化して利用している。
そのおかげで誤爆が激減したww(ﾏﾃｺﾗ



－－－－－ p.s.

この便利なリンク記述も、あくまでプロフの最初ページに表示されているモノだけが処理の対象となる。
(20110604 0500現在) 該当あしあと 2011/06/04 01:07:56 の ＜StandAloneTalks＞


順を追って説明すると･･･

URLに対する #追記に由る、宣言済みIDへの頭出し表示は、ブラウザでの基本機能nanoDeath。
コレは、"表示されているHTMLの中で、宣言されているIDの部分を先頭に表示しなさい。"
と云う指令に過ぎません。

ソレは、ココの おきつね鯖で展開しているログの様な、ポストが全て列挙された
単純構造のHTMLで記述されているページでなら、間違いなく完全に機能します。

しかし、Mvのように、鯖側でJavaScript使って、DBから一覧を再構成している構造の場合、
そのjsファイルに、該当する対象を、トップに呼び出す機能を付加しておかないと、
表示されるページに、対象のポストが呼び出されているとは限らないのDeath･･･
(ポストが溜まって、Nextページになってしまっている場合が該当)

従って、単的にBBCode使って[url=http://～#YDT]文字列[/url]と、記述しても、
表示ページに対象が呼び出されていない状況の場合は、機能出来ないのDeathよ( ; _ ;


コレばかりは、暇鯖側のJavaScript が改良されでもしない限り、対応出来なかったりします･･･orz
おきつねさまも #記述でのID頭出しの要望出しておきながら、すっかり忘却の彼方デシた、この問題･･･(´ﾍ｀；)

･･･で、おきつねさまは対応策として、旧書式同様に、YDTも追表記するようにしたと云う罠がっっ( ; ﾟДﾟ)



＜ 判らない部分には、マウスカーソルを添えてみよう♪ ＞

20110531 1628

脱線Tips －今更ながら IEが使いモノにならない件･･･

･･･大抵のサイトでは、



>filter: alpha(opacity=20);
-moz-opacity:0.20;
opacity:0.20;


これでIEでも画像の透過処理が出来る風な記述を結構見るが、
アレは、IE6.x/7.x系のみでの話だったりしている。


だが しかし、今 巷の噂を無かったモノとして、僅かな望みを持ちつつ、
その8.xで試行したのだが、コレが見事に全く機能しなかった･･･orz


ついでに試した

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; /* IE8 */
-moz-opacity: 0.2;/* ～Firefox1.5 */
-khtml-opacity: 0.2;/* ～Safari1.1 */
-webkit-opacity: 0.2; /* ～Safari2.x */
opacity: 0.2; /* CSS3 Firefox 1.x～／Opera8.x～／Safari3.x～*/
コレらの記述も悉く潰えた･･･orz



どう云うワケか、8.x系から それらが対象外になっているのだ。

7.x系は、重いはウザいはと悪評高く、6.x系はセキュリティが論外。

ようやく8.x系で多少軽くなり、それなりの保護機能も持ったハズnanoだが、
今度は、処理する為の言語との親和性が壊滅的という罠がっっ( ; ﾟДﾟ)



＜  ＞

20110531 0257

CSS Tips －実働サンプルも診た方が判りやすいかな、カナ？－おきつねさまが･･･

･･･動画とストリームで適用しているモノと、
別途組んだサンプルを、丸々曝してますww


　　・おきつねさまのねどこ(仮)　← うま と ひま のCSSが混在しています♪　ログタイトルで見分けてね♥(←ﾏﾃｺﾗ



Update - 20111215 042101
リンク切れてた(変えたの忘れてたw)ので補正。



＜  ＞

20110530 1722

CSS Tips －必要な時に必要な場所だけ読みやすくする－ :hoverや:forcusの活用･･･

･･･とある利用者さんがprofile_footprintcomment_text:hover{}に対して、
濃ゆ目の透過背景色と枠を適用する手法を展開している。


で、それと合わせて、コチラの手法で、
(当然、適用対象の選択は任意だが) コレらキーに、

#profile_left_box (左側枠全体)
#profile_comment_body (プロフィールコメント枠)

#profile_right_box (右側枠全体)
#profile_footprintcomment_body (入力枠を含む あしあと枠全体)
#profile_footprintcomment_ret (入力枠を含まない あしあと枠全体)
.profile_footprintcomment_comment (あしあとコメント枠のみ)
.profile_footprintcomment_text (あしあとコメント部分のみ)
･･･薄めのタイルを展開しておいて、


#profile_left_box:hover
#profile_comment_body:hover

#profile_right_box:hover
#profile_footprintcomment_body:hover
#profile_footprintcomment_ret:hover
.profile_footprintcomment_comment:hover
.profile_footprintcomment_text:hover
･･･に、濃い目のタイルを処理する様にすれば、ブラウザに依存するコトなく、
且つ 壁紙を阻害せずに任意の場所の文章を読み易く出来ますね。


簡単に例を記述すると、

>#profile_comment_body,
.profile_footprintcomment_text
	{
		/* 透過代替処理 */ 
		background-image: url(http://www.okitsunesama.com/HimaCommu/Templates/ClearBox/Black05.png);
		/* background-position: center; */
		background-repeat: repeat; 
		color: #ffffff; /* (bodyの)壁紙に合わせて、目立たない色を選択して下さい */
	}

#profile_comment_body:hover,
.profile_footprintcomment_text:hover
	{
		/* 透過代替処理 */
		background-image: url(http://www.okitsunesama.com/HimaCommu/Templates/ClearBox/Black70.png);
		/* background-position: center; */
		background-repeat: repeat; 
		color: #ffffff;
		text-shadow: 1px 1px 0px #777777; /* IEでは表示されないので注意!! */
	}
･･･コンなカンジに(^_^;)




＜  ＞

20110530 1720

CSS Tips －過去ログフォロー－背景用透過タイル画像を不透明度で選択可能に･･･

･･･コチラのTips向けのタイル画像が、不透明度20%のモノだけだったので、
まだ黒のみDeathが、不透明度 5%刻みで作成して配置しました。


http://www.okitsunesama.com/HimaCommu/Templates/ClearBox/ 配下に、
Black##.png で格納してあります･･･　##は、05 00から 5刻みで 95まで 半角文字で数値を指定してください。

一応近日ちぅに、8色分は作成の予定してます。
1%刻みにするかは、その後検討したいと考えています。


コチラやコチラの内容と合わせて御利用下さいな。



＜  ＞

20110530 0517

CSS検証報告～･･･

･･･ドンドンドンドンパフパフパフパフ♪


昨日一日の色んな利用者さんのCSSに触れてみて判ったのは、

セミコロン忘れが結構多かったコト･･･(´ﾍ｀；)　アレは、ﾃｷｽﾄｴﾃﾞｨﾀに一寸細工してないと、ﾁｮﾝﾎﾞり易いんDeathよね(^_^;)
･･･あと顕著だったのが、使わない文字列の放置･･･　そう云う状態って ブラウザによっては それ以降を認識しないから、
結構致命的だったりします･･･　内容を無効化するトキは、ちゃんと /* と */ で、囲んで下さいね(^_^)／

あと、レアなモノでは、プロパティ無しで値だけ指定してあるとか、キー自体が無かったりとか･･･( ; ﾟДﾟ)
多分 暇の画面で操作しているのかな、カナ？

今は、フリーでも、そうした用途に向いた、多機能なテキストエディタは多数存在していますので、
色々触れて、お気に入りを捜してみるのも良いと思います。



＜  ＞

20110530 0334

脱線Tips － PPTPとWebDAV･･･

･･･WebDAVとは、暗号化の遅れたFTPの代わりに、Webアクセスに利用されているHTTPを
暗号化通信の下でデータ転送を行える様、拡張されて登場したプロトコル。
呼称は、Web-based Distributed Authoring and Versioning の略。
但しコレは、FTPのような単純な転送ではなく、ブラウザで直接ダウンロードしたりは勿論のコト、
Windowsのエクスプローラのようなファイラで、直接、対象の鯖のフォルダの内容を、
与えられた権限の範囲で自由に操作できる優れモノだ。･･･ココまで書くと判ると思うケド、
鯖のOS自体にユーザーとして適切に登録してある必要がある･･･
って、IDとPassをﾛｰｶﾙで設定して終わりだけどw

対してPPTPとは、隔地の拠点同士を、安価な広域ネットワークであるインターネットを介在させ、
それぞれを繋ぐ為のルーティングを行うプロトコルの一つで、正式名は Point-to-Point Tunneling Protocol
この登場に因り、専用線を要していた企業の本支店間通信のコストは劇的に下がった。
昨今では、市販のルータにも この機能が付いているモノが増えてきた。


･･･正直コレらを使い始めた当時は、ｲﾛｲﾛ調べて略称の内容まで覚えていたけれど、
サスガに もう忘却の彼方だったから、Wiredのリファレンスを利用した。

機能に関しては調べるまでも無く理解しているので
アバウトなモノで良ければ、かなり列挙しやすいケドw(^_^;)


PPTPを用いたルーティングによるWideAreaNetwork経由のClosedNetworkは、
接続されたユーザや拠点も、その鯖のActiveDirectory配下で、ケロちゃんを用いた
高度な暗号化認証を経て接続を承認された後、WebDAVを遥かに超える暗号化処理下で、
拠点／ユーザ同士の通信が確立される。

従って、接続に要する情報の漏洩等が無い限り、他者の介在は ほぼ不可能と云える。
端末に対してMACアドレス基で固定のIPを割り振る(機器認証)･･･
ツマり、鯖－鯖接続と同義な処理を外部一般端末に適用するコトも可能だ。

WebDAV接続の許可自体は、ネットワークとドメインさえ有効な環境があれば、
Windowsでは、容易に可能になっている。(XPは元より、2kでも出来た)
利用に関しては、真にWebアクセスそのものの手軽さだ。

対してPPTPは、ユーザー登録の他に、権限を厳密に設定する必要がある。
･･･まぁ安全度返しなら、細かいコトしなくても動くケドw

接続のキホンは、鯖－鯖nanoだが、おきつねさまのように、
他の所有機による外部からの接続や、他者の端末を接続する為にも利用できる。

コレらも設定自体は 全てGUIで可能nanoだが、当時は完全な形でTipsされているサイトは少なかった。
nanoでオトし処を見つけるまで結構掛かったし(´ﾍ｀；)

って、結局今となっては 何れも掌握済みnanoで とっとと設定済ませば良いのだか、
コレが困ったコトに、最初の試行時には ほぼ正常な接続環境下であった為、
速度に難がありつつも通信自体は出来ていた。ソレは、WebDAVもPPTPも同様だった。

その後、ISPを変えた辺りから雲行きが怪しくなった。
結局、鯖機本体を若干更新し、システムもイチから適用し直して･･･
ネットワークの接続に問題を抱えたまま、PPTPの試行を行い、成功するも、
後に接続を在るべきカタチへ変更したが為に、今度はPPTPもWebDAVも機能しなくなったと云う罠がっ･･･orz

でも、何れの機能も あくまで試行で、それらが外部から利用されるコトも
ほぼ皆無だった為、今迄放置されて来たと云う･･･(´ﾍ｀；)

しかし、設定の試行を行える環境(複数の固定IP)が無く、外部からの接続協力者ナシでは、
全く手の施しようがないのが現状だったりして･･･OTZ



＜  ＞

20110529 2109

CSS Tips －文字背景の単色透過－ IE8.x以前にも対応出来るイレギュラーTips･･･

･･･とある利用者さん達の協力に因り、IEの困った挙動に対する策を見出すに至った。

そもそも IEでは、8.x系ですら、CSS3をサポートしていない。
因ってCSSの記述だけでは、rgba Opacity など αチャンネルによる透過を利用するコトが叶わない。

とは云え、ソレを諦めるのは聊か おきつねさま的では無い･･･　それらの簡単な解決策のシリーズの最初のChapt.として、
今回、この混沌の欠片(Tips)を再構成して、言語化ならぬ 文章化しようと思う。


まず最初に禁則事項を述べておこう。　･･･透過画像を配置しようとしているフレームには、

background-color: #FFFFFF; 絶対に この指定をしてはならない。
透過png/gif画像でさえも、結果として不透過画像になってしまうからだ。


それを踏まえた上で、本題の記述は･･･　かなり古典的な手法ではある(-_-;


ヤるコトと云えば、対象オブジェクトのキーへ

>/* 透過代替処理 */
background-image: url(http://www.okitsunesama.com/HimaCommu/Templates/ClearBox/Black20.png);
/* background-position: center; */
background-repeat: repeat; 
color: #ffffff;
text-shadow: 1px 1px 0px #777777;

と、追記するだけnanoだよ。


コレでIEでも "透過した黒" を背景に適用できるようになる。
因みに 上述の Black20.png は、黒の不透明度20%のタイル用透過png画像。


ただ、この方法にも、IEで１点だけ問題がある。
そもそも文字に影を付ける text-shadow も CSS3･･･　記述していても無視されて表示されないのだ。
･･･コチラの対策としては、背景に埋もれないような文字色の選択が 鍵かと思われる。
従って、文字本体色を明るめにし、Shadowを暗めにしておく必要がある。

そうでないと、IEで表示した際に文字が全く読めなくなるので 気を付け給え。


この処理を適用し、border-radiusを使用すると、Firefox2.x.x系で、角丸の外側へ、画像がはみ出でる･･･
但し、Firefox系は、最新版への移行率が圧倒的に高いので、考慮する必要は無い。

だが、IE6.x系以前では、透過しない可能性すらあり、予断を許さない･･･(←未確認)



p.s. －－－－－

･･･どうやら使える背景タイルが 少し増えたようだ、コッチも診てみるといいだろう。



＜ 一寸ﾛﾘﾛﾘ探偵風 ＞

20110526 0332

CSS Tips － TextBoxのスクロールバー－縦･横何れかのみを表示する･･･

･･･マイナーなブラウザでの表示を諦められるのなら、

縦スクロールバーだけ表示したい場合は、

overflow-y: scroll;
･･･対象宣言中に、こんな記述を追加するだけで対応可能。

で、横の場合は、

overflow-x: scroll;
･･･こんなカンジw


主要なブラウザでは支障ナイとは思うケド･･･(´ﾍ｀；)



p.s.
lolifox 0.3.6 ／ Firefox 3.6.16
IE 8.0.6001.18702 ／ Chrome
では、何れも支障なく動作しました。



＜  ＞

20110525 1936

CSS Tips －フォントに影を付ける－指定次第で縁取りにも･･･

背景に画像を設置しても、文字は読み易くしたいモノDeathよね(^_^;)
でも、適用した画の 色味やバランスに由っては、どの様な文字色を指定してもウマく逝かない事が多いのも事実w


背景濃ゆ目と仮定し･･･

･･･単純に文字の右下位置に白い影を付けたい場合は、

text-shadow: 1px 1px 0px #ffffff;
ぼかし無しで 1px右下へずらした指定を適用してみる。

影ではなく 文字全体を縁取りたい場合は、一寸ソレとしては緩いのDeathが、

text-shadow: 0px 0px 2px #ffffff;
こう云う記述も、背景画像次第では使えるカモ。


書式に関して解説並べてみると、CSS3準拠なら･･･

text-shadow: 横位置px 縦位置px ぼかし距離px ShadowColor
このように記述します。

縦横位置は 影をズラす距離をpxで指定します。
ぼかし距離をpxで指定すると、影の中心位置から ShadowColorを基にグラデーションします。


また、ブラウザで拡張が成されている場合は このように、

text-shadow: 横位置px 縦位置px ぼかしpx ShadowColor, 横位置px 縦位置px ぼかしpx ShadowColor;
カンマ区切りで複数指定も可能とか･･･


ただ、ブラウザ依存が過ぎるのは オススメ出来ないので、
おきつねさま仕様の様な、文字色が明るく背景が濃い単色の場合は、

text-shadow: 1px 1px 0px #000000; と云う、簡単なShadowで対応しても、それなりに読みやすくなります。


色指定は他と同様、rgba指定で透過色指定も可能Deathから、
応用次第で、実用／装飾 何れの向きでも活用出来ると考えます。



＜  ＞

20110509 2122

暇Tips － CSSに直接関係無いシリーズ･･･

･･･ついでに おきつね鯖を利用されていない向きにも無関係だったり(^_^;)


で、本題w

画像の変更に伴うやり取りって、暇のメッセージで可能だったコトを
おきつねさまは 完全に忘れていました( ; ﾟДﾟ)

とある利用者さんのおかげで思い出しました(爆)

云うて、おきつねさまも以前、とある主さんに画像を送ったコトがあったのDeathが、
受け取ったコトは無かったので･･･orz


nanoで、プロフィール装飾画像を追加したい場合は、
メッセージに対象を添付して貰えたら、差し替え出来ます。

追加後には、各利用者さんの領域ページにテストURLを追記しますので、
ソレを作業完了の合図として利用して貰うと良いカモ。

･･･今の処 あくまで手作業nanoで、即応出来ないトキがあるとは思いますが(´ﾍ｀；)



＜  ＞

20110508 0519

CSS Tips － FireFoxの既定フォントをIEで･･･

･･･実現してみよう!!


暇のプロフ参照すると、FireFox系なら、アルファベットは 細いゴシック文字が適用されるが、
IEだとserif(明朝的な文字)になってしまう･･･　複数ブラウザ使わないFireFox利用者さんで、
プロフの装飾処理してない向きは、結構この状況を知らないカモだと思う。

ソレを完全にFireFox寄りの見た目に統一してしまおうと云うワケだったり。
･･･って、ヤるコトは結構シンプル。

bodyの宣言内に、

font-family: "ＭＳ Ｐゴシック","ＭＳ ゴシック","MS UI Gothic";
を、

の、ように

body
	{
		/* 他の定義 background-color: #1e50a2; */
		/* 他の定義 color: #ccccff; */
		font-family: "ＭＳ Ｐゴシック","ＭＳ ゴシック","MS UI Gothic";
	}

追記するだけ。
･･･って コレは、Macを一切無視した指定Death♪(ﾏﾃｺﾗ


正しくは、

font-family: "ＭＳ Ｐゴシック","中ゴシック",monospace;
と、して下さいね。


あと、全てのフォントを変更されている向きには、余り意味がナイDeath(^_^;)



＜ 紛らわしい紹介の仕方をしてみる ＞

20110508 0114

CSS Tips －ココを使って最初のステップ･･･

･･･初めは要るトコロだけ掻い摘んで、少しずつ利用するほうが、習熟しやすいかと。

逆に、一通り読んでおいて、なんとなくうろ覚えってのもアリDeath。
脳内に簡単なﾘﾌｧﾚﾝｽが しっかり構成されるので、CSSを使いﾌﾞﾗｳｻﾞにナニをさせられるのか、
イザ欲しい時に、"あんな処理があった" と思い出す助けになると思います。


他の利用者さんのSourceを読むのも参考になります。
気に入った処理を利用している利用者さんのページを開いて、画面上の空きスペースで[右クリック]、
[ページのソースを表示](←Firefox系の場合)と云う操作だけで、簡単にその内容を確認出来ます。


その操作で表示されているモノの、

</script><script src='http://mov.shipweb.jp/jslb_ajax.js' charset='utf-8'></script><style type="text/css">
と、云う記述以降から、

<!-- ここからプロフィールページ //-->
の、直前までが、[CSS]の内容が展開される範囲になります。

･･･因みに、ﾌﾞﾗｳｻﾞ別で仕様と挙動が異なるﾌﾟﾛﾊﾟﾃｨもありますから、対象の詳細な書式は、しっかり覚えても余り意味がありません。
むしろ最初にココや Wiredのﾘﾌｧﾚﾝｽを利用し、自身向けのﾃﾝﾌﾟﾚｰﾄを用意すると便利Deathよ。


また、


sendRequest(onFriendloaded,d,'POST','http://himast.in/index.php');
}
から

</script>
･･･の間マデが、[内容書き換え]が展開されている範囲となります。


HTMLは キホン 上から処理されます([内容書き換え]の記述も同様)。
その位置で[内容書き換え]が処理されるコトを認識した上で[CSS]と[内容書き換え]を扱う必要があります。
＜  ＞

20110424 1946

CSS Tips －メモを残したいトキには･･･

･･･結構、入力済み項目を無効にしたり、メモしたりしたくなるトキがあるモノDeath。


その為には、ブラウザ側に "無かったコト" にして貰う必要がありますw
そうした場合は、このように･･･

/* #Test_ID
	{
		Property: Parameter;
	}*/

/* テスト用クラス */
.Test_class
	{
		Property_a: Parameter;
		Property_b: Parameter;
		/* Property_b: Parameter; */
	}
･･･ /*  */ で、対象を囲むコトで、CSSにメモを入力したり、
使わなくなった項目を(控えとして)削除するコトなく無効にしたり出来ます。

因みに、上記の様に表示されるテキストエディタもありますが、フツーは色分けされないDeath。
とあるVxEditor等では、適宜設定すると出来なくはナイDeathが･･･(^_^;)
＜  ＞

20110419 0036

CSS Tips －水平配置(垂直位置)を整える－そにょ2･･･

･･･またやってもうた仕様か(´ﾍ｀；)

ブラウザ毎に挙動が変わってしまっては、標準規約として機能しない希ｶﾞｽ･･･

取り敢えず、解決は以下の様に、

#profile_footprintcomment_form_textarea
	{
		width: 610px;
		height: 300px;
		background-color: #ddddfd;
		color: #003055;
		overflow-y: scroll;
		/* overflow: scroll; */
		vertical-align: top; /* -148px; Chorome */
		/* vertical-align: 141px; FireFox 2.x 3.x */

	}

#profile_footprintcomment_form_submit
	{
		width: 34px;
		height: 305px;
		padding-left: 1px;
		vertical-align: top; /* FireFoxでは不要 */
	}
記述するコトで回避しました･･･

でもコレだと、肝心のFireFox系で、ボタンが1pxだけ上に表示されるので
使いたくなかったのDeathよ、定数での指定って･･･(´ﾍ｀；)

･･･おきつねブログでなら放置するド外道な おきつねさまDeathが、
暇で不具合があるのは問題nanoで、今回は取り敢えず お嬢(IE)での動作確認もしました。



＜  ＞

20110418 2140

WallPaper Tips －画像ファイルをドコに置こう･･･

･･･と、考える方も多い様nanoで、一般的に使い易いトコを紹介してみる。


Microsoft WindowsLive SkyDrive
Google Picasa


両方アカ持ってるケド、
前者は昔は他のメールサービスでも利用できたのだが、今は もしかしたらHotmailへの囲い込みの可能性も･･･
おきつねさまは、囲い込み前に ググるアドレスで.NetPassportのアカ(無償)も取得していたので、
移行済ませて手間なく使えた。

後者はアカ登録(無償)すると、使いたければGmailアカ(無償)も取得できる。

総じて容量考えたら、ググるnanoだろうが、鯖enc的な動作した記憶も･･･
単純に画像を置いておき、呼び出すだけに特化するのなら、MSも捨て難い。

何れも、今現在の 版権モノの扱いは不明、昔は放置状態だったww



＜  ＞

20110418 1735

Font Tips －大きなサイズのフォント利用時に有効(カモ)･･･

･･･ゴシックを利用するのがセオリーな風潮の在るWeb上の文字。
小さなptサイズでは、ゴシックの見易さは確かなモノnanoかもしれないが、
もし大きなpt指定するのなら、折角なので、明朝体でも良いのではナイだろうか？

で、機種依存しないで済む設定のサンプルとして

/* 明朝体 */
font-family: ＭＳ 明朝, Osaka-等幅, serif;

　　　　　　　や、


/* プロポーショナル明朝 */
font-family: ＭＳ Ｐ明朝, 平成明朝, serif;
と云う具合のモノがあるのだが、試してみるのも面白いかと。



＜  ＞

20110418 1113

CSS Tips －大失態･･･orz －僅かに改良してみる･･･

･･･コミュニケーションBOXのレイアウト。


[メッセージ送信]と[お気に入りに追加／お気に入りに戻す／お気に入りから外す]操作を
間違えて、大失態しでかしてしまった･･･orz

nanoで おきつねさまのトコでは、間隔を空けて対処してみた。


こんなに簡単にw

#profile_communication_message
	{
		margin-bottom: 30px;
		font-size: 200%;
	}

#profile_communication_friend
	{
		font-size: 85%;
	}

#profile_communication_block
	{
		font-size: 78%;
	}


ボーっとしてる時に あの辺りに触れたら、エラいコトになるなぁ(´ﾍ｀；)



＜  ＞

20110417 2119

CSS Tips －記述のキホン－追記事項Death♥･･･

･･･初心者向けとか云っておきながら、タイヘンなコトを列挙し忘れていたので、触れておこうと思う。


ソレは、IDやclassの宣言について･･･


因みに おきつねさまは、多くの本文中、

.class_key /* ← ココを"キー"と、 */
	{
		width: 100px; /* ← コチラを "プロパティ" と･･･ */
	} 
･･･それぞれ記述し、表している。

そして その大半は、重複記述しても大きく支障はナイ(とても推奨は出来ないケド)のだか、
実際に重複記述がある場合は、

.class_key /* ←コチラは無視(上書き)される */
	{
		width: 100px;
	}

.class_Key /* ←コチラが優先される */
	{
		width: 300px;
	} の、様に、後述のモノ程 優先され･･･

･･･と、云うか、▼の、ように、

.class_key 
	{
		height: auto; /* 影響を受けない */
		width: 100px; /* ←コチラは無視(上書き)される */
	}

.class_Key 
	{
		width: 300px; /* ←コチラが優先される */
		vertical-align:141px; /* 影響を受けずに適用される */
	} 
重複するプロパティのみが、影響を受ける。

また、最終的には、呼び出し元のHTML側に記述されているモノが、最優先として扱われる･･･

ツマり 暇は、運営者がユーザーに対してカスタム許容とするキーを、全て外部CSSファイルから取得させておき、
DB保存されているユーザー毎のカスタムCSS記述をJScriptに依ってHTML上に展開して最優先化するコトで、
任意な見た目を獲得出来るよう、基本に忠実 且つ柔軟な運用が可能な様、極めて良く工夫されているサイトだと云える。


nanoで、おきつねTipsにあるようなヒントを活用する場合、既に宣言されているキーであれば、
掲載されているプロパティ({}で囲まれている範囲の行)のみを複製貼り付けして利用するコトが、
CSSのカスタマイズに於ける、基本的考証手段だと云えるだろう。


にも関わらず、コレまでのTipsでは、その大半で、説明に必要なキーの記述を全て表記してしまっていた･･･
ソレが単なるヒントのつもりであったとしても、こうした"理解済みの視点"でのみ列挙してしまっていては、
要らぬ語弊を生んでしまい、コレから楽しもうと云う利用者さんには、余計な手間を強いてしまう結果に･･･orz

誰にでも判り易い説明 と云うのは、須らく難しいと思い知った おきつねさまだったりする･･･(´ﾍ｀；)



＜  ＞

20110417 0035

CSS Tips －水平配置(垂直位置)を整える･･･

･･･[投稿]ボタンの高さを、入力TextBoxの高さに合わせ、綺麗に並べてみる。


ってのを、おきつねさまのトコでやってみた。

取り敢えず、ソレを曝してみる･･･

#profile_footprintcomment_form_submit
	{
		width: 36px;
		height: 304px; /* ボタンの高さ */
	}

#profile_footprintcomment_form_textarea
	{
		width: 610px;
		height: 300px;
		background-color: #ddddfd;
		color: #003055;
		overflow-y: scroll;
		/* overflow: scroll; */
		vertical-align: 141px; /* 微調整した、並ぶオブジェクトの中心高 */
	}
って、このままでは判り辛いカモnanoで、ツボの部分だけ取り出してみる。

#profile_footprintcomment_form_submit(ボタン)　に　heightを　枠の高さ+4 で 304px としてある。
コレだけやっても、枠側の定義基で、ボタンは枠に並んではくれない。

nanoで、#profile_footprintcomment_form_textarea(入力tb)　に　vertical-align　を指定する。
但し、ココでサンプル対象高の半分である筈の150pxを指定すると、ズレてしまう･･･
で、少しずつ調節し、 141px と云う値を得た。

こうした値指定で直接、並ぶ文字列やフォームオブジェクトの配置位置を微調節できます。

画像の配置などでも、同様な指定方法が有効になるフレームは結構あります。
対象が利用されるオブジェクトに どのようなプロパティがあり、どのような指定方法が有効nanoかは、
ネットワーク上のリファレンスに詳しくあるので、ソレが全く予想も付かないようなモノであれば、
参照して参考にするコトをオススメします。

って、大体在りがちなプロパティしかナイから、
覚えているモノをテキトーに列挙しただけでも動いたりしますケドねww


･･･!! でも、ココにポストしているのは、
ちゃんと動作確認を済ませたモノだけナンだからねっっΣ( >_<；≡；>_<)
FireFoxならココまでの記述で任意の動作をするのDeathが、
他のブラウザは確認してませんデシたm(_ _)m


くろむたんでヘンだと云う報告を受けて、改めて検証した結果、
Webkit系 vertical-alignへのpx指定では、全く逆の挙動を示してしまっていました。

で、オトし処を診つけてみました、コチラへどうぞ･･･



＜  ＞

20110414 0636

ひまわりろぐ on OkitsuneServerを･･･

･･･ココのログにするコトに

おきつねさまのひまわりろぐ on OkitsuneServer

Tips以外のログは移動させました。



＜  ＞

20110414 0419

ColorCode Tips － #RRGGBB(16進数)書式の落とし穴･･･

･･･って、散々オススメしておきながら問題を伏せていたりして、なんだか東京電力みたいwwΨ(｀∀´)Ψ

16進数関連解説を読んで、感のイイ向きなら もう気付いていると思う。
まぁ、ソレはいつも通り華麗にスルーしてw


#ffffff － 1つの原色の諧調は0を含めて256段階、３乗すると扱える色数は判る･･･ と わざと遠回りしてみる ←外道

1つの原色が消費するビット数は8、三色分で24bit･･･　そう、32bitTrueColorを表現するのに足りてないのだよ(^_^;)


ま、24bit以上の色を使いたい場合は、　 rgba(255,255,255,1) と云う書式を必要とする･･･
(← 不透明の白)

と云っても、原色単体の分解能自体をビット数増で上げた訳ではナイ。
それは、上述書式サンプルの最大指定値を診れば理解できる通り 255=ff、8bitなのだ。

鍵は最後に付いている 1 と云う数字･･･　コレはα値と呼ばれ、透過率を表す。
どのくらいの透明度なのかを 0～1の範囲で･･･って、判り辛いか(^_^;)


0　0.1　0.2　～　0.8　0.9　1 と云う値を使い･･･　　 rgba(128,128,128,0.5) な、感じで指定する。

未対応なブラウザでは通常のrgb()指定と同義として扱われ、透過率指定は無視される。

24bit以上の分解能で色指定する場合、16進数書式は残念ながら今のところ使えないと云う仕様だそうな･･･( ; _ ; )
って、グラフィックボードの更なる高性能化で、近い将来なら 36bit(12bit×3 #fffffffff)とか
64bitColor(20bit×3 + 4[16諧調の透明度] #fffffffffffffff,f)とか云い出して復活して欲しいモノだ･･･(ｵｲｵｲ

因みに、現行の市販(LCD)モニタで、有効な分解能は高価なモノでも10bit(単色)･･･先は長い(´ﾍ｀；)



＜ ココは元々ラベル枠の予定だった ＞

20110414 0349

HTML Tips －便利なリファレンスサイト－しかしHTML5は使い物になるのか!?･･･

･･･って、煽っておきながら、気になっているのはMS勢が優遇されたようなダグ構成になって、
火狐ほかで対応が遅れているコト･･･ つか、置いてけぼり喰らってる点が多過ぎで懸念･･･(´ﾍ｀；)

MSOfficeで処理されていた機能を飲み込んでいるIEに標準言語を合わせると、
当然便利にはなるが、元々そうした機能を持たない他者はワリを喰うワケnanoDeathよ(´ﾍ｀；)

例えば ルビ(ふりがな)とか、ExcelやWordで使ったコトの在る向きなら、その利便性は論じるまでもナイかと･･･
ﾛﾘ狐遣いな おきつねさまは、対象単語をプレーンなspanタグで囲み、 そのタグ内へ title="" 打って対応している。
ｲﾐﾌな文字列へマウスカーソルを添えれば 読みが表示される･･･　コレならブラウザを問わない(ハズ)。


おきつねさまは 4時代は サイト構成が洗練されている TAG INDEXを、利用していたのだが、
発効(対応ブラウザの出現)から間もない 5に関する記述は少し読み取りづらいと思うので、
その点充実の老舗 HTMLクイックリファレンスの併用も お薦めする。 

FFで 後者を参照すると判るのだが、サンプルで 5のタグが、在るべき形に機能していないコトが良く判る。
でも、CSS上でも、ブラウザ別処理記述が可能nanoで、近いうちに書式解説を曝す予定Death。



＜ FireFox4系ならHTML5のタグもイケるのか？ ＞

20110413 0650

Color Tips －世の中には色んな･･･

･･･色があるモノDeathなぁ(´ﾍ｀；)


と、思わせてくれるサイト 原色大辞典 ･･･色見本から、気になった色をクリックするだけで多岐に亘るカラーコードを取得できます。



あしあとには記述してたので、ココにも在ると思い込んでたシリーズw(^_^;)



＜ 既存のモノを利用して慣れるのもまたﾈ申の一手 ＞

20110413 0249

CSS Tips － IDやclassって･･･

･･･HTML制作管理者であれば、自由に宣言(簡単な名前付けルールには従う必要あり)して利用できる。
しかし暇のように出来上がっているHTML上での、ユーザー側からのｱﾀｯﾁではキホン有効にはならない･･･

って、ツマり、勝手なIDやclass(以降 キー)を宣言しても、利用出来ない場合があると云うコト。
ま、無闇に その様なコトをする向きもナイだろうと思うのだが、全く他のサイトの
HTML記述を参考にした場合は、得てしてヤってしまいかねない失敗であるのも事実nanoだよ。

因みに、単的にHTML上の内容を複製してきても 固有のキーが利用されている場合は、
暇では機能しない、暇のCSSには、ドコにも それが定義されていない為だ。
(偶然の一致の可能性はあるが、中身は任意のモノではナイだろう)

しかしコレが 全く不可能かと云えば 然にあらず、暇でも、プロフ画面に限って云えば キーの定義(だけ)は出来る･･･
と、云うか、他サイトからの 外部CSSの内容を引用するコト自体は極めて簡単nanoで参考までに述べておこうと思う。

まずは、参考にしたいサイトのソースをブラウザで開き<head></head>ダグ間にあるであろう･･･

<link rel="stylesheet" type="text/css" href="http://～/スタイルシートファイル名.css">
･･･を、見つけて、その対象URLを ブラウザで直接開くだけで、CSSファイルの中身は丸曝しになるw
(ページ(サイトHTML本体)に直書きされているモノもある、同一キーなら呼び出したCSSファイルより そちらが優先されるので要留意)

ソレに含まれる対象となるキー宣言部分をコピって、暇CSSに書き足してしまえば移植は完了だ。
基本的な記述のモノであれは、ソレをヤったからといって障害が起こるような事にもならない。
が、ソレをヤるイミが どのくらいあるのかは、少し疑問カモ･･･(´ﾍ｀；)

そもそも簡単な見た目変更程度の作業では利用可能な場所はナイと思うw

ナニせ、コメント内で利用しようと考え、通常のタグ記述を 単純に あしあとコメントで引用しても、
ただの文字列として扱われる為、定義した対象を機能させる術がナイのだよ･･･(-_-;

まぁそのおかげで、通常のログシステムに比べて、タグ系文字を気にせず文章に利用できると云う、
暇のコメントポストの構造と云うのは、利用者がシンプルに使用出来る点で、非常に良く出来ていると思う。


ツマり、CSSの利用方法の参考程度になら、他のサイトのCSSを参照してみるのもアりだとは思う、
しかしHTML部分は、暇での利用の場合には余り参考にならないと考えたほうが良いカモ。

まぁ、向学ってイミでなら、至極価値が在る とは云えるケド(^_^;)



p.s. －－－－－

但し、暇内でも、DIVブロック　 [div=任意のID]～内容～[/div] を利用する場合には上述の限りでは無く、
定義したIDを、利用するコトが可能と思われる。




＜  ＞

20110412 2155

ひま Tips －自己紹介欄の謎･･･

･･･って云うと ドコぞのﾛﾘﾛﾘ探偵的だがw


[登録情報の編集]-[自己紹介]を入力して、変更確定した後に、プロフ覗くと その現象が起こっているのだよ(´ﾍ｀；)
･･･もう お気付きの向きが大半だろうが、スルーして説明するとw

自己紹介のメッセージで、入れた筈の改行が無視される時があるのだ。

ソレは おきつねさまのココのように、手抜きをしたサイト構成だと全く起こらないのだが、
丁寧に造り込まれていれば いるサイト程、よく発生するのだ。

そりゃそうだよ、マトモなサイトデペロッパなら、<pre>タグなんて絶対使わないから(爆)
アレはﾄﾞｲﾋｰな無精向けのアイテムと云われているしねw


nanoで、おきつねさまは 暇の自己紹介枠入力で任意に改行する場合、<br />タグを意図的に導入している。
空白行は改行認識してくれるみたいnanoで、それ以外の行末に添える。


HTMLって、便利nanoか不便nanoか、トキドキ考えさせられる場合がある(´ﾍ｀；)



＜ おきつねさまはpreタグまんせ～♪ ＞

20110412 0203

Win Tips －画像の取得そにょ2･･･

･･･そにょ1で扱ったRaptureだと、ウインドウをキャプチャするには少し面倒だったりする。

むしろ その場合は、セオリー通りに {Alt}+{PrintScreen} 操作で取得し、
MSPaintなどに貼り付けたほうが楽でしょう。

デスクトップ全体なら、{PrintScreen}を押すだけで取得出来る訳だしw(^_^;)


あと、結構蔑ろにされているMSPaintだけど、
bmpファイルを PNGファイルに変換する能力は、意外に髄一だったりする。
多諧調な写真的画像では、パレットデータが膨大になり、かえって逆効果nanoDeathが、
アニメ的画像なら、圧倒的にファイルサイズを、色を堅持したまま圧縮できる。

Photoshop等で、gif出力を使って透過と高圧縮を狙うにしても、ぢつはロストする色情報が かなり多くなる。
それを、png出力を選択するだけで、そうした要求を満たすファイルを作成出来たりする。

画像によっては gif より png のほうが、保存とネットワークでの配布／表示利用で優れていたりで･･･(´ﾍ｀；)



＜  ＞

20110412 0114

Tool Tips －画像の･･･

･･･取得や、画面内サイズ測定に使える、フリーのツールを紹介。
って、コレぞ真に、他人のふんどしで相撲を取るって感じ炸裂Deathが･･･ (ソレ云うと、ココの存在自体が･･･orz)

画面の 任意の範囲をキャプチャ出来る T.Kaneyasu氏発行の  ･･･

コレの [設定]-[領域選択中に座標を表示する] を、有効にしておくと、
"サイトのココ、何pxあるのかなぁ？"的な時に、画面上のメジャーとして使えて便利w

このツール、使用用途は無限大、HelpファイルやWebページ制作時にも、大活躍します。
(その割りにココの解説画像が ちっともうpされないのは･･･ 禁則事項Death♥)



＜  ＞

20110412 0025

CSS Tips － IDとclassを･･･

･･･取得してナンボってコトで、過去にも話題にしたFireFoxのWeb解析アドオン


FireBug  のリンクを晒してみます。


このアドオンは、Firefoxに適用されると、HTMLの解析エンジンとして機能します。
利用方法も簡単で、表示しているページの気になる処で[右クリック]、
[Firebugで要素を調査]を選択すると、HTMLの気になっている場所が、表示されます。

近辺をマウスカーソルでhoverさせると、上部ブラウザ画面が色分け表示されます。


っても、時間ナイとか、イチイチ調べるのﾒﾄﾞｲさん と云う向きなら、おきつねさまが調べてココにうpしますw



＜  ＞

20110411 2303

CSS Tips －とあるNext/PrevのID･･･

･･･とか、晒してみたりw(^_^;)


/* あしあとコメントの Next/Prev 文字のID */
#profile_footprintcomment_navi
	{
		height: 70px; /* フレームの高さ */
		font-size: 200%; /* フォントの大きさ */
		line-height: 250%; /* 行の高さ */
		vertical-align: middle; /* 行内における文字の垂直位置 */
	}


/* メイトさん一覧の Next/Prev 文字のID */
#profile_friend_navi_prev
	{
		font-size: 300%; /* フォントの大きさ */
		line-height: 300%; /* 行の高さ */
		vertical-align: middle; /* 行内における文字の垂直位置 */
	}


#profile_footprintcomment_navi の height指定は、ハズしてもいいカモ･･･　各位の任意でww
line-heightを変えないのなら、vertical-align: middle; も不要だったり(^_^;)

結構 font-size 変えるだけでも、欲しい結果が得られる可能性はあります。


って、表示できるメイトさん増やせないのが口惜しい･･･(-_-;)
コレばかりは、暇の運営者さん次第nanoで･･･( ; _ ; )



おまけ･･･

[CSSカスタマイズ]画面にある[内容書き換え]枠に、

#profile_footprintcomment_navi:after{ >>}
#profile_friend_navi_prev:after{ >>}
って入力すると、

･･･Next/Prevの右側に、

▲のように、任意の文字を添える事が出来ます。　(ページ表示時のみっぽいケド･･･)

因みに after ってなってるワケDeathから･･･(￣ー￣)ﾆﾔ



おまけ そにょ2･･･

メイトさん一覧の Next/Prev　#profile_friend_navi_prev　に、

margin-right: 20px; /* 枠内右側の余白 */
の１行を追加するコトで、

▼ このように･･･

･･･文字の横方向位置を任意に調節できます。



＜  ＞

20110411 1445

CSS Tips －メイト一覧枠そにょ2･･･

そにょ1で、枠自体は拡大したのだけど、肝心のメイトさんのアイコンは元のサイズのまま･･･
ソレを大きく表示したかったので、ﾁｮｲとヤってみた。

枠の縦横、画像も全て拡大指定すると･･･

.profile_friend_imgblock
	{
		height: 240px /* 下記のアイコン拡大指定利用時に必要となる高さ */
		width: 141px;
	}

.profile_friend_img
	{
		width: 129px;
	}
こうなる･･･　のだケド、もし名称が３行逝っちゃったらOut。


nanoで、枠の高さを(自動)可変にしてみた。

.profile_friend_imgblock
	{
		height: auto; /* 名称が複数行でも大丈夫♪ */
		width: 141px;
	}

.profile_friend_img
	{
		width: 129px;
	}
今この設定使っているので、おきつねさまんトコ診れば、どう云う結果になるか、判るかと(^_^;)



＜  ＞

20110411 1121

CSS Tips －画像サイズ･･･

･･･は、確かに実数指定で拡縮も出来るのだケド、コレをウッカリ操作すると、
縦横比が変わってしまって申し訳ないコトになったりする(´ﾍ｀；)

そう云うのウルサい作家や写真家と付き合いがあったので、そのヘンの扱いにミスがナイか、
過剰に気にするクセが付いてしまっている おきつねさまが居たりする･･･orz
とは云え、そう云う画像加工でﾁｮﾝﾎﾞったコトは一度もナイ。


で、CSSでは、

#ID,
.class
	{
		width: 100%;
		height: 100%;
	} 的に、対象(配置フレーム)比率指定出来ます。
コレらのうち、一方のみを指定すると、
縦横比を維持したまま画像サイズを小さく出来ます。


暇のあしあとコメのユーザーアイコンように、画像幅がHTML側で指定されているサイトでは、こう云う具合に･･･

/* あしあとコメントのユーザーアイコン(の土台) */
.profile_footprintcomment_imgblock
	{
		/* HTMLの既定値を上書き(再定義)する */
		width: 幅px;
	}
		/* 幅 = 指定したい任意のアイコン幅に、線の幅×2(通常2)を加算したpx数値を指定する */

/* あしあとコメントのユーザーアイコン(画像本体) */
/* 前述で指定した値にフィットさせる為 必須 */
.profile_footprintcomment_img
	{
		width: 100%;
	}
･･･その幅を任意に定義し直して、対象画像幅を再フィット(100%指定)するコトで、
画像の縦横比を維持したままアイコンを小さく出来ます。


否々、高さを固定して基準とし、はみ出すモノだけ縮小表示したいのだが？　と、云う向きならば･･･

.profile_footprintcomment_imgblock
	{
		/* HTMLの既定値を上書き(再定義)する */
		height: 92px; /* 任意の高さを指定 */
		width: auto; /* 既定値を破棄させる */
	}

.profile_footprintcomment_img
	{
		height: 100%; /* 枠の高さを基準にさせる */
		width: auto; /* 既定値を破棄させる */
	} ← と、するコトで、対応できそうnanoモノDeathが、
実際ヤると、高さのある対象では任意の結果が得られたモノの、
逆に横幅の広いアイコンは 大きくなり過ぎて、
ドウにも実用に耐えない結果に･･･orz
まぁ、使えなくはナイのDeathが、アイコン向きが縦か横かで、モノ凄い差別感が･･･( ; ﾟДﾟ)


因みに、メイト一覧側のアイコンサイズは、

/* メイト一覧のアイコン */
.profile_friend_img
	{
		width: 任意%;
	}
縁取りしてナイ場合であれば、コレだけで有効Death。



＜  ＞

20110409 0636

ColorCode Tips －色指定･･･

･･･っても、前ログも参照しないと一寸判らないトコあるカモ(^_^;)

おきつねさまは RGB(R, G, B)記述はﾒﾄﾞｲので使わないDeathね。
#RRGGBB形式のほうが慣れてしまうとラクnanoで(^_^;)

コレを例えるなら、TVで音量調節するのに、イチイチdb数値で指定するのか、
ボリュームをチョイと操作しているだけか っつ～くらい、ラクさが違う。

しかし何れの方法も、RGB三原色の出力量を0～255の間で指定する点は同じだったりします。
ただ、扱う数値が、10進数か16進数か、の違いだけ。

0が00で、255がff ってのは、前ログ読むと判ると思います。

で、#に続いて、Redの値を2桁の16進数で表記、そのまま Green、Buleと続けて入力しているに過ぎません。
･･･RGBだのカッコだのカンマだのは入力する必要がナイので、16進の値で慣れるほうが良いと思います。

記述は、文字に対する指定を例に挙げると、

color: #ddddff;
と、いった具合に使います･･･　って、サイトのソースを参照すると、散々目にすると思いますがww
おきつねさまは、イチイチ10進に換算して考えるコトさえ止めてしまいました、逆にﾒﾄﾞｲさんnanoで(爆)

だって、灰色にしたければ RGBともに99を選択すれば良いワケDeathし、
ソコから明るめにしたり暗めにするのは、そんなに難しくないと考えます。
総じて色味に関しては、大体こんな感じ～ って使い方のほうが個性が出て良いと思います。

その様な要領で色指定に慣れていくコトで、程なく任意の色を16進の値でイメージ出来るようになります。
画像を扱うツールでも、同様な指定を行うモノは少なくナイDeathし、親しんでおいて損はナイでしょう。
逆に、16進でイメージしていたモノを10進にしたい場合は、Win添付の電卓を
関数電卓モードに切り替えることで、そうした用途のツールとして利用できます。

って、16to10を脳内変換出来る位になっていれば、在る意味最強nanoでしょうケドね(^_^;)
そんなには難しくナイとは聞くモノの、もう本気ﾒﾄﾞｲさんので考えないコトにしてます。←ダメぎつね



＜ 実際にカラーコードを取得するなら ＞

20110409 0304

Tips －そもそも16進数って･･･

･･･なんぞや？ってコトになる罠～(^_^;)


nanoで、基本のキホンから列挙してみようと思います。


コンピューター(以後、端末)のプロセッサが高集積半導体に移行する創世記のハナシw

演算の単位をドウするか、研究者の間で散々モメました。

人間と同じ10進数で処理するべき とか、16進数(今となってはコレが標準だが･･･)で処理すべき とか、
24bitは最低必要 とか、4bitで充分間に合う とか、それはもう色々とw

で、24bitがドウのってのは、どうやら10進数派が その処理を行うのに必要な回路を設計したら、
そんなカタチになった模様(Bit数うろ覚え)　

対して、4bitってのは、16進数を扱う最小単位として適切なスイッチの数だった。
･･･って、それじゃ判り辛いカモnanoで、更に掻い摘んでみよう♪


そもそも16進数っては、0 からf までの16個の値を

0　1　2　3　4　5　6　7　8　9　a　b　c　d　e　f
と、云うカタチで表記する。

で、まぁ見た目はアルファベットnanoだが、f は15を表す。

16進数nanoで、f に 1を足すと、桁が1つ上がる･･･
ツマり 1つ上の桁の数値に 1加算される と･･･　だから16進数と呼ばれる。

10進数なら9に1足すと10になるのと同じ理屈だ。　って、云うまでもナイ罠･･･orz
nanoで16進数で 10 って記述すると、それは10進に直すと16を表すコトになる。

さて、こんな ある種(ﾅﾆﾅﾆ進数とか云ってる時点で)当たり前の話も、
機械的なスイッチに置き換えてみると コレが結構判り易い。

仮にスイッチが横に並べて4つ置いてあるとしよう･･･　それに対して、"右"から、1 2 4 8 と数字を割り振っておく
これらのスイッチ群で　0(Zero)を表現したいのなら、全てのスイッチを切ればよい。

この状態が真に、0000 nanoだよ。

って、ココまでで意味を理解してしまった向きも多いと思うが、敢えてｽﾙｰして続けよう♪(^_^)

･･･もし数値 7 を表現したい場合は？
さっき指定した4つの数でだけで加算を実行した場合は、1+2+4 = 7となるよね？

故にスイッチは OFF ON ON ON と操作するコトになるのだが、これを上記のように記述した場合は当然 0111 となる。
と、まぁ、この様なカタチでスイッチ群に対し ON/OFFを繰り返すコトで、電卓程度の演算は可能になったと･･･

－－－－－
ホントは、シフトレジスタがドウのとか ストアだ スタックエリアだ フラグだ とか、色々あるのだケド、
ココで利用される内容とは全く関係ナイので割愛w
－－－－－

こうした4bit基準を元にして扱う為、BinaryCodeDecode･･･　通称BCDってのが定義されているのだが、
ぢつはエラく単純な理屈なので、この表現方法に付いても更に触れてみよう。


つかその前に！　スイッチへの割り当てが、ナンで 1と2と4と8 nanoか？ と思われた向きも在るやも知れぬ･･･
それは それぞれの数字を足しあっていくと あっさり理解できる。

全部足せば15になるのだよ。って云うと判るかな、カナ？(￣ー￣)ﾆﾔ

ツマり･･･

　　 8421
　　 ||||
 0 - 0000
 1 - 0001
 2 - 0010
 3 - 0011
 4 - 0100
 5 - 0101
 6 - 0110
 7 - 0111
 8 - 1000
 9 - 1001
10 - 1010
11 - 1011
12 - 1100
13 - 1101
14 - 1110
15 - 1111 ･･･と云う具合に、16進数で表現すべき数が
全て扱える数値群が 1 2 4 8 だったのだよ。

しかしバイナリを2進数で覗くと、最低でも 00000000 と8個のスイッチがセットになっている。

何故か？

因みに各位、何らかの形で、0と1の羅列の表の様なモノを見たコトはナイだろうか？
00000001,00000002 ～ 11111110,11111111 とか、01,02 ～ fe,ff 的な･･･

ホンキ創世記の初期では、電卓レベルの処理で許されたので、4bitでもコト足りたのだが、
その後程なくして、端末には更に多くの機能が要求されていくコトになる･･･

しかし たった4つのスイッチでは、数は表せても、
最低限の文字すら表現できないのだよ、困ったコトに ┐(´_｀)┌

そこで手始めに、4bitを2セットで扱う8bitが、初期の頃の 端末のキホンとして定着した。
ソレを基に登場したのが、8bitComputer(Processor)だったと云えるだろう。

4bitShiftRegistor(4bitPrcesessor)の場合は、処理を２回繰り返し(clock 2回で、1処理とする)て、8bitとして扱った。


･･･で？　8bitになると、ナニが便利になり、どうして文字が扱えるようになるのか？ って？

試しに8個並べたスイッチを

OFF ON OFF OFF OFF OFF OFF OFF ON (01000001)と操作してみる･･･

コレをBCDのルールに従って照らし合わせると、4 と 1 が表現出来たコトになる。
･･･しかし、この時点では まだ数にしか見えない。

が、ココで唐突に！w　コレをASCIIコード(現在正しくはCharacterコードと云うらしい)表と照らし合わせてみよう♪




00

10
20
30
40
50
60
70
80
90

A0
B0
C0
D0
E0
F0


00
NL

DE
SP
０
＠
Ｐ
‘
ｐ




ｰ
ﾀ
ﾐ




01
SH

D1
！
１
A
Q
a
q



。
ｱ
ﾁ
ﾑ




02
SX

D2
”
2
B
R
b
r



｢
ｲ
ﾂ
ﾒ




03
EX

D3
＃
３
C
S
c
s



｣
ｳ
ﾃ
ﾓ




04
ET

D4
$
4
D
T
d
t



,
ｴ
ﾄ
ﾔ




05
EQ

NK
%
5
E
U
e
u



･
ｵ
ﾅ
ﾕ




06
AK

SN
&
6
F
V
f
v



ｦ
ｶ
ﾆ
ﾖ




07
BL

EB
’
7
G
W
g
w



ｧ
ｷ
ﾇ
ﾗ




08
BS

CN
（
8
H
X
h
x



ｨ
ｸ
ﾈ
ﾘ




09
HT

EM
）
9
I
Y
i
y



ｩ
ｹ
ﾉ
ﾙ




0A
LF

SB
*
:
J
Z
j
z



ｪ
ｺ
ﾊ
ﾚ




0B
HM

EC
+
;
K
[
K
}



ｫ
ｻ
ﾋ
ﾛ




0C
CL

→
,
＜
L
\
l
｜



ｬ
ｼ
ﾌ
ﾜ




0D
CR

←
-
=
M
]
m
}



ｭ
ｽ
ﾍ
ﾝ




0E
SO

↑
.
＞
N
^
n
~



ｮ
ｾ
ﾎ
゛




0F
SI

↓
／
？
O
_
o
DL



ｯ
ｿ
ﾏ
゜



この、たった2つの数で、半角アルファベットの　A　を表すコトが出来た筈だ!!(意味無く力説)

スイッチの操作だけで文字を表す為に、端末には　それを認識する為の一覧が内蔵されているのだよ。
ソレをヒトの目にも判る形に表現されているのが、ASCIIコード表と云うワケnanoだよ。



某大手サイトに、"ASCIIコードじゃねぇよ"的 ツッ込み煎れたヤシ居たみたいだけど、

そもそも、
ASCII code　: 情報交換用米国標準コード : American Standard Code for Information Interchange
つ～のなら、コッチが正しいと思うのだがねぇ？(´ﾍ｀；)

そもそも"キャラクターコード"って呼称は結構後発な筈。
昔はBASIC遣いくらいしか使わなかったと思うがなぁ？
CHR関数とか未だに残ってるくらいだし･･･ 紛らわしいんだよMSのヤるコトはさ(￣、￣)ｹｯ

ま、ｶﾀｶﾅ入った時点で "A"SCII と 呼ぶのはムリがあるのやも知れぬが･･･(´ﾍ｀；)


で、さっきの 4 と 1 のような2つの16進数の組み合わせで文字が格納されているアドレスを指定するコトで、
そのアドレスに収まっていた ビットデータ化されている文字(コレをFontと呼んでいる)を、画面に表示させる事が叶うと･･･

－－－－－ memo
でも、そのFontが収まっているアドレスが、国やキャリア毎で微妙に違ったり 重複している為、
文字化けってのが起こったりもするw　その垣根を凡そ取り去ったのが、Webブラヴサだったり、Windowsだったりする。
－－－－－－－－

んで、そのアドレスを表す２桁の値を、プロセッサやヒトが、対象は "数値ではナイ" と認識する為に、
識別符号として　&H(アンパサントエイチ)をくっつけて、&H41って具合に表記するコトが多いね･･･
HexadecimalのH　そのまんまだけどねww

そして、BCDで使う4つのスイッチを2セット使った１単位を、一般に 1byte と呼んでいる。
故に ASCIIArtで使う ANK文字のコトを "1バイト文字"と表現する向きが居るワケnanoだよ。

しかし人間の欲求は留まる事を知らない、"我が国の文字も使いたい"とか宣いだしたのだよ┐(´_｀)┌
漢字／仮名／カタカナ／ハングル･･･など、まぁ挙げていくとキリがナイ！
国家特有文字は、その数が膨大過ぎて、1byteの範疇では とても格納しきれないのだ!!

仕方がナイので更に、1byte拡張して 16進数が4桁並ぶ 2byte(全角)文字が生まれたと･･･

国内でも以前、JIS第一水準／JIS第二水準 とか云われていたのは、最初に取り敢えず作ったら
実用(大口取引先だった行政／金融向け)に全然足りてなくて、更に追加で拡張したのだケド、
それら2つでは、その文字種と配列定義の扱いが違っていたりで･･･　って、やっぱり割愛!! (　> _ < )
(読みか ヘンの画数か の違いナンだけどねw)

まぁ、当時の記憶媒体(ROM/PROM/EEPROM/SRAM)の容量(1Kbitとか4kbitで贅沢な時代)起因で、
文字を大量に納めておくには、大層なコストが掛かったコトも一因だったりするのだよ･･･(´ﾍ｀；)
初期にはHDDなんてモノ無かったしね･･･　MT(磁気記録テープ)とか、の時代だしw
その暫く後の、90年代初頭の一般向け機材の一例を挙げると、40MBのHDD(SASI)が数十万したり、
一寸容量奮発して170MBのHDD(SCSI)なんてコトになると スチールデスクの引き出し大の
バカでかいモノたった１基で、百数十万円した時代だしね～( ; ﾟДﾟ)

－－－－－ memo
未だに、記憶半導体の容量表記にはbitを単位にしている、あれらメーカー陣･･･ 有象無象の通信キャリアも又然り。
一般の方が騙されない様に云っておくと、～bitとか表現されてる数値は、8で割ったら大体byteに置き換え利くよん♪
(ココまで読んできてたら、その理由も判るよね)
利用しているキャリアの通信速度、秒間何byte出ているのかってのを調べると、結構驚愕の事実が判ったりするΨ(｀∀´)Ψ
－－－－－－－－


って･･･

さて、ここまでで 多少なりとも16進数が存在する理由を知る手助けくらいには成ったと思いたい(ﾏﾃｺﾗ
余りに脱線多過ぎで、かえって判り辛かったかな、カナ？･･･(^_^;)


･･･つかコレ、ひまつぶしでヤりたかったネタなんだよね～( ; _ ;)
未確認部分の裏付け済んだら、あっちに曝そw♪



＜  ＞

20110408 0404

CSS Tips －背景画像の指定･･･

･･･って、ツマるトコ壁紙Deathねw
コレは 暇のHelpにもあったので、元々は放置の予定デシたが、
追加で必要になるパラメーターの解説兼ねてうpしてみました。



body
	{
		background-image: url(http://任意の画像アドレス);
		background-repeat: no-repeat;
		background-position: center top;
		background-attachment: fixed;
	}
壁紙置くだけなら、このまんま使えば良いと思う(ﾏﾃｺﾗ


･･･って、色々試したい向きには説明不足過ぎるので、next! ( ^ _ ^)ι



◆ 小さな画像でタイル様に敷き詰めたい場合は、

background-repeat: no-repeat; ←　この　no-repeat　の代わりに
　　repeat(初期値)を指定するか、この行を削除して下さい。
･･･因みに、理由は後述しますが、行削除では任意(既定)の指定にならない場合も有ります。

また、横方向へのみ並べたい場合は　repeat-x
縦向きへのみ並べたい場合は　repeat-y　を、それぞれ指定してください。



◆ (主にno-repeat指定の場合)背景画像の、
　　フレーム(配置対象･･･全体(body)やform、textarea等)に対する表示位置を指定するには･･･
　　って、ナンか仰々しいな(-_-;)　

つまり画像を置きたい枠に対して配する基準点を、

background-position: 全体;

　　　ないし

background-position: 横 縦; と、云う書式で指定する･･･のだケド、
この　全体・横・縦に指定できるのが、
pxだったり %だったり 英単語だったり と
自由度高過ぎで結構判り辛い･･･(^_^;)

で、通常の壁紙指定なら、サンプルの通り、

background-position: center top; で、コト足りると思うのだケド･･･

一寸凝った嗜好の向きには、他の選択肢も有り得るやも知れないので、一応列挙すると、

background-position: right top; /* 画像の右上角がフレーム右上に */
background-position: left bottom; /* 画像の左下角がフレームの左下に */

background-position: 100px 100px; /* 画像の左上角が、フレーム 左から100px 上から100px */
background-position: 50% 50%; /* 画像の中心が、フレーム 左から50% 上から50% */
background-position: 100px 50%; /* 画像の左辺が、フレーム 左から100px、画像の上下中央位置が 上から50% */

で、値指定の省略は、centerと見做される為･･･

background-position: right; /* 画像の右辺がフレーム右に、画像の上下中央位置が 上から50% */
background-position: bottom; /* 画像の下辺がフレームの下に、画像の左右中央位置が 左から50% */
background-position: center; /* 画像の中心点が、フレームの中心点に */

background-position: 100px; /* 画像の左辺がフレームの左から100px、画像の上下中央位置が 上から50% */
background-position: 50%; /* 画像の左右中央位置が 左から50%、画像の上下中央位置が 上から50% */
と、云う具合になる。

何れにしても、%を利用する場合、50% が center と 同義であると認識していれば、
値を指定する際の指標になると思う。
そして、要素が配置されている場所が特殊な状態でない限り、
background-position: 50%; ＝ background-position: center; と考えて良いかと。


ただ、非常に ややっこしいのが、上記に添えてある通り、
位置指定書式(px／%／英単語)に因り、画像の基準点が変わるコト。

pxでの指定や、center以外の英単語での指定は、画像の各辺や角が基準になるのに対し、
center や % での指定だと、画像の中心点が基準になる･･･orz

その上、上下中央位置に関しては、bodyに中身が無く 高さ指定もナイ場合、
centerや50%指定しても、画像の中心点が、上から0pxに配置され、
画像の下半分しか表示されなくなる事態に( ; ﾟДﾟ)
･･･って、極プレーンなHTMLで動作確認したから、bodyに高さ指定なんてしてないし、
CSSに依る背景画像テストnanoで、bodyには何も入ってなかったから起こった現象nanoだケドねww

でも、余程大きな画像でもない限り、

background-position: center center;

　　　や、

background-position: center; って指定は、結構鬼門かも･･･(´ﾍ｀；)

親要素に、悲惨な事態を回避する設定がなされていて、
且つ、大きな画像の真ん中辺りだけを表示したいのなら別だけどねw

って、暇だと、▲ この指定も使えるらしいんだよね･･･( ; ﾟДﾟ)!?
ポスターサイズ的壁紙の、主要と思わしき真ん中辺りが体よく表示されて好都合らしいのだが･･･(´ﾍ｀；)？

･･･確かに、横配置の一般的壁紙データを左／上辺に合わせて表示しても、
欲しいトコロが表示されない可能性はあるから、大きな画像所有なら意外に有効nanoかも･･･
どのような表示結果が欲しいのか？ で、選ぶべき指定は変わるってコトかな、カナ？(^_^;)

と、云うコトは、横位置を中心にし、縦位置は%で任意指定するコトで、

background-position: center 任意%; 一番表示したい部分を適宜表示させるコトが叶うって寸法･･･カモ



◆ 背景画像をコンテンツと一緒にスクロールさせたい場合は、

background-attachment: fixed;
▲ この　fixed　の代わりに　scroll　を、指定するか、この行を削除してください。
但し、親要素からの継承を受け、fixed　が、既定になっているページも存在します。


その場合は、 background-attachment: scroll; と、指定を明記する必要があります。

この仕様は、他の要素やプロパティでも同じような事が有り得ます。
ですが、ソレを踏まえておくだけで、無指定による指定が受諾されない挙動で慌てる事は無くなります。



＜ 思ったより解説要するポイントが多かったシリーズw ＞

20110407 1905

CSS Tips －枠線の扱い･･･

取り敢えず罫線(枠線)の扱いの基本など･･･(^_^;)


で、サンプルとして おきつねさまのトコの あしあとコメント周辺の設定を晒してみるw

.profile_footprintcomment_text
	{
		border-width: 2px;
		border-color: #0000ff;
		border-style: solid none none none;
		margin: 0px 0px 0px 0px;
		padding: 3px 3px 3px 3px;
	}
上部罫(枠)線のみを有効にしてあるのが診てとれるかと･･･


で、枠線絡みは以下の３つ。

border-width: 2px;
border-color: #0000ff;
border-style: solid none none none;



枠で囲む場合は、

border-style: solid;


詳細な指定方法はこんなカンジ･･･

　　　　　　　上　　右　 下　 左
border-style: solid none none none;

　　　ないし

 対象位置: 線の太さ 線の色 線の種類;
border-top: 2px #ffffff solid;
border-right: 2px #ffffff solid;
border-bottom: 2px #ffffff solid;
border-left: 2px #ffffff solid;


線(枠)の種類

none － 線なし(既定値)
solid － 実線
double － 二重の線
groove － 谷型の線
ridge － 山型の線
inset － 凹型の線
outset － 凸型の線
dotted － 点線
dashed － 破線




＜  ＞

20110407 0519

CSS Tips －メイト一覧枠そにょ1･･･

･･･大きなユーザーアイコンの表示に対応する。



.profile_friend_imgblock
	{
		height:175px; /* 通常サイズで、縦長アイコンに対応した高さ */
		width:141px;
	}


.profile_friend_imgblock － 1メイト表示枠(class)


上述の指定で、縦長アイコンと、名称表示２行まで対応出来ます。



＜ そにょ2 ＞

20110405 2200

CSS Tips － margin／paddingの指定書式･･･

･･･は、


　　　　上　右　下　左
margin: 0px 0px 0px 0px; /* 枠外の余白 */
padding: 0px 0px 0px 0px; /* 枠内の余白 */
の、ようになっています。　･･･コレが意外に覚え辛かったりする(^_^;)

この記述は上下左右を纏めて指定するモノnanoで、必要性が無い場合もありますが、
後々補正する場合に便利nanoで、おきつねさまは推奨しています。


但し、既定値を生かして特定の向きにだけ、任意の値を作用させたい場合は、

margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;

padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
これらの何れかを利用する必要があります。



＜  ＞

20110405 2138

CSS Tips －記述の基本･･･

操作したい対象要素が


classだった場合は、名称の先頭にピリオド{.}を、

.要素Class
	{
		プロパティa: 指定値;
		プロパティb: 指定値;
	}


IDの場合はシャープ{#}を付加して記述します。

#要素ID
	{
		プロパティa: 指定値;
		プロパティb: 指定値;
	}


複数の要素に対して同じ指定を行う場合は、

#要素ID_a,
.要素class_a,
#要素ID_b
	{
		プロパティa: 指定値;
		プロパティb: 指定値;
	}
の様に、要素同士を カンマ","で区切って連続指定出来ます。


また、上述の様に改行するのは、ヒトの目視に依る管理を容易にする為でしか無く、
記述ルールに於いては一切必須ではナイので、

#要素ID_a,.要素class_a,#要素ID_b
	{
		プロパティa: 指定値;
		プロパティb: 指定値;
	}
や、

#要素ID_a,.要素class_a,#要素ID_b{プロパティa: 指定値;プロパティb: 指定値;}
と云う記述でも同義Death。



＜  ＞

20110404 2037

CSS Tips －項目の非表示･･･

使っていない機能項目を非表示にする場合。


#profile_mylist_head,
#profile_mylist_body,
#profile_textcomment_body
	{
		display: none;
	}

#profile_mylist_head － マイリストタイトル (ID)
#profile_mylist_body － マイリスト 一覧本体 (ID)
#profile_textcomment_body － テキストコメント 一覧本体 (ID)


おきつねさまのように投稿している動画がない場合、
テキストコメントや動画の一覧は必要ナイので、非表示にしています。



＜  ＞

20110404 2026

CSS Tips －ポスト(コメント)間調節･･･

投稿毎の間隔を任意で指定し、コメ主が文末に空行を煎れて間隔を調整する対応を不要に出来ます。


因みに、おきつねさまのトコでは、このような設定を使っています。

.profile_footprintcomment_imgblock
	{
		margin: 8px 15px 55px 8px;
	}

.profile_footprintcomment_comment
	{
		margin: 0px 0px 45px 0px;
	}


.profile_footprintcomment_imgblock － ユーザーアイコン(class)
.profile_footprintcomment_comment － コメント枠(class)


ユーザーアイコン(土台)のClass{profile_footprintcomment_imgblock} で 

margin: 8px 15px 任意px 8px; marginを扱うと、


アイコン同士(周囲)の間隔を、

この様に、指定出来ます。


更に、コメント枠(TextBox)のClass{profile_footprintcomment_comment} に対し、

margin: 0px 0px 任意px 10px;

　　　ないし

margin-bottom: 任意px; と、指定するコトで、


コメント枠外下から次のコメントへの間隔を、

px(Pixel)単位で任意に調節出来ます。


逆に、▼ このように

･･･枠内下を大きく取りたい場合は、


marginの代わりにpaddingを使い、　　 
padding: 0px 0px 任意px 0px;

　　　ないし

padding-bottom: 任意px;
として下さい･･･

コレは、コメント(枠)に 縁取り線や独立した背景色を指定する場合に有効Death。


コレら微調整に因り、短いメッセージの際に アイコンと次コメント同士が接近し過ぎない様に出来ます。
因みに、margin／paddingへの値の指定書式は、コチラを参照のコト。



＜  ＞

20110404 2025

CSS Tips －入力枠周り･･･

入力枠幅最大化と[投稿]ボタンの幅縮小。


#profile_footprintcomment_form_textarea
	{
 		width: 610px; /* 入力枠 幅 */
		height: 300px; /* 入力枠 高さ */
		background-color: #ddddfd; /* 入力枠 背景色 */
		overflow-y: scroll;
		vertical-align: top;
		margin: 0px;
		padding: 0px;
	}

#profile_footprintcomment_form_submit
	{
		width: 36px; /* [投稿]ボタン 幅 */
		height: 305px; /* [投稿]ボタン 高さ */
		color: #000055; /* [投稿]ボタン枠 文字色 */
		vertical-align: top;
		margin: 1px 0px 0px 0px;
		padding: 0px;
	}


#profile_footprintcomment_form_textarea － コメント入力枠 TextBox (ID)
#profile_footprintcomment_form_submit － [投稿]ボタン(ID)

コメント枠は610pxで ほぼ改行幅に一致しています。
ただ、この値を指定すると、[投稿]ボタンがコメ枠の下に表示されてしまいます･･･
その対策として、ボタン幅を14px小さくしています。



★ おまけ

コメ枠内に画像を表示したい場合に

#profile_footprintcomment_form_textarea
	{
		background-image: url(http://任意の画像アドレス); 
		background-repeat: no-repeat; 
		background-position: center center;
	}


アイテム選択(入力)時に無地に戻したい場合。

#profile_footprintcomment_form_textarea:focus
	{
		background-image: none; 
	}


アイテム選択(入力)時に別の画像を表示したい場合。

#profile_footprintcomment_form_textarea:focus
	{
		background-image: url(http://任意の画像アドレス); 
		background-repeat: no-repeat; 
		background-position: center center;
	}




＜  ＞