2011-07-21

Basic認証のパスワード生成

Basic認証

.htaccess
.htpasswd
を配置するだけで、Basic認証がかけられます。

.htaccess

「.htaccess」ファイルの中には、次のように記述します。

AuthUserFile /ID・パスワード格納ファイルの所在
AuthGroupFile /dev/null
AuthName "表示されるメッセージなど"
AuthType Basic
require valid-user

パスワードが生成できるフリーサイト

「S-MEMO（エスメモ）」さんのブログで紹介されていました。

他にもWEB情報が沢山。。。

Basic認証作成プログラム

2011-07-10

リンクがはれるカレンダー

しろうさぎのwebnotebook

リンクがはれて、動的に月を変えられるカレンダー

demo

配布元：Schwarz Lanzenreiterより、「calendar2.js」をダウンロードする。

<script type="text/javascript" src="calendar2.js"></script>

内にJavaScriptを読み込ませる。

<script type="text/javascript">
<!--
calendar_print(); 
// -->
</script>

内に
配置したい場所に実行スクリプトを設置する。

リンクの設置方法

<script type="text/javascript">
<!--
clndrLink["#20110707"] = "href='http://www.google.co.jp/' target='_blank' title='googleへ'";
clndrLink["#20110719"] = "href='http://www.yahoo.co.jp/' target='_blank' title='Yahoo! JAPANへ'";
calendar_print(); 
// -->
</script>

特定の年月日にリンクをはりたい場合、
アンカーの属性を値とし添え字を年月日とすることで可能。
必要なだけ書き連ねます。

clndrLink["#20110707"] = "href='http://www.google.co.jp/' target='_blank' title='googleへ'";
clndrLink["#20110719"] = "href='http://www.yahoo.co.jp/' target='_blank' title='Yahoo! JAPANへ'";

clndrLink ⇒ この変数名は固定
"#20110707" ⇒ 4桁の年、2桁の月、2桁の日。

2011-06-26

シンプル　自動切替えタブ型メニュー

しろうさぎのwebnotebook

シンプルな「自動切り替え」タブ型メニューボックス。

demo

デザインはCSSで行います。
タグの構造もシンプルなので実装が簡単にできます。

配布元：yetii

ページ下部にある「yetii.js」をダウンロード
（※ファイルが表示されるので、それをyetii.jsと名前をつけて、任意の場所へ保存）

<script type="text/javascript" src="js/yetii.js"></script>

内にJavaScriptを読み込ませる。

<!-- tabBox satrt -->
<div id="tabBox">

<ul id="tabBox-nav">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<li><a href="#">Tab 4</a></li>
</ul>

<div style="display: none;" class="tab">
<p><span class="gr">tab01</span><br>に切り替わりました。</p>
</div>	

<div style="display: block;" class="tab">
<p><span class="gr">tab02</span><br>に切り替わりました。</p>
</div>	

<div style="display: block;" class="tab">
<p><span class="gr">tab03</span><br>に切り替わりました。</p>
</div>	

<div style="display: block;" class="tab">
<p><span class="gr">tab04</span><br>に切り替わりました。</p>
</div>	

</div>
<!-- //tabBox end -->

このとき、
ターゲットのボックスの「class="tab"」を定義することを忘れないようにする。
そして最後に、スクリプト実行のトリガーを設置する。

<script type="text/javascript">
var tabber1 = new Yetii({
id: 'tabBox',
tabclass: 'tab',
active: 2,  //デフォルトタブ表示位置
interval: 5  //切替る速度
});
</script>

#tabBox {
	width: 500px;
	margin: 0px;
}

ul#tabBox-nav {
	list-style-type: none;
	width: 500px;
	float: left;
	background: url(../pixel.gif) bottom left repeat-x;
}

ul#tabBox-nav li {
	margin-right: 2px;
	float: left;
}

ul#tabBox-nav a {
	float: left;
	display: block;
	padding: 4px 8px;
	border: 1px solid #ccc;
	border-bottom: 0;
	color: #666;
	background: #eee;
	text-decoration: none;
	font-weight: bold;
	outline: none;
}

ul#tabBox-nav a:hover {
	background: #fff;
}

ul#tabBox-nav a.active {
	background: #fff;
	padding-bottom: 5px;
	cursor: default;
	color: #00BF08;
}

#babTxt {
	margin: 0px;
	padding: 0px;
}
.tab {
	width: 478px;
	clear: left;
	border: 1px solid #ccc;
	border-top: none;
	padding: 10px;
}

