Home > 200804

200804

Shadowbox実装手順

2008-04-20 (Sun)

IT Tips

Tips
JavaScript
CSS
Shadowbox

Shadowbox実装方法（FC2blog向け）が、以下ブログで掲載しておりましたので、早速実装に向けてやってみた結果、実装成功しました。感謝です^^
FYI：以下が実現方法をご教授くださったブログ様です
RIAトピックス｜Shadowbox.jsをFC2ブログで使ってみる
○実装手順
１．Shadowbox公式サイトへ移動
２．Shadowboxをダウンロード（ページ後半にあります）
３．解凍し、Shadowbox/buildフォルダ内にある以下3つをそのままアップロード
・css/shadowbox.css
・js/shadowbox.js
・js/adapter/shadowbox-yui.js
４．Yahoo! User Interface（YUI）から以下を取得し、アップロード
・yui-utilities.js
５．以下を <head>～</head> 間に記述
※赤文字部分は自分の環境に合わせて記述してください

<link rel="stylesheet" type="text/css" href="http://○○○/file/shadowbox.css">
<script type="text/javascript" src="http://○○○/file/yui-utilities.js"></script>
<script type="text/javascript" src="http://○○○/file/shadowbox-yui.js"></script>
<script type="text/javascript" src="http://○○○/file/shadowbox.js"></script>
<script type="text/javascript">window.onload = function() { Shadowbox.init(); };</script>

上記手順が完了したら、次は画像とWebページに付加する <a> タグの属性です。「target="_blank"」を消して、赤文字部分を追記。

<a href="http://blog-imgs-29.fc2.com/b/l/a/blackcat13numbers/re5.jpg" rel="shadowbox"><img src="http://blog-imgs-29.fc2.com/b/l/a/blackcat13numbers/re5s.jpg" alt="re5.jpg" border="0" align="left"/></a><br clear="all" />

と記述すると

これで完了です。実際にサムネイル画像をクリックしてみれば、どのような動作をするのかわかります。また、Shadowboxは画像のオーバーレイ表示だけではなく、動画（YouTube/Flashなど）やWebページも実現可能なので、追々説明したいと思います。

Tabs Generator：ナビメニュータブのジェネレータサイト

2008-04-19 (Sat)

IT Tips

Tips
Windows
Mac
Generator
無料･フリー

Tabs Generator

↑タブ：このような良く見かけるメニュータブです

最近、色々なWebサイト（企業サイトもふくむ）やブログサイトでメニューバーを見かけるので、そのメニューナビバーを簡単に生成するジェネレータサイトを紹介しようかと。

まず、上記サイトにアクセスすると、ひとつのタブの設定をすることができる。幅・高さ・丸み・色・スタイル・向きなど・・・。ここで基本的なcssで設定しなければいけない情報を簡単に作っておくことができる。

最後に生成後「DOWNLOAD」ボタンをクリックすれば、png画像形式でダウンロードできる。これをサイト内の任意の場所に組み込むことで、お洒落なナビメニューを加えたサイトができるはず。

Highslide JS実装手順

2008-04-17 (Thu)

IT Tips

Tips
JavaScript
CSS
Highslide

○実装手順
１．Highslide JS公式サイトへ移動
２．Highslide JS旧版（version2.2.8）をダウンロード
　・左メニュー「Download」クリック
　・version2.2.8を選択し「Download now」クリック
　・Highslide Downloadで「yes」クリック
※何故旧版かというと、最新版はアップロードできない名称なので念のため
３．解凍し、highslideフォルダ直下のjsファイル2つをそのままアップロード
４．以下を <head>～</head> 間に記述
※赤文字部分は自分の環境に合わせて記述してください

<script type="text/javascript" src="http://○○○/file/highslide.js"></script>
<script type="text/javascript">
    hs.graphicsDir = '<%url>file/';
    hs.outlineType = null;
    window.onload = function() {
        hs.preloadImages();
    }
</script>

５．以下を <body> 直後に記述
※FC2アクセス解析をしている場合、そのタグの直後に

<div id="highslide-container"></div>

６．CSS編集で以下を記述

.highslide {
    /* cursor: url(highslide/graphics/zoomin.cur), pointer; */
    outline: none;
}
.highslide img {
    border: 2px solid white;
}
.highslide:hover img {
    border: 2px solid white;
}
.highslide-image {
    border: 2px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;
    border: 2px solid white;
    border-top: none;
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    padding: 5px;
    background-color: white;
}
.highslide-loading {
    display: block;
    color: white;
    font-style: 'MS Sans Serif';
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    padding: 3px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    background-color: black;
    /*
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
    */
}
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
    font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    background-color: gray;
    color: white;
}
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}

※CSS編集での詳細設定はお好みでやってみてください

そして、前準備が終わり、次は画像とWebページに付加する <a> タグの属性です。
「target="_blank"」を消して、赤文字部分を追記。

<a href="http://blog-imgs-29.fc2.com/b/l/a/blackcat13numbers/ye3.jpg" class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)"><img src="http://blog-imgs-29.fc2.com/b/l/a/blackcat13numbers/ye3s.jpg" alt="ye3.jpg" border="0" align="left"/></a><br clear="all" />

と記述すると

これで実装できたかと思います。できない場合、何なりと質問いただければ頑張って回答したいと思います。疲れた；
※明日（4/17）付けで投稿しておきます

Home > 200804

Search

Adsense

Calendar

Categories

Tagcloud

Archives

« 2008/04 »
S	M	T	W	T	F	S
-	-	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	-	-	-

Recent Comments

Recent Trackback

Feeds

↑Page Top