LIFE IS LIKE A GROCERY CART.

主に日記&旅行記。ごくたまにWindowsとMacとフリーウェアの話題とか，muzieのTranceカテゴリの紹介とか。

FC2ブログでHighslideを使う～とりあえずそれっぽく篇～

2007年 02月 25日 (日) 10:33

Liteboxを導入したのはいいもののてんで使っていない私でありますが，今度は Highslide なるものを導入することにしました。Highslideて何？という方は下のサムネイル画像をクリックしてみてください。オーバーレイ表示ではなく，その場で拡大表示するスクリプトです。さらに，拡大された画像をドラッグすることができます。

ドラッグすることができ，クリックで閉じます

これをFC2ブログで使うにはちょこっとがんばってカスタマイズしないといけません。というわけでまたまた自分用メモも兼ねてFC2ブログ専用改造法を書いておきます。なんかもうFC2ブログ用にカスタマイズすること自体が目的になってきてる気がしますが。

こちらのサイトを参考にさせていただきました。
小粋空間 : Highslide JS でサムネイル画像を拡大表示する
ありがとうございます。

HighsideとFC2blogの相性について

結論から言うと，実際問題Highslideとの相性はあまりよくないです。FC2ブログではアップロード時にフォルダを作れません。これがネックとなっています。

ただし，動かないというわけではなく，動かすために多少労力が必要だというだけの話なので，適切にカスタマイズしてやれば問題はないです。

ただ絶対にクリアできない問題として，現在FC2ブログに拡張子curのファイルはアップできないため，虫眼鏡カーソルは使えません。

それでは，とりあえず機能をフルに使うためには色々と面倒事が多いので，まずは「それっぽく」動かすためだけにカスタマイズしていきましょう。

ちなみに私がダウンロードした時点では，バージョン2.2.8でした。多分大きな違いはないと思われます。

ダウンロード

まず，HighslideのサイトでHighslideをダウンロードします。What do you intend to use Highslide JS for? というわけなのですが，要は商用利用に関しては使用料がかかります。

A personal website, educational site or other non-commercial use (free).
A commercial or company website ($30).

のご自分に適した方を選んでダウンロードしてから解凍してください。例によって解凍するとき「拡張子が二重」とか文句を言われるかもしれませんが大丈夫です。

アップロード

とりあえずそれっぽく動くことを目標に話を進めます。

FC2ブログにログインして，「ファイルアップロード」で以下のファイルをアップしてください。

highslide / highslide.js
highslide / highslide-packed.js

当然ながらFC2ブログではフォルダは作れませんので，そのままアップするだけでよいです。

テンプレートの修正

「テンプレートの設定」または「ブログデザインの設定」で，現在使用中のテンプレートを修正します。

まず，「HTMLの編集」にて，<head> ～ </head>間に以下の行を追加します。

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

さらに，<body>の直後に以下を追加します。

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

なお，FC2アクセス解析を設置している場合では，<body>直後はアクセス解析用のタグを入力されているかと思いますが，アクセス解析用のタグの後に上記1行を置けば問題ないようです。

次に，「スタイルシートの編集」にて，以下を追加します。

.highslide {
    /* cursor: url(highslide/graphics/zoomin.cur), pointer; */
    outline: none;
}
.highslide img {
    border: 2px solid gray;
}
.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 {
    color: white;
    background-color: gray;
}
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}

現行のスタイルシートの最後に付け足しておけばOKです。

以上でHighslideが一応動くようになります。

リンクの書き方

では，エントリを書くときにどのようにすればよいのかを説明します。

今まで通りに画像を入れると，

<a href="http://...">
<img src="http://..." alt="..." />
</a>

といった具合になるかと思います。これを，次のように修正します。

<a href="http://..." class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)">
<img src="http://..." alt="..." />
</a>

onkeypress="..." はなくてもいけますが，ある方がより良いでしょう，ということで。

キャプションの付け方

拡大した画像の下にコメントを入れるにはどのようにすればよいのかを説明します。

さっきの

<a href="http://..." class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)">
<img src="http://..." alt="..." />
</a>

