坊譚

妖怪イラスト&漫画ブログ

妖怪図鑑:目次

スポンサーサイト

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

押してもらえると励みになります→ 拍手する



( --/--/-- --:-- ) Category スポンサー広告 | TB(-) | コメント(-)| top↑

ブログでWCR Comic Viewerを使う

WCR Comic Viewerで配布しているJavaScriptで動くウェブコミックビューワを使って見たのですが なかなかよい感じです。 (うちのビューワを使った漫画です
元のサイトにはHPで使うことを前提として説明しているので、ブログ用の設置の仕方の覚書をまとめておこうと思います。あくまでブログ初心者の覚書なので信頼しすぎないように。
(本当にこれでよいのか分かりませんが、とりあえず問題なく動きます)

 

といってもHPよりもすごく簡単です。
まどろっこしいのが嫌いな人のために物凄く簡単に要約します。

ブログの記事に下の水色の箱の中の文字を貼り付けて赤字のところだけ書き換えてください


黄色の行(<li>~</li>で閉じている列)はビューワで表示する画像のリストです。画像のアドレスさえ入れればOKです。必要に応じて好きなだけ増やしてください。


ただ、リストの最初の画像にすべての画像サイズを自動的に合わせているようなので画像サイズはそろえて下さい

 


<script type="text/javascript" charset="UTF-8" src="http://viewer.webcomicranking.com/js/wcrcv.js"></script>
<ul id="wcrcv_list">
 <li><a href="http://一番目の画像のアドレス">1ページ</a></li> 
 <li><a href="http://二番目の画像のアドレス">2ページ</a></li>
</ul>

 

以上で説明終了です。お疲れ様でした。
これで終わるのも何なので以下細かい説明をしていきます。興味のある方だけどうぞ。


 

先ほどのコードの説明をします


<script type="text/javascript" charset="UTF-8" src="http://viewer.webcomicranking.com/js/wcrcv.js"></script>

この文でJavaScriptを呼び出しています。残りの部分はHTMLで書かれたリストです。

 


これからの説明は長いのでそれぞれクリックで開くようにしてます。
必要なところだけ読んでください。

リストの作り方の簡単な説明


リストの作り方はHTMLで表記します。
よく分からない人はコピペして赤字の部分を変えて下さい。(詳しく知りたい人は<UL>タグについてググって下さい)
黄色い行は必要な枚数だけ増やしてください。




<ul id="wcrcv_list">
 <li><a href="http://一番目の画像のアドレスを入れる">ページ数</a></li>
 <li><a href="http://二番目の画像のアドレスを入れる">ページ数</a></li>
 <li><a href="http://三番目の画像のアドレスを入れる">ページ数</a></li>

</ul>



<ul id="wcrcv_list">~</ul>……リスト全体の開始と終わりを知らせるタグ

<li>~</li>……リストの内容をはさむタグ。この間に画像へのリンクを入れる。

ちなみに
<a>~</a>で挟んだ文字がJavaScriptが動かない場合表示されるので、ここでリストを作っておくととても親切です。


あと、<li>の行を沢山作るのが面倒な人は簡略化したリストの作り方もあります。

WCR Comic Viewerから一応転載しておきます.


  • 拡張子がgif/jpg/jpeg/png のいずれかになっている (大文字/小文字は区別しません)
  • ファイル名の最後が数字で終わっている
  • ファイル名の数字の前の名前が統一されている
  • ファイル名の数字の桁数が統一されている

詳しくはWCR Comic Viewerの説明を読んでください。

 

ここで拡張子がbmpになっている人は、ちょっと悔い改めたほうがいいです。

やり方は
<a>のタグ、上記の文で言う
<a href="http://画像のアドレスを入れる">

<a href="http://画像のアドレスを入れる" title="lastpage=数字">

に変更してください。
数字の部分にはそのタグの画像から最後のページまでの枚数を入れてください。

例えば
01.png~05.pngなら『title="lastpage=5"』
05.png~15.pngなら『title="lastpage=10"』
になります。

ただこれをするとJavaScriptが動かない場合、中途半端なリンクが表示されるので注意。

さらにブログだとあまり使えないかもしれません。
私の使っているFC2ブログだと、ファイル名を揃えていても画像のあるサーバーがたまに違います。そこを注意してください。

ちなみに私が作ったリストは、こんな感じです。



<ul id="wcrcv_list">
<li><a title="lastpage=8" href="http://blog-imgs-31.fc2.com/*****/01.png">1</a> </li>
<li><a href="http://blog-imgs-26.fc2.com/*****/09.png">9</a> </li>
<li><a title="lastpage=8" href="http://blog-imgs-26.fc2.com/*****/10.png">10</a> </li>
<li><a href="http://blog-imgs-26.fc2.com/*****/19.png">19</a> </li>
<li><a href="http://blog-imgs-26.fc2.com/*****/20.png">20</a> </li>
<li><a title="lastpage=4" href="http://blog-imgs-26.fc2.com/*****/21.png">21</a> </li>
</ul>

理由はよく分かりませんが、lastpage=9で9枚目の画像が表示されません。
それと上記の
<a title="lastpage=8" href="http://blog-imgs-26.fc2.com/*****/10.png">10</a>
だと本当は17までしか表示されないと思うのですが18まで表示されています。
その辺は臨機応変にビューワに合わせましょう。

 


簡単なカスタマイズ


別に設定しなくても使い勝手は結構いいと思うので
通常はブログに合わせた色にさえすればいいと思います。
WCR Comic Viewerからの転載です。元のページに書いてあるのでしなくてもいい気がしますが一応。
元のページにビューワの動作設定の表があるのでそれを参考に以下のスクリプトを書き換えて最初のスクリプトの下に貼ってください。




<script type="text/javascript">
var WCRCV_OPTION = {
  name1 : value1,
  name2 : value2,
  name3 : value3

};
</script>



【name : value】の文字列は必要なだけ増やしてください。

nameは表の『名前』の欄にある【page_clickable】とか【scroll】に置き換え
valueは『設定可能な値』の欄【true】とか【'left'】を、nameに合わせて選んでください。

ちなみにこんな感じに設定します



<script type="text/javascript">
var WCRCV_OPTION = {
font_color : '#ffffff',
scroll : 'left',
msg_bg_color : '#ffffff',
msg_font_color : '#504139'
};
</script>

 

今までのを全部合わせるとこんな感じです
何か文章を入れるときはリストの前か後ろかに書いてください。



<script type="text/javascript" charset="UTF-8" src="http://viewer.webcomicranking.com/js/wcrcv.js"></script>
<script type="text/javascript">
var WCRCV_OPTION = {
  name1 : value1,
  name2 : value2,
  name3 : value3
};
</script>
<ul id="wcrcv_list">
 <li><a href="http://一番目の画像のアドレスを入れる">番号を入れる</a></li>  _fcksavedurl=""http://一番目の画像のアドレスを入れる">番号を入れる</a></li> " _fcksavedurl=""http://一番目の画像のアドレスを入れる">番号を入れる</a></li> " _fcksavedurl=""http://一番目の画像のアドレスを入れる">番号を入れる</a></li> "
 <li><a href="http://二番目の画像のアドレスを入れる">番号を入れる</a></li>
</ul>


 

基本的に下の2つは補足なので読まなくてもいいです。


完全カスタマイズ


かなり自由に配置できます。
必要な要素は全部書かないといけないので、要素を忘れないように注意。
WCR Comic Viewer内の
≫完全カスタマイズ例を別ウィンドウで表示
でソースをコピーして改造するのがいいと思います。

私はtableタグを使って配置を調整しています。
この辺はHTMLの知識があれば割と簡単に出来ると思います。

逆に言えば、これをしたければHTMLを少しかじらなきゃ難しいです。一日で覚えられるのでHTML講座を読んで勉強してください。

<div>にidをつけたらその要素が表示されるようです。それとオレンジ部分は自分で設定してください。


大まかな必要タグ
自分が使ったことがあるものだけですけど それと一部自分用に要素を色々加えています。このタグそのまま貼り付ければいいかも。
(別に<p>でもいいらしいが<div>で説明)



<div id="wcrcv_canvas"></div>
これで全体を囲む。
 <div id="wcrcv_menu"></div>
これでメニュー部分を囲む


上記以外のタグは何も挟まなくても動くようです(多分)

それ以外は
 <div id="wcrcv_menu"></div>
の間に挟んでください。(もっとも挟まなくても動くみたいですが)



<div id="wcrcv_page"></div>
画像を表示する部分

 

<input id="wcrcv_autosave" type="checkbox" value="off" />自動保存
しおり機能、自動保存のチェック欄on/offを入れる

<input id="wcrcv_num" type="text" style="IME-MODE: disabled" size="数字" />

ページジャンプの欄(サイズは設定したほうがよい)

<div id="wcrcv_msg"></div>
しおり機能を使った時のメッセージの表示

<div id="wcrcv_pages"></div>
今のページを表示する

ボタン関係 -----------------------------------------------
<img src="http://自分でアップしたアドレス" alt="BACK" id="wcrcv_back" />
ページを戻る

<img src="http://自分でアップしたアドレス" alt="NEXT" id="wcrcv_next" />
ページを進む

<img src="http://自分でアップしたアドレス" alt="SAVE" id="wcrcv_save" />
しおり機能の保存

<img src="http://自分でアップしたアドレス" alt="LOAD" id="wcrcv_load" />
しおり機能の再開


 


大きな漫画を表示したい(HTMLをつかう)

私がいつも描いているのは4コマ漫画なので以上のもので困らないのですが
通常のストーリー漫画を載せたい場合、ブログでは狭いと思います。
しかしよい方法があります。
他のブログは分かりませんが、FC2ブログでは『htmlファイル』がアップロードできます。
この『htmlファイル』で漫画用のページを作ればサイドが無くなる為、そのページのみ広く画像を置けます。

説明は面倒なので以下の文をテキストにコピペして、
赤字の部分を書き換えて、黄色の行は必要なだけ増やし、拡張子をhtmlにして保存してください。
<!--~-->のタグはコメント領域なので表示されません。
コメント領域で指示している場所に必要なものを挟んでください。
全部出来たらブログにアップロードをして、カラムでも記事でも何でもいいのでファイルへのリンクを作って下さい。リンクをクリックするとページが表示されます。オレンジ部分は自分で設定してください。


これで必要なところを記入しただけだと文字の大きさも違うしそっけないページになると思います。
細かく調整したい人はHTMLを調べて下さい。簡単なので一日あれば十分使えるようになります。
それが面倒だけどブログのデザインをそのまま使いたい人はCSSを設定してください。

それとCSSだけちょっと説明しておきます。
やり方は、

自ブログの何も無いところで右クリック→ソースの表示を選択
これでメモ帳が開くのでこんな感じのタグを探します。

 


<link rel="stylesheet" type="text/css" href="http://ここは人によって違います/style.css" media="screen,tv" title="default" />

 


これをコピーしCSSの設定の場所に挟んでください



<html lang="ja">
<head>
 <meta hyyp-equiv="content-type" content="text/html; charset=shift_JIS">
 <title>タイトルを入れる</title>
<!--****CSSの設定(使う場合は自分で調べて挿入)****-->
<!--****CSSの設定ここまで****-->
<!--****WCR Comic Viewerのスクリプト****-->
 <script type="text/javascript" charset="UTF-8" src="http://viewer.webcomicranking.com/js/wcrcv.js"></script>
<!--****WCR Comic Viewerのスクリプトここまで****-->
<!--****スクリプトの設定(この辺に入れる)****-->
<!--****スクリプトの設定ここまで****-->
</head>
<body>
<!--***ここから本文(詳細設定の場合はこの辺に入れる)*****-->
 <!--***ここからリスト*****-->
<ul id="wcrcv_list">
 <li><a href="http://画像のアドレスを入れる1">番号を入れる1</a></li> 
</ul>
 <!--***ここまでリスト*****-->
 <!--***ブログに戻るリンク(本文中の好きな場所に変えて下さい)***-->
<p>
 <a href="http://自ブログのトップページアドレスを入れる" target="_top">戻る</a>
</p>
 <!--***リンクここまで*****-->
<!--***ここまで本文*****-->
</body>
</html>

 <li><a href="http://画像のアドレスを入れる2">番号を入れる2</a></li>



ざっとですが以上です。
分かりにくいところがあると思いますが、その時はWCR Comic Viewerの説明をじっくり読んだほうが分かりやすいかも。


また、私自身、そんなに詳しいほうではないですし、間違いなどがある可能性が十分あるため、この記事は自己責任でご利用ください。


ご指摘アドバイスなどしていただけたら嬉しいです。


WRCに投票
←漫画ランキングに投票してもらえると嬉しいです

押してもらえると励みになります→ 拍手する



( 2009/01/19 10:48 ) Category カスタマイズ | TB(0) | CM(0) | top↑
ご意見・ご感想などご自由にどうぞ
  • URL
  • コメント
  • パスワード
  • 秘密
  • 管理者にだけ表示を許可する

この記事のトラックバックURL
http://youkaiblog.blog75.fc2.com/tb.php/57-a8978482


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