.gr {
	color: #00BF08;
	font-weight: bold;
}

2011-06-22

シンプル　タブ型メニュー

しろうさぎのwebnotebook

シンプルなタブ型メニューボックス。

demo

デザインはCSSで行います。
タグの構造もシンプルなので実装が簡単にできます。

CMS等にも導入しやすいとか。。。
自社サイトをリニューアル中なので、さっそく導入してみました！

配布元：yetii

ページ下部にある「yetii.js」をダウンロード
（※ファイルが表示されるので、それをyetii.jsと名前をつけて、任意の場所へ保存）

<script type="text/javascript" src="js/yetii.js"></script>

内にJavaScriptを読み込ませる。

<!-- tabBox satrt -->
<div id="tabBox">

<ul id="tabBox-nav">
<li><a href="#sampletab1">tab01</a></li>
<li><a href="#sampletab2">tab02</a></li>
<li><a href="#sampletab3">tab03</a></li>
<li><a href="#sampletab4">tab04</a></li>
</ul>

<div class="tab" id="sampletab1">
<p><span class="gr">tab01</span><br>に切り替わりました。</p>
</div>

<div class="tab" id="sampletab2">
<p><span class="gr">tab02</span><br>に切り替わりました。</p>
</div>

<div class="tab" id="sampletab3">
<p><span class="gr">tab03</span><br>に切り替わりました。</p>
</div>

<div class="tab" id="sampletab4">
<p><span class="gr">tab04</span><br>に切り替わりました。</p>
</div>

</div>
<!-- //tabBox end -->

このとき、
ターゲットのボックスの「class="tab"」を定義することを忘れないようにする。
そして最後に、スクリプト実行のトリガーを設置する。

<script type="text/javascript">
var tabber1 = new Yetii({
id: 'tabBox'
});
</script>

#tabBox {
	width: 500px;
	margin: 0px;
}

ul#tabBox-nav {
	list-style-type: none;
	width: 500px;
	float: left;
	background: url(../pixel.gif) bottom left repeat-x;
}

ul#tabBox-nav li {
	margin-right: 2px;
	float: left;
}

ul#tabBox-nav a {
	float: left;
	display: block;
	padding: 4px 8px;
	border: 1px solid #ccc;
	border-bottom: 0;
	color: #666;
	background: #eee;
	text-decoration: none;
	font-weight: bold;
	outline: none;
}

ul#tabBox-nav a:hover {
	background: #fff;
}

ul#tabBox-nav a.active {
	background: #fff;
	padding-bottom: 5px;
	cursor: default;
	color: #00BF08;
}

#babTxt {
	margin: 0px;
	padding: 0px;
}
.tab {
	width: 478px;
	clear: left;
	border: 1px solid #ccc;
	border-top: none;
	padding: 10px;
}

.gr {
	color: #00BF08;
	font-weight: bold;
}

2011-06-13

印刷範囲をスタイルシートで指定する

しろうさぎのwebnotebook

webページを印刷するとき、
メイン部分のみ印刷したいのに、
ヘッダー、フッター、サイドバーも印刷されてしまう。

そんなときはスタイルシートで、
印刷する範囲に含める、含めないの指定をします。

スタイルシートで印刷範囲を指定するタグは、

head
main	side
foot

@media print{
#head{display:none;}
#foot{display:none;}
#side{display:none;}
#main{width:100%; float:none;}
}

印刷時の改ページ部分を制御するプロパティ

page-break-before … 要素の直前の改ページを制御
page-break-after … 要素の直後の改ページを制御

プロパティ名	値	説明
page-break-before （直前）	auto	制御しない（初期値）
	always	直前で改ページさせる
	avoid	直前の改ページを禁止する
page-break-after （直後）	auto	制御しない（初期値）
	always	直後で改ページさせる
	avoid	直後の改ページを禁止する

　指定例

見出し（h2要素）の直前で改ページさせる例
h2 { page-break-before: always; }
水平線（hr要素）で区切って改ページさせる例
hr { page-break-after: always; }

2011-06-05

shadowbox

しろうさぎのwebnotebook

エビアン（evian）のCMライブラリーで見つけた、
動画をLightBox風に表示させることができる「Shadowbox」。

YouTube動画や、拡大画像表示として広範囲で利用できるすぐれもの！