に，以下のように追加します。

<a href="http://..." id="gazou" class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)">
<img src="http://..." alt="..." />
</a>
<div class="highslide-caption" id="caption-for-gazou">ここにコメント</div>

この場合であれば，画像を拡大表示したとき「ここにコメント」と下に表示されるようになります。

id="gazou" と id="caption-for-gazou" に注意してください。ここの「gazou」を適当に書き換えることで色々のコメントを別々に付けることができます。

以上です。フル機能のためのカスタマイズ方法はもうしばらくお待ちください。

FC2 BLOG | コメント(12) | トラックバック(5) | ▲

Tatum

Looks good! Keep up the great work. It very impressive. Thanks!

Tatum # P4m59Ww6 | 2007.06.09(土) 16:11 | [書き直し]

settlement debt relief, reliable debt settlement company, debt settlement usa

The above comment by Chris points out exactly what Iﾒve been saying
about debt company fees. They are at the WRONG end of the program. In
the old days, we used to charge a very small retainer up front, but
the main fee was based on a percentage of the savings achieved during
the negotiation. So the fees were based on success, and did not interfere
with the clientﾒs ability to accumulate funds for some early settlements.
Nowadays, itﾒs a rare company that operates this way, and the result is
that very few settlements take place during the first 12 months clients
are enrolled in a third-party debt settlement program. Skip the fees! Learn
how to do this yourself. Youﾒll be out of debt faster, and youﾒll have
more control over the process.
<a href=http://mydebtmanagementonline.com>consumer debt review settlement</a>

debtsettlement # qb/JQ6B6 | 2008.02.20(水) 21:20 | [書き直し]

H. Klinton.

H. Klinton vs Obama. How you consider, who will win elections?

XXXLKlintonLobby # On0nMmFI | 2008.03.19(水) 23:13 | [書き直し]

Give yourself the edge over the other guys

Don't you wish you could attract all the most gorgeous women around you each day? Its easier then you think. A few dabs of Ultra Allure Pheromones will have women fighting over you.
Scientifically proven to work- pheromones have been used for years now to attract women. Don't be at a disadvantage anymore- pheromones will help any male attract women of all types and ages.
Don't be left behind! Millions of men are already benefiting from using pheromons to attract women- without them you are at a disadvantage! Don't let the other guy get the girl, arm yourself with Ultra Allure pheromones tonight!
If YOU would like to ...
- Become a lot more sexually attractive.
- Meet more beautiful women, MUCH more easily.
- Grab the attention and get approached by women far more often.
- Make a fantastic, memorable, compelling impression , every time.
- Increase your self-confidence and masculinity BIG-time then this may be the most important news you will read all year.

<a href=http://www.nemogs.com/r/>Then click here to learn more about the most potent and effective pheromone available!</a>

Product here - http://nemogs.com/r/index.php

Crottaccist # UpwhkbTY | 2008.04.05(土) 11:18 | [書き直し]

Auto Online Advisor: car cheapest driver insurance young, cheapest car insurance

<a href=http://auto-online-l0an.name>online car insurance</a>, <a href=http://auto-online-l0an.name>ohio car insuran
ce quote</a>, http://auto-online-l0an.name - online auto insurance quote

Auto Online Advisor is one of the leading U.S. online car finance brokers. Choose your car from any dealer nationwide. Rates will depend upon your personal circumstances!
Our Mission at Auto Online Advisor is to be your ultimate online solution for buying new and used cars, auto warranties and auto insurance. Our site is designed to give you more control of the buying process and make finding a solution that meets your personal needs easier than ever before.
Our benefits:
ｷ Good or Bad credit? We can help!
ｷ Choose your car from any dealer in the U.S.
ｷ The lowest interest rates!
If you're shopping for a car, our Web site offers you these benefits: the largest selection of vehicles anywhere on the planet; the most comprehensive selection of buying and selling tips, car reviews, vehicle pricing and safety information; and help with finance, insurance, warranty programs.
If you have any questions about our services you can count on the real help from the real people at our Live Support. You can find answers to some common questions in our FAQ section.
At Auto Online Advisor you can find hundreds of vehicles listed for sale by manufacturers and dealers nationwide. We can help find the right car for you.

