賃貸 京都

この記事をリツートする FF14・攻略ブログ

--年--月--日

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

highslideのススメ(FC2ブログへの導入) この記事をリツートする FF14・攻略ブログ

2010年07月31日

highslide(ハイスライド)ってなんぞ??
画像が別画面にポップアップせずに同じ画面で拡大ボーンってなるやつです!
下のサンプル画像をクリックしてみてください。

sample

こんな感じになるやつですね(*'ω'*)
画像が大きくなったあと、クリック&ドラッグで移動することもできます;+♪

ブログに画像は付きものなので、もっとスマートにストレスなく表示させたーい。
記事の幅サイズなんか気にせずに、もっと大きな画像を載せたーい。
highslideは、そんな要望にあっさり応えてくれるお利口さんデス。

個人での使用がフリーなうえに、基本的にはどんなブログへも導入が可能なので、
見る側も作る側も楽しいこのhighslideをオススメします!ってことで・・・
わりとユーザーが多いであろう FC2ブログ への導入方法を掲載します☆
1. Highslide JSをダウンロード

本体を配布しているサイト(http://highslide.com/)へアクセス。
右上のDownloadDownload Now!YESと進んで本体 [ highslide-4.1.9.zip ] をダウンロード。
※2010.07.20現在の最新版です

2. highslide-4.1.9.zipを解凍して中身を確認

highslide-4.1.9.zipを解凍すると色々たくさんありますが、必要なのは以下のものです。

  [ highslide ]フォルダの中にある [ highslide.js ] ファイル
  [ highslide ]→ [ graphics ] の中にある画像ファイルすべて
  [ highslide ]→ [ graphics ]→ [ outlines ] の中にある画像ファイルすべて



3. ファイル名をリネームする

必要なファイルを全てFC2サーバーへファイルアップロードするわけですが、その前に!
このままではFC2にアップロードできないファイルがあるので、それらをリネームします。
リネームするのは[ highslide ]→ [ graphics ]の中にある、次の3つのファイル。

  拡張子が「.cur」ではダメなので2つのファイルを「.ico」にする
  zoomin.cur → zoomin.ico 、 zoomout.cur → zoomout.ico

  「.(ドット)」が間にあるとダメなのでloaderとwhiteの間のドットを取り除く
  loader.white.gif → loaderwhite.gif

4. highslide.jsを書き換える

[ highslide ]フォルダの中にある [ highslide.js ] ファイルを、自分のブログに合わせて書き換えをします。
テキストエディタで編集するより、フリーエディタが使いやすいと思うのでコチラでの編集をお勧めします。
書き換えをするのは以下の通り。青文字は補足説明文なので書き加えないでください。


//22行目
graphicsDir : 'highslide/graphics/',
 ↓ ↓
graphicsDir : 'http://blog-imgs-**.fc2.com/*/*/*/FC2ユーザー名/',
URLがわからない人は、なんでも良いので画像をFC2へファイルアップロードしてみてください。
アップロードした直後に赤文字でURLが表示されます。


//23行目
expandCursor : 'zoomin.cur',
 ↓ ↓
expandCursor : 'zoomin.ico',
拡張子.curを.icoに変える

//24行目
restoreCursor : 'zoomout.cur',
 ↓ ↓
restoreCursor : 'zoomout.ico',
拡張子.curを.icoに変える

//51行目
outlineType : 'drop-shadow',
 ↓ ↓
outlineType : 'rounded-white',
ここでは角が丸いポップアップをさせるrounded-whiteを指定します。
FC2テンプレートの形状によってうまく動作しないこともあります。

//828行目
var src = hs.graphicsDir + (hs.outlinesDir || "outlines/")+ this.outlineType +".png";
 ↓ ↓
var src = hs.graphicsDir + this.outlineType +".png";
画像指定を同じフォルダ内にする書き換え



5. FC2サーバーにアップロードする

ここからは、FC2ブログ内での作業になります。
さきほど、ファイル名のリネームとhighslide.jsファイルの書き換えが終ったので、
FC2ブログへログインし[ ツール ]→[ ファイルアップロード ]から必要なファイルを全てFC2へアップロード。

6. html編集でパスを追加する

[ 環境設定 ]→[ テンプレートの編集 ]を開いて[ html 編集 ]の<head>~</head>の間に以下のパスを入力。
よくわからない人は</head>の直前に入力すればOKです。
http://blog-imgs-**.fc2.com/*/*/*/ユーザー名 の部分は自分の環境に合わせてください(2ヶ所あり)

<script type="text/javascript" src="http://blog-imgs-**.fc2.com/*/*/*/ユーザー名/highslide.js"></script>

<script type="text/javascript">
hs.graphicsDir = 'http://blog-imgs-**.fc2.com/*/*/*/ユーザー名/';
hs.outlineType = null;
window.onload = function() {
hs.preloadImages();
}
</script>




7. スタイルシート編集画面に追加する

[ html 編集 ]の下にある[ スタイルシート編集 ]画面の一番最後に以下を追加してください。
http://blog-imgs-**.fc2.com/*/*/*/ユーザー名 の部分は自分の環境に合わせてください(3ヶ所あり)


/* Highslide JS */
.highslide {
cursor: url(http://blog-imgs-**.fc2.com/*/*/*/ユーザー名/zoomin.ico), pointer;
outline: none;
}
.highslide-active-anchor img {
visibility: hidden;
}
.highslide img {
border: 2px solid gray;
}
.highslide:hover img {
border: 2px solid white;
}

.highslide-wrapper {
background: 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: black;
font-size: 8pt;
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
padding: 2px;
border: 1px solid black;
background-color: white;

padding-left: 22px;
background-image: url(http://blog-imgs-**.fc2.com/*/*/*/ユーザー名/loaderwhite.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 {
color: white;
background-color: gray;
}

a.highslide-full-expand {
background: url(http://blog-imgs-**.fc2.com/*/*/*/ユーザー名/fullexpand.gif) no-repeat;
display: block;
margin: 0 10px 10px 0;
width: 34px;
height: 34px;
}

.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}


8. セッティング終了

これでhighslideが使えるようになりました!次は、使い方です。

9. 記事に画像を投稿する

[ 新しい記事を書く ]で記事を書いて画像ファイルを挿入してみましょう。
ファイルをアップロードするときに[ サムネイルを同時に作成する ]にチェックを入れてください。
img_107022_02.gif

[ サムネイルで記事を書く ]をクリックして画像を記事に挿入します。
img_107022_03.gif


10. 画像にhighslideのタグを追加する

リンクタグ<a href="~">の中の最後につぎのタグを追加します。
このタグを挿入することで、highslideポップアップをさせる指定をします。
highslideを使用したい画像には、毎回必ずこのタグを挿入してください。

class="highslide" onclick="return hs.expand(this)"


タグを入力する場所は↓↓を参考にしてください。
<a href="http://blog-imgs-00.fc2.com/f/f/f/fftimes/img001.jpg" target="_blank" class="highslide" onclick="return hs.expand(this)"><img src="http://blog-imgs-00.fc2.com/f/f/f/fftimes/img001s.jpg" alt="img001.jpg" border="0" width="100" height="50" /></a>

注意点としては最初の「class=」の前は半角スペースを。
> や " も消さないように正確に記述することです☆
これで、画像がボーンとなります(゚∀゚) お疲れ様でした!

おまけ

highslideで画像を拡大表示した際に、サイドバー(プラグインなど)に設置しているflash系のパーツの下に潜り込んでしまうものがあります。
これを回避する方法ですが、flashオブジェクトタグの<embed・・・>の中に以下を記述してください。
highslideはそのままで、浮かび上がってしまうflashを最背部に移動させる記述です。

wmode="transparent"



コメント

  1. you | URL | SFo5/nok

    ぉぉ、FC2ブログで画像をポップさせる方法がこんなに詳しく!
    週末の時間があるときにさっそく導入しちゃいますo(*^▽^*)o~♪
    わからないところがあったら聞きに来ちゃうかもです(≧д≦ヾ)

  2. *芽衣* | URL | .rEgMis2

    >youさん
    ぜひぜひ♪
    なんかポーンてなる感じがたまらなくカワイイのでww

  3. ふーこ | URL | SxnrjO2Q

    わかりやすい解説に出会えて幸運でした。
    おまけのflashオブジェクトタグに更に感動です。
    ありがとうございました。(感謝)

    :・'゚☆。.:*:・'゚ 。.:*:・'゚☆。. 

  4. ゼルテネス | URL | 8zWwncK6

    非常に参考になりました!
    ありがとうございます(∩´∀`)∩ワーイ

  5. | |

    承認待ちコメント

    このコメントは管理者の承認待ちです

  6. | |

    承認待ちコメント

    このコメントは管理者の承認待ちです

コメントの投稿

(コメント編集・削除に必要)
(管理者にだけ表示を許可する)

トラックバック

この記事のトラックバックURL
http://fftimes.blog104.fc2.com/tb.php/2-e8a41f31
この記事へのトラックバック


* 最新記事 *



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。