Prototype、jQuery、YUI、Extなど複数のJavaScriptのライブラリに対応した、画像や動画などを拡大表示できるLightbox風のスクリプトととして、多数ある Lightbox風スクリプトの中でも充実した機能を持っています。

demo

セッティング方法

配布元の「Shadowbox.js」よりダウンロードします。

・併用するJavaScriptのライブラリは、下記の中から好きなものを選べます。

Prototype
jQuery
MooTools
Dojo Toolkit
Yahoo! User Interface Library
Ext

（※「jQuery」でダウンロードしました。）

・拡大表示できるメディア

画像(PNG, JPEG, GIFなど)
動画(FLV, QuickTime, Window Media Player)
ウェブページ

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init（）;
</script>

ただし、
ダウンロードする際に、言語のサポートで「japanese」を選択した場合は、
「charset="utf-8"」が必要になる様です。

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js" charset="utf-8"></script>
<script type="text/javascript">
Shadowbox.init（）;
</script>

<a href="image.jpg" rel="shadowbox">我が家のわんこ</a>

タイトル表示をする場合

<a href="image.jpg" rel="shadowbox" title="我が家のわんこ">我が家のわんこ</a>

グループ化する場合

<a href="image01.jpg" rel="shadowbox[dogs]" title="我が家のわんこ1">我が家のわんこ1</a>
<a href="image02.jpg" rel="shadowbox[dogs]" title="我が家のわんこ2">我が家のわんこ2</a>
<a href="image03.jpg" rel="shadowbox[dogs]" title="我が家のわんこ3">我が家のわんこ3</a>

サイズ調整をする場合

<a href="image.jpg" rel="shadowbox;height=140;width=120">我が家のわんこ</a>

YouTubeの場合（「エビアンローラーベイビー」より）

【埋め込みコード】

上記の赤文字部分のURLをリンク先に指定する。

手動再生の場合

<a href="http://www.youtube.com/v/DbWhL-v19NY?version=3" rel="shadowbox;width=640;height=385;player=swf"><img src="images/pic_01_01.jpg" alt="ムービーを再生する" width="171" height="189" class="rollover" /></a>

自動再生の場合

<a href="http://www.youtube.com/v/DbWhL-v19NY?version=3&autoplay=1" rel="shadowbox;width=640;height=385;player=swf"><img src="images/pic_01_01.jpg" alt="ムービーを再生する" width="171" height="189" class="rollover" /></a>

2011-06-03

スライドボックス（jquery）

しろうさぎのwebnotebook

Nivo Slider

Nivo Slider
パラパラめくれながら、画像が切替るスクリプトです。

Nivo Sliderより、

jQuery
Nivo Slider script
Nivo Slider CSS

をダウンロードします。

16種類の画像切替えパターンがあるので、
組合せることも可能です。

「boxRainGrow」で切換え

demo

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
  $(window).load(function() {
    setTimeout(function(){
      $('#slider').nivoSlider({
      effect:'boxRainGrow',
      pauseTime:6000,
      directionNav:false,
      pauseOnHover:false,
      controlNavThumbs:true
      });
    });
  });
</script>

<div class="mainImageCont">
<div id="slider" class="nivoSlider">
<a href="#"><img src="images/mainImage02.jpg" alt="" /></a>
<a href="#"><img src="images/mainImage01.jpg" alt="" /></a>
<a href="#"><img src="images/mainImage03.jpg" alt="" /></a>
<a href="#"><img src="images/mainImage04.jpg" alt="" /></a>
</div>
</div>

.nivoSlider{
    position:relative;
    width:640px; /* 画像幅に変更する */　
    height:375px; /* 画像の高さに変更する */
    background:url(images/loading.gif) no-repeat 50% 50%;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
.nivoSlider a {
    border:0;
    display:block;
}

レイアウトパターン

・デフォルト
・キャプションとリンク
・サムネイル

パスワードが生成できるフリーサイト

リンクがはれて、動的に月を変えられるカレンダー

リンクの設置方法

シンプルな「自動切り替え」タブ型メニューボックス。

シンプルなタブ型メニューボックス。

印刷時の改ページ部分を制御するプロパティ

指定例

セッティング方法

タイトル表示をする場合

グループ化する場合

サイズ調整をする場合

YouTubeの場合（「エビアンローラーベイビー」より）

手動再生の場合

自動再生の場合

Nivo Slider

「boxRainGrow」で切換え

レイアウト パターン

　指定例

レイアウトパターン