Script is OFF

Ad Sense

Links（Search）

Links（Soft&Design&Tips）

Links（Favorite）

Links（My Old Blogs）

Blog People

Blog Birthday

Awasete Yomitai

Ad Sense

TOP Entries

TOP Comments

TOP Track backs

Categorise

Monthly Archives

RSS Feeds

    track feed
    Add to Google

Tag Cloud

NewMark

検索

Google
 
Apple Store（Japan） Apple Store（Japan）

Shadowbox応用：複数のWebページをグループ化してまとめる

Category : IT Tips | | CM [0] | TB [0]　
Tag : Tips * JavaScript * CSS * Shadowbox *
以下の記事で実装方法やサンプルを掲載しました。
●Shadowbox実装手順

今回は、このShadowboxを使った応用として、複数のWebページをグループ化してまとめる手法を紹介したいと思います。ページをグループ化することで、拡大した画像の下に「Close」だけではなく、「Previous」と「Next」リンクを付けてページ遷移を容易にし、ユーザビリティを向上させることもできます。

サンプル（テキストリンク）とコードは以下の通りです。
Google
Yahoo! JAPAN
MSN Japan
<a href="http://www.google.co.jp/" rel="shadowbox[hogehoge]" title="Google">Google</a>
<a href="http://www.yahoo.co.jp/" rel="shadowbox[hogehoge]" title="Yahoo! JAPAN">Yahoo! JAPAN</a>
<a href="http://jp.msn.com/" rel="shadowbox[hogehoge]" title="MSN Japan">MSN Japan</a>
※[]内のhogehogeは任意ですが、グループ化するには同じ文字を入力ください

次にサンプル（画像リンク）とコードはテキスト同様、以下の通りです。
Google
20080516_1.png
Yahoo! JAPAN
20080516_2.png
MSN Japan
20080516_3.png
Google
<a href="http://www.google.co.jp/" rel="shadowbox[hogehoge]"><img src="http://blog31.fc2.com/b/blackcat13numbers/file/20080516_1s.png" alt="20080516_1.png" border="0" align="left"/></a><br clear="all" />Yahoo! JAPAN
<a href="http://www.yahoo.co.jp/" rel="shadowbox[hogehoge]"><img src="http://blog31.fc2.com/b/blackcat13numbers/file/20080516_2s.png" alt="20080516_2.png" border="0" align="left"/></a><br clear="all" />MSN Japan
<a href="http://jp.msn.com/" rel="shadowbox[hogehoge]"><img src="http://blog31.fc2.com/b/blackcat13numbers/file/20080516_3s.png" alt="20080516_3.png" border="0" align="left"/></a><br clear="all" />
今回はWebページに絞りましたが、次回はFlashやYouTubeなどの動画をオーバーレイさせる方法を紹介したいと思います。
FC2ブックマークに追加

ランキング参加中☆クリック投票お願いします
ブログランキング・にほんブログ村へ
ブログランキングサイトに登録中です
人気ブログランキング  P-NETBanking  ブログの殿堂  ブログ王ランキング

「第17回 ソフトウェア開発環境展」に行きました

Category : 日記 | | CM [0] | TB [0]　
Tag : 日記 * 仕事 *
今日は仕事（競合製品の調査・販売や開発パートナー探しなどなど）で「第17回 ソフトウェア開発環境展」（SODEC）に行ってきました。場所は国際展示場駅の東京ビッグサイトです。

14日（水）・15日（木）・16日（金）と3日間連続であります。場所はかなり広いので、3日間あってもすべて見るのは困難です。なので的を絞って必要なブースだけ見て資料や情報収集してきました。

ソフトウェア開発環境エリアでは、主に誰もが利用しているExcelを拡張するソフトやデータ・ファイル管理をするソフト、Webアプリ関連ソフト、RDB/XMLDBあたりを調査してみました。
080515_1.jpg080515_2.jpg080515_3.jpg080515_4.jpg
日立ではJavaアプリケーションとしてEclipseプラグインを。IBMは最新DBやWebSphere、SOA開発環境など。Microsoftでは主にWindows Server 2008（興味ありませんが）。Googleでは企業向けAppsやAdsense/Adwordを。
080515_5.jpg080515_6.jpg080515_7.jpg080515_8.jpg
富士通は帳票ソリューションやWebからSOA関連アプリ。NECはプロジェクト管理システムや帳票印刷業務管理ソフト。ORACLEは最新DBなどなど。

全体的には内部統制系のソリューションやノンプログラミング開発ツールみたいなのがたくさんあり、良い情報収集になりました。帰りはパンフレットやノベルティでバッグがパンパンです
FC2ブックマークに追加