FuegereeFixloan # DpG6W7M2 | 2008.06.16(月) 00:02 | [書き直し]

gems inventoyr

<font color=#CC0000><size>12]<a href=http://imagesart.info/aff/jew.html>>>Buy Jewellery for your women - Click HERE to Enter. <<</a></size></font>
<a href=http://imagesart.info/aff/jew.html><img>http://imagesart.info/aff/600x400_apr_10cert.jpg</img></a>

ornaments Online Jewellers
* lodgings
* fro
* Terms
* monasticism
* Shipping
* Returns
* touch
Shopping BasketYour Basket ?0.00 | Items: 0
* Elements jewels
* John Rocha jewels
* D For Diamond
* Fred Bennett
* Ti2 Titanium
* Carrs cutlery
* building Of Williams
Search
Newsletter
merchandise Categories
* Diamond agreement alliances
* boundlessness clangings
* coalescence cestoss
* Gemstone cestoss
* All Other alliances
* Chains
* Gold Anklets
* Bangles
* Belly Bars and umbilicus Bars
* Bracelets
* Brooches
* Earrings
* Cufflinks
* Lockets
* Necklaces
* tassels
* Childrens ornaments
* plateware
* diverse jewels
ornaments Info
* Diamond Info
* Gemstone Info
* priceless Metal Info
* cameo
* cestos Sizers
* patronage agreement clangings
* warranty Replacement
* Repairs and Resizes
Bookmark with...
* agreeable
* Digg
* reddit
* Facebook
* StumbleUpon
* Add to Favourites
14 Day agitation self-governed Returns protocol undo childbirth on all orders in the UK
Elements jewels
Elements jewels
Elements ornaments
Gemstone, diamond and savanna model ornaments in gold, ivory gold, greyish. The latest styles and colours...
John Rocha jewels
John Rocha ornaments
John Rocha jewels
extraordinary organically inspired unisex ornaments. In rings, earrings, bracelets, bangles, pendants, cufflinks...

Childrens and mollycoddle ornaments and gifts for junior boys and girls each set with a diamond in greyish, gold and whey-faced gold.

stylish urban mens ornaments. In rings, bracelets, bangles, chains, pendants, earrings, dog tags, cufflinks.

Ti2 Titanium

Ti2 Titanium
Ti2 Titanium

Titanium jewels for men and women inlaid with venerated metals and diamonds. In rings, bracelets, chains, bangles...

Carrs pearly

Carrs cutlery
Carrs cutlery

strident importance yware and giftware from Carrs of Sheffield. In fine greyish and y plate.

1000's of combining rings to elect from

Latest merchandises

6 Carat pornographic Topaz and Diamond tear-drop in 18 Carat unsullied Gold
6 Carat pornographic Topaz and Diamond tear-drop in 18 Carat unsullied Gold

?899.00

Pink Sapphire and Diamond cestos in 18Ct unsullied Gold
Pink Sapphire and Diamond cestos in 18Ct spotless Gold

?599.00

replica Etolie Diamond lacking perspective Court union cestos in 18 Ct Yellow Gold- 4.5mm- 0.6 Ct disc superb
replica Etolie Diamond quickly Court coalescence cestos in 18 Ct Yellow Gold- 4.5mm- 0.6 Ct disc splendid

?1,344.00

extreme Etolie Diamond Court juncture cestos in Platinum- 2.5mm- 0.33 Ct up superb
est extent Etolie Diamond Court union alliance in Platinum- 2.5mm- 0.33 Ct disc superb

?1,152.00

Featured outcomes

Enhanced pornographic Diamond cestos effulgent disc Cut in 18 Ct unsullied Gold
Enhanced downcast Diamond alliance splendid up Cut in 18 Ct milky Gold

?699.00

1 Carat full superb Cut Diamond Stud Earrings In 18 Ct milky Gold- G-H / SI
1 Carat up effulgent Cut Diamond Stud Earrings In 18 Ct spotless Gold- G-H / SI

?1,999.00

