さる小屋 qr2
テキトー日記とナンカ製作。ゲーム、アニメが好きな人対象。
プロフィール

さるわた

Author:さるわた
オス 雑食。若干夜行性。
「プラモ作りたいけどブースの場所無い(ノД`)」



カレンダー(月別)

05 ≪│2017/06│≫ 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -



リンク

■友人■
 ばらろぐ
 すたーだすと☆ひらめもりー
 のざおの北海道生活
 わかぞー牧場
 愚痴@わびこ
 びょろの隠れ家
 ほりぃの気まぐれ日記
■私的■
 コレピク
 └さるわた(猿男)宅に訪問

 ぱすてる - 色覚問題研究グループ



RSSフィード



Info

■作品転載、直リン禁止
■JavaScript使用
□トラバ、リンクフリー。連絡くれると喜。
□↓問題等がありましたら
 saruwatayan@yahoo.co.jp



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



Highslide JS fc2ブログへの導入方法
Highslide JSにしましたヽ(*´∀`)ノ
最近ころころ変えすぎですね…il||li▄█▀█●il||li
こっちの方がギミックがよい、
んで、画像ウィンドウをドラッグ移動できたり、同時ウィンドウ開けたりと面白い♪

Highslide JS - 個人使用は無料。

この前はjsの書き込みが足りなかったようで…
最初からやり直したら、なんとかできました('∀`)
fc2ブログはフォルダ作れんからシンドイ(´;ω;`)

とりあえず、チュートリアルっぽいの書いてみました
少しでも参考なったら幸いですm(_ _)m
誤字脱字、ソースミスってたらごめんなさい('∀`)素人知識なので
バグっても関知いたしません、自己責任でお願いします(-人-)

Highslide JS
Highslide JS

かえる貯金箱

Highslide JS
Highslide JS

最近読んでる藤沢周平('∀`)


-----------------------------------------------------
1 Highslide JSのダウンロード
 Highslide JS→Download→"highslide-3.3.8"を選択→
 "highslide-3.3.8.zip"をダウンロード→ファイル解凍。
 (08/02/01現在の最新版を使用)
 
………
-----------------------------------------------------

1 Highslide JSのダウンロード
 Highslide JS→Download→"highslide-3.3.8"を選択→
 "highslide-3.3.8.zip"をダウンロード→ファイル解凍。
 (08/02/01現在の最新版を使用)
 

2 フォルダ中身
 次に一応、中身確認
 解凍したhighslide-3.3.8フォルダには
 "highslideフォルダ"
 "imagesフォルダ" 
 "サンプルの.htmlが多数、.swf"
 があるかと、今回のはサンプルの.htmlにある、
 example-white-rounded-outline.htmlの角が丸まってるタイプをやりました。

 使用するのは、"highslideフォルダ"の中にある
 "highslide.js"と"graphicsフォルダのほぼ全ての画像"です。

 "highslide.packed.js"
 "highslide-with-html.js"
 "highslide-with-html.packed.js"
 "highslide-full.js"
 "highslide-full.packed.js"
 "swfobject.js"
 ってのもありますが、fc2blogに上げれないのもあったので使いませんでした、
 アップする場合はリネームすれば大丈夫。
 ブラウザ的な表現とかswfを使用するサンプルのようにする場合はこれらが必要かと。
 example-white-rounded-outline.htmlに似た色違いの枠とかは、
 今回入力する部分を少し変えればできると思ふ。


3 highslide.jsの書き換え
 テキストエディターでhighslide.jsを書き換えます。
 書き換えにはフリーソフトのエディターを使いました。
 32行目 
 graphicsDir : 'highslide/graphics/', 
   ↓   ↓ 
 graphicsDir : 'http://アップ先のアドレスを入力', 
 ファイルアップロードしているアドレス先を入力
 08/05の鯖変更でアドレスが各自変わっていますのでアドレスを確かめてください。

 33行目 
 restoreCursor : 'zoomout.cur', 
   ↓   ↓ 
 restoreCursor : 'http://****.web.fc2.com/highslide/zoomout.cur', 
 少しややこしいので*の部分のアドレスは、まず5を参照。
 5を飛ばす場合は変更なしで構いません。

 72行目 
 outlineType : 'drop-shadow', 
   ↓   ↓ 
 outlineType : 'rounded-white', 
 今回は角がまるまってるのがrounded-whiteなので入力。
 サンプルhtmlと比較し、graphicsフォルダにあるoutlinesフォルダ内の画像参照。

 485行目 
 var cur = hs.createElement('img', { src: hs.graphicsDir + hs.restoreCursor }); 
   ↓   ↓ 
 var cur = hs.createElement('img', { src: hs.restoreCursor }); 
 画像縮小カーソルの指定変更
 5を飛ばす場合は変更なしで構いません。

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

 1305行目 
 hs.styleRestoreCursor = window.opera ? 'pointer' : 'url('+ hs.graphicsDir +  
 hs.restoreCursor +'), pointer'; 
   ↓   ↓ 
 hs.styleRestoreCursor = window.opera ? 'pointer' : 'url('+ hs.restoreCursor +'), pointer'; 
 画像縮小カーソルの指定変更
 5を飛ばす場合は変更なしで構いません。


4 ファイルアップ その1
 次にfc2ブログの管理画面からファイルアップロード画面へ、
 3で書き換えた"highslide.js"とgraphicsフォルダの画像データ(png、gifなど)、
 "zoomin.cur"と"zoomout.cur"と"Outlines.psd"を除く全ての画像をアップロード。

 この時、画像データ"loader.white.gif"の名前変更しアップロードしてください。
 loader.white  →  loaderwhite 
 fcブログではファイル名での"."を受け付けないみたいです

 graphicsの中にある、outlinesフォルダの画像もアップロードです。
 一つ一つアップせなアカンから、ちとめんどい…(´;ω;`)


5 ファイルアップ その2
 次にでアップしなかった、
 "zoomin.cur"と"zoomout.cur"の二つをアップするのですが、
 fc2ブログのアップ先では.cur形式を受け付けないので、
 fc2ホームページ(http://web.fc2.com/)のIDを取得して、
 (ブログユーザーなら同じID内で取得できるかと)
 指定されたアップ先に分かりやすいよう"highslide"などのフォルダを作り、
 そのフォルダに"zoomin.cur"と"zoomout.cur"をアップロードします
 アップの方法、その他はfc2webの公式マニュアル参照。

 ブログ内で使用するデータはなるべくブログ規定の場所にアップしたいのですが、
 この二つは無理なので(ノД`)
 
 注:めんどくさい場合は飛ばしても構いません、無くてもできます。 
   ここは画像に乗ったときの虫眼鏡風カーソルにするか否かです。


6 blogのテンプレート書き換え その1
 管理画面のテンプレートの設定に進みます。
 やる前に書き換えるテンプレを複製することをオススメ。

 html編集というところの枠に、scriptを入力します。
 <html> <head> <body>などがある方です。
 そこの</head>の上に以下の二つを入力してください。 
<script type="text/javascript" src="http://アップ先のアドレスを入力/highslide.js">
</script> 
 "highslide.js"のアップロード先を指定します、
 同じfc2の方は*を穴埋めするだけでいいと思います

 改行し次↓を入力 
<script type="text/javascript">
hs.graphicsDir = 'http://blog-imgs-**.fc2.com/*/*/*/ユーザー名/;
window.onload = function() {
hs.preloadImages(5);
}
</script>
"hs.graphicsDir=**"に画像のアップロードフォルダを入力します
Fc2ブログのアップロード先が変更になり、アドレスは08/05/20現在の場合です

7 blogのテンプレート書き換え その2
 次は6とは違う枠のスタイルシート編集という枠に、下のCSSを記入します。
 
 これは記入する枠の一番下に入れてください。 
.highslide {
cursor: url(http://****.web.fc2.com/highslide/zoomin.cur), 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://アップ先のアドレスを入力/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://アップ先のアドレスを入力/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;
}
"http://****.web.fc2.com/highslide/zoomin.cur"は5にて、
 作成したfc2ホームページのアドレスです。
 アップしてない場合は.highslide { ~ }の4行は要りません。
"http://アップ先のアドレスを入力/loaderwhite.gif"と
"http://アップ先のアドレスを入力/fullexpand.gif"は
*にfc2ブログの各自アップロード先を入力


8 画像にタグを指定 ラスト 
 画像を貼る時にこちらを使用すると完成です。
 
<a href="*画像のアドレス*" class="highslide" onclick="return hs.expand(this)">
<img src="*画像のアドレス*" alt="Highslide JS" title="Click to enlarge" id="thumb01" height="*高さ*" width="*横幅 *"></a>

下記はキャプションです。
使用の場合は上の</a>の次に入れてください 
<div class="highslide-caption" id="caption-thumb01">
*キャプションのコメント入力場所*
</div>


-----------------------------------------------------

左はキャプション無。 
右はキャプション有。【かえる貯金箱/最近読んでる藤沢周平('∀`)】

Highslide JS
Highslide JS

かえる貯金箱

Highslide JS
Highslide JS

最近読んでる藤沢周平('∀`)


スポンサーサイト


この記事に対するコメント
Webデザイナーさるわた降臨

プログラムとか見たら吐き気がするぜ(゚Д゚)
【2008/02/02 01:15】 ばら #vs7OG0is [ 編集]

これギミックが面白いだろ♪
同時にウィンドウ開けたり、ドラッグするの楽しいわ~

プログラムとか見たら吐き気がするぜ(゚Д゚)
【2008/02/02 01:20】 さる #GMs.CvUw [ 編集]

承認待ちコメント
このコメントは管理者の承認待ちです
【2012/03/17 18:34】 - # [ 編集]


この記事に対するコメントの投稿






禁止ワード *http:// *未承諾広告




管理者にだけ表示を許可する


この記事に対するトラックバック
この記事にトラックバックする(FC2ブログユーザー)
トラックバックURL
→http://saruyan.blog61.fc2.com/tb.php/216-8f437e71



Mozilla Firefox ブラウザ無料ダウンロード

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