ランキング参加中☆クリック投票お願いします
ブログランキング・にほんブログ村へ
ブログランキングサイトに登録中です
人気ブログランキング  P-NETBanking  ブログの殿堂  ブログ王ランキング

Smoothscroll：ページ内リンク先への移動を滑らかにスクロール

Category : IT Tips | | CM [0] | TB [0]　
Tag : Tips * JavaScript * ツール * 無料･フリー *
Smoothscroll

このJavaScriptを適用させると、ページ内リンク先への移動を瞬時に移動させるのではなく、滑らかな動きで移動させることができるサイトをカッコ良くさせるひとつの手法です。

適用方法は以下の通りです。
１．Smooth scrollingへアクセス
２．サイト内から「smoothscroll.js」リンクをクリックしダウンロード
３．smoothscroll.jsをブログにアップロード
４．以下を <head>〜</head> 間に記述
<script type="text/javascript" src="/file/scroll.js"></script>
※赤文字はサイト環境にあわせる必要がある場合、編集ください

■smoothscroll.jsの簡単カスタマイズ
１．メモ帳などのテキストエディタで編集
２．142行目の「ss.STEPS = 数字;」を確認
３．数字を編集しスクロールスピードを調整
※数値が低いほど高速スクロールになります
FC2ブックマークに追加

ランキング参加中☆クリック投票お願いします
ブログランキング・にほんブログ村へ
ブログランキングサイトに登録中です
人気ブログランキング  P-NETBanking  ブログの殿堂  ブログ王ランキング

Shadowbox応用：Webページに実装させる

Category : IT Tips | | CM [2] | TB [0]　
Tag : Tips * JavaScript * CSS * Shadowbox *
Shadowboxはサムネイル画像のオーバーレイ表示だけではなく、動画（YouTube/Flashなど）やWebページも実現可能なのです。そこで、今回はWebページに適用させる手法を紹介したいと思います。

サンプルは以下の通りです。
１．テキストリンクにした場合
Google
<a href="http://www.google.co.jp/" rel="shadowbox" title="Google">Google</a>
赤文字を記述するだけです。新しいブラウザで表示（target="_blank"）がある場合、それを削除して記述してください。

２．画像リンクにした場合
20080510_1.png
<a href="http://www.google.co.jp/" rel="shadowbox" title="Google"><img src="http://blog31.fc2.com/b/blackcat13numbers/file/20080510_1s.png" alt="20080510_1.png" border="0" align="left"/></a><br clear="all" />
同じ要領で、赤文字を記述するだけで実現できます。

このブログでも、いくつかWebページのリンク先をShadowboxで利用していますが、特にヘッダー下にあるメニューバー内の「メール」フォーム先にShadowboxを適用させたのが、便利だなぁと思いました。
FC2ブックマークに追加

ランキング参加中☆クリック投票お願いします
ブログランキング・にほんブログ村へ
ブログランキングサイトに登録中です
人気ブログランキング  P-NETBanking  ブログの殿堂  ブログ王ランキング

Shadowbox応用：複数の画像をグループ化してまとめる

Category : IT Tips | | CM [0] | TB [0]　
Tag : Tips * JavaScript * CSS * Shadowbox *
以下の記事で実装方法やサンプルを掲載しました。
●Shadowbox実装手順

今回は、このShadowboxを使った応用として、複数の画像をグループ化してまとめる手法を紹介したいと思います。グループ化することで、拡大した画像の下に「Close」だけではなく、「Previous」と「Next」リンクを付けてスライドショーのような演出をすることができます。

サンプル画像とコードは以下の通りです。
hamu_1.jpghamu_2.jpgneko_1.jpgneko_2.jpg

画像1つ分のコードを以下に記載します。
<a href="http://blog31.fc2.com/b/blackcat13numbers/file/neko_2.jpg" rel="shadowbox[group]" title="ハムスターとクロネコ"><img src="http://blog31.fc2.com/b/blackcat13numbers/file/neko_2s.jpg" alt="neko_2.jpg" border="0" align="left"/></a><br clear="all" />

赤文字部分のShadowboxを扱うrel属性に[]を使うことでグループ化できます。
※[]内の文字はユニークで良いが、グループ化するには同じ文字を入力ください

青文字部分のtitleは、付けても付けなくても問題ありません。詳細は以下ご参照。
●Shadowbox応用：画像にタイトルを付加する
FC2ブックマークに追加

ランキング参加中☆クリック投票お願いします
ブログランキング・にほんブログ村へ
ブログランキングサイトに登録中です
人気ブログランキング  P-NETBanking  ブログの殿堂  ブログ王ランキング

 HOME 

FC2ブログ 紹介予定派遣

Design byLoco-net::blog