CSS « ウェブデザイナー的ホームページ制作最適化

‘CSS’ カテゴリーのアーカイブ

CSSの指定を選択可能にして、cookieに保存

2009 年 5 月 6 日 by admin

訪問者側でCSSを指定して、それによって、
次回以降のアクセスは指定したCSSが自動的に適用されるようにする。

たぶんYahoo!のトップページも同じ感じだと思います。

Yahooトップページ

これらを選ぶと、次回から一度選んだCSSが適用されます。

▼javascriptソース（headタグ内）

<script type="javascript">
<!--
var cssfiles = new Array();
cssfiles[0] = "style0.css";
cssfiles[1] = "style1.css";
cssfiles[2] = "style2.css";
var css = GetCookie("CSS");
if(css == ""){css = cssflies[0];}
document.write('<link rel="styleseet" href="'+css+'" tyl="text/css">');

function CssfChange(sel){
if(sel.options[sel.selectedIndex].value){
SetCookie("CSS",cssfiles[sel.options[sel.selectedIndex].value]);
window.location.reload();
}
}

function GetCookie(key){
var tmp = document.cookie + ";
var index1 = tmp.indexOf(key,0);
if(index1 != -1){
tmp = tmp.substring(index1,tmp.length);
var index2 = tmp.indexOf("=",0)+1;
var index3 = tmp.indexOf(";"index2);
return(unescape(tmp.substring(index2,index3)))
}
return("");
}

function SetCookie(key,val){
document.cookie = key + "=" + escape(val) + ";expires = Fri, 31-DEC -2010 23:59:59 GMT;";
}
// -->
</script>
<noscript>
<link rel="stylesheet" href="style1.css" type="text/css">
</noscript>

▼HTMLソース

<form name="form">
<select name="file">
<option value="0">style0.css</option>
<option value="1">style1.css</option>
<option value="2">style2.css</option>
</select>
<input type="button" value="変更" onclick="CssfChange(document.form.file)">
</form>

CSS, javascript

コメントは受け付けていません。

入力フォームを選択したらフォーカスされるinput

2009 年 5 月 5 日 by admin

入力フォームを選択したらフォーカスされるinputを作成するには、javascriptとcssを使います。
入力中のフォームがフォーカスされることは「訪問者がどの部分を入力しているか？」が分かりやすく、ユーザビリティが高まります。

▼HTMLサンプルソース

<input size="35" name="name" style="background:#ffffff;" onfocus="this.style.backgroundColor='#99cc00'" onblur="this.style.backgroundColor='#ffffff'" type="text" />

, ,

CSS, javascript

コメントは受け付けていません。

CSSのクラス名でSEO対策しよう！！

2008 年 12 月 10 日 by admin

このタイトルを見て、「スタイルシートでSEO対策なんてできないでしょ！？」と思っている人も多いはず。でも、ちゃんと、Yahoo!検索 インフォセンターで、アナウンスもしている方法なので、是非、SEOを極めたい方は必見です！！

まずこのCSSでSEO対策する目的は『ウェブページ内の重要性の低い要素を検索エンジンに通知する為』です。

もう少し詳しく言うと、ヘッダーやフッダーなどは、基本的には、サイト内へのナビゲーションであることが多い為、ページ内のコンテンツに対する重要性が高くない場合が多いと思います。そこで、ページのコンテンツに対する重要性が低いものをYSTに知らせることができます。そのYSTに知らせる時に、CSSを使います。

実際に使う場合には、HTMLタグ（div、spanなど）にclass=”robots-nocontent”属性を指定します。

<div class="robots-nocontent">～</div>
<span class="robots-nocontent">～</span>
<p class="robots-nocontent">～</p>

【情報引用】http://info.search.yahoo.co.jp/archives/002879.php

, , , , ,

CSS, SEO

コメントは受け付けていません。

フォントサイズをワンクリックで変更

2008 年 9 月 10 日 by admin

フォントサイズをワンクリックで変更するには、
デフォルトの状態から大きなフォント『A』を押すと、
フォントが大きく表示されて、
小さいフォント『A』を押すと、
フォントが小さく表示されます。
javascriptでCSSのfont-sizeプロパティを変更することで実現します。

▼javascriptソース（headタグ内）

var Default = 2;
var tags = new Array('div','td','tr');
var sizing = nre Array('xx-small','x-small','small','medium','large','x-large','xx-large');
function FontChange(target,tarF){
if(!document.getElementByld) return
var dore = document,tarS = null,fontSize = Default,value,su,cTags;
fontSize += tarF;
if(fontSize < 0) fontSize = 0;
if(fontSize > 6) fontSize = 6;
Default = fontSize;
if(!(tarS = dore.getElementByld(target))) tarS =
dore.getElementsByTagName(target)[0];
tarS.style.fontSize = sizing[fontSize];
for(value = 0; value < tags.length; value++){
cTags = tarS.getElementsByTagName(tags[value]);
for(su = 0; su < cTags.length; su++) cTags[su].style.fontSize =sizing[fontSize];
}
}

▼HTMLソース

<p>
    フォントを大きく ⇒ <a href="javascript:FontChange('body',1)">『A』</a><br>
    フォントを小さく ⇒ <a href="javascript:FontChange('body',-1)">『A』</a><br>
</p>

,

CSS, javascript

コメントは受け付けていません。

ページ全体をグレースケールにする

2008 年 9 月 5 日 by admin

色覚障害者の方がWEBページを閲覧した場合、色情報を認識できない場合があります。いろ情報に頼らないWEBページがアクシビリティの点から重要です。
そこでページ全体をグレースケールにして、色覚障害者が見やすいページかどうかチェックすることが１つの方法です。
ページ全体をグレーにするには、IE(IE4.0以降)ではfilter:Gray()プロパティが使えます。bodyタグにfilter:Gray()を適応するだけで、ページ全体がグレースケールになります。

CSSソース

body{filter:Gray();}

CSS

コメントは受け付けていません。
« 前ページへ