■見出し１■

ＨＯＭＥ > リンク関係マニュアル

リンク関係マニュアル

※「<」「>」については、全角で表記していますが、コードに入れるときは半角にしてください。

リンクタグ＜a＞に class をつけて、別窓で開くようにできます。

この設定は、ドリームウィーバーではできませんので、ソースコードを直接編集してください。

別窓で開くリンク

＜a＞タグ内に、class="popup" を入れると、別窓で開くようになります。

別窓リンクこちら

通常のHTMLでは、target="_blank" ですが、
これは、XHTML 1.0 Strict では推奨されていません。別窓で開くかどうかは、あくまでユーザーの意思であるべき、という考えがあるからです。

XHTML 記述の中でも、XHTML 1.0 Transitional であれば、target="_blank" は許可されていますが、
今回のプロユース版テンプレートでは、より高度な Strict で記述しているため、
class="popup" とうクラスを入れて、スクリプトで特殊な処理して別窓でページを開かせるようにしています。

ポップアップ

＜a＞タグ内に、class="popup1" というクラスを入れ、ポップアップ表示できます。

ポップアップリンク

ポップアップのサイズは、横500px　高さ420px です。

このサイズは、setup.js 内でコントロールしています。

サイズ変更する場合は、setup.js を開き、サイズ部分の数値を変更するだけです。

//------sizedpopup "popup1"の中（32行目あたり）の、
width=500,height=420　という部分を探して、変更してください。

画像にリンクを貼る場合（画像を大きく見せたいとき）

dfg
クリックすると大きくなります

これは「lightbox」フォルダ内のスクリプトを使用しています。

使用する場合は、HTMLファイルのheadに以下を３行追記。
このHTMLファイルの18～20行目

<script type="text/javascript" src="lightbox/prototype.js"></script>
<script type="text/javascript" src="lightbox/moo.js"></script>
<script type="text/javascript" src="lightbox/lightbox.js"></script>

次に、22行目を以下のように変更します。

<body onload="setup(); initLightbox()">

これで使用準備は整いました。
使い方は、<a>タグにリンク先の画像を以下のように設定します。

<a href="img/sample.jpg" rel="lightbox" title="テスト画像です。この素材写真はそのまま使わないで下さい。">

rel="lightbox" は、コードを直接編集してください。その後の title 属性に画像の説明文を入れておくと、大きく画像が開いたときにtitleの内容が表示されます。

階層の違うHTMLファイルで使う場合

HTMLファイルの階層を変えて使用するときは、
/lightbox/lightbox.jp
ファイルを開き、23,24行目の

var fileLoadingImage = "img-layout/loading.gif";
var fileBottomNavCloseImage = "img-layout/closelabel.gif";

を、http://sample.com/img-layout/loading.gif
のように、それぞれhttpから始まる絶対パス指定に変更して使ってください。

■サイドバナー■

マニュアルメニュー

Yahoo!検索スタッフブログ

Yahoo!検索 Index Update
(2010-03-11)

2009年忘年会議「検索キーワードで読み解く2009年」資料を公開
(2010-02-18)

連載「進化する『LIFE ENGINE』 - Yahoo! JAPAN 2010年の新技術」第ニ回
(2010-01-27)

会社概要

■株式会社●●●■

住所：〒000-0000
東京都

電話：03-1234-5678

定休日

定休日に設定すると背景赤になります。定休日の設定は別ファイルで一括管理しています。