3mm basic lacking perspective-Court Bevelled coalescence clanging bind In Platinum
3mm basic lacking perspective-Court Bevelled union alliance platoon In Platinum

?668.00

Pink Sapphire est extent unendingness clanging In 18 Carat milky Gold
Pink Sapphire est extent everlastingness alliance In 18 Carat spotless Gold

?499.00

SafeBuy

JiriurgyLit # /fex6gFo | 2008.07.14(月) 05:33 | [書き直し]

compare debt settlement company, company creditor debt settlement, how to negotiate debt settlement

<a href=http://trust-debt-settlement.us>attorney debt lawyer negotiation settlement, negotiating settlement credit card debt, are debt settlement company scams</a>
http://trust-debt-settlement.us - american debt negotiation settlement, negotiating settlement credit card debt, debt settlement lawyer
<a href=http://trust-debt-settlement.us>unsecured debt settlement, debt settlement arizona, debt settlement debt negotiation</a>

eruncacleMurndebt # mTW.vmSk | 2008.07.24(木) 17:25 | [書き直し]

counseling debt settlement, debt settlement usa, settlement of credit card debt on credit report

<a href=http://settlement-company.blogspot.com>debt provides services settlement, debt settlement vs bankruptcy, debt settlement question</a>
http://settlement-company.blogspot.com - debt settlement texas, unsecured debt settlement, is debt settlement legal
<a href=http://settlement-company.blogspot.com>write a settlement letter for debt, settlement of credit card debt on credit report, creditor debt progr
am settlement</a>

eruncacleMurndebt # mTW.vmSk | 2008.07.26(土) 06:21 | [書き直し]

card credit debt negotiation settlement, debt settlement letter, business debt settlement

<a href=http://simple-debt.blogspot.com>card credit debt letter settlement, attorney debt lawyer negotiation settlement, debt settlement form</a>
http://simple-debt.blogspot.com - debt settlement message board, debt reduction list of settlement company, free debt settlement company
<a href=http://simple-debt.blogspot.com>debt settlement letter, debt negotiation and settlement, debt settlement attorney</a>

Mamnappylayepblog # wjaTIf4. | 2008.07.26(土) 12:50 | [書き直し]

debt settlement option, debt finances settlement through, collection agency debt settlement

<a href=http://simple-debt.blogspot.com>debt settlement services, debt settlement debt negotiation, debt settlement associate</a>
http://simple-debt.blogspot.com - debt settlement or debt consolidation, debt settlement message board, compare debt settlement company
<a href=http://simple-debt.blogspot.com>card credit debt program settlement, do it yourself debt settlement, debt settlement lead</a>

Mamnappylayepblog # wjaTIf4. | 2008.07.26(土) 19:24 | [書き直し]

cum in your own mouth

WOW, so much stuff here, an excellent resource. Thanks guys!

Qeoueeg # m1V02qUs | 2008.07.30(水) 00:49 | [書き直し]

Buy pills online: Penis Growth Oil, Penis Growth Oil, Soma and more...

<a href=http://aibolit-pills.com>avandia and dementia dr robert jarvik lipitor age ordering imitrex </a>
<a href=http://aibolit-pills.com>dog in ultram soma concert tickets generic name fo avandia </a>
http://aibolit-pills.com - cardiovascular research hoodia levitra erections medical term for breast augmentation

Voliorseeffescialis # kzmNYRyQ | 2008.07.30(水) 11:40 | [書き直し]

コメント投稿

トラックバック

このエントリへのトラックバックはこちら
http://n2.blog6.fc2.com/tb.php/175-eeb10246

プロフィール

Author : Naoki
名古屋在住大学生。
現在稼働中のマシンは3台 : 自作DOS/V (Win2000)，MacBook Black (MacOS X Tiger)，Mac mini (MacOS X Panther)。
CASIO EXILIM EX-Z600を愛用中。

長編記事

最近のトラックバック

月別アーカイブ

友達申請フォーム

この人と友達になる

ブログ内検索

RSS

FC2カウンター

ホームページアフィリエイトレンタルサーバー FC2ブログ FC2ID