Highslide JSをWordPressで使う

きさら — Thu, 16 Oct 2008 02:25:32 +0000

2009/02/01追記
現在はLightboxを使用しています。
以下の記述は現在仕様していません。
Lightboxについては[Lightbox 2.04をWordpressで使う](http://www.2drops.jp/2009/02/lightbox/)を参照してください。

Highslide JSは画像を表示させるためのJavaScriptです。
画像がズームするエフェクトが格好いいので、お気に入りです。

なんとなくいまさら感がありますが、Wordpressで使う方法のメモです。
プラグインを使わずに、スキンの変更だけで行います。
いちいちタグを入れるのが面倒だという方はWPJ-Highslideを利用してください。

私はWindows Live WriterにWlOdekoをインストールして使っています。
その場合は手順4までを行えばOKです。

### 手順1：ダウンロード

[Highslide JS - JavaScript thumbnail viewer](http://highslide.com/)からダウンロードします。

英語で難儀する人もいるかもしれませんが、**Downloadをたどっていくだけ**なのであまり迷わないかと思います。
中学生レベルの英語力な私でも、一発でダウンロードできました（苦笑）

### 手順2：アップロード

ダウンロードしたファイルを解凍すると highslide-x.x.x というフォルダができます。
その中にある highslide フォルダをサイトのトップか、Wordpressの設定で「ブログのアドレス (URL)」に設定したところに配置します。
このブログだと http://www.2drops.jp/ 直下になります。

他のHTMLファイルや images フォルダはアップロードの必要がありません。
表示のサンプルになります。

### 手順3：テーマの編集

header.phpの最後のほう**``から``までを書き換え**ます。
これで上手くいかないようならば、バージョンが古い可能性があります。*最新バージョンをアップロード*しなおしましょう。

 endif; ?>


 wp_head(); ?>

### 手順4：CSSを編集する

以下のコードをCSSファイルに追加します。

.highslide {
    cursor: url(<$MTBlogURL$>highslide/graphics/zoomin.cur), pointer;
}
.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(<$MTBlogURL$>highslide/graphics/loader.white.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
}
a.highslide-full-expand {
    background: url(<$MTBlogURL$>highslide/graphics/fullexpand.gif) no-repeat;
    display: block;
    margin: 0 10px 10px 0;
    width: 34px;
    height: 34px;
}

2Drops! » Highslide

Highslide JSをWordPressで使う