坊譚

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

妖怪図鑑:目次
カスタマイズ

スポンサーサイト

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

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



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

FC2でサムネ表示

最近FC2のimageタグを知りました。
イラストを扱うタグです。

FeedGrapherもサムネイルを作ってくれるサービスですが、こちらはアップロードした画像がすべて選択されるため、このブログでは使えないです。

今回も個人的なメモです。

>>続きを読む
スポンサーサイト

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

スポンサーサイト


( 2009/04/27 22:19 ) Category カスタマイズ | TB(0) | CM(0) | top↑

イラスト・漫画ブログのカスタマイズ

お手軽なレンタルブログ(fc2)でイラスト・漫画ブログをどのようにカスタマイズすればいいのか考えてみました。

最近目標とするブログのカスタマイズがようやく出来ました。
「はじめに」の上に「通常メニュー」「妖怪タグ」のタグが増えています。設置するの大変でした。タグ切り替えメニューのクッキー付きを使っています。
GW頃に使う予定でカスタマイズしていたのですが間に合ってよかったです。もっとも肝心の絵が出来ていないのが問題ですが。

で、本題です。少し古い記事ですが
漫画、イラストサイトにブログが向いている理由 - フラン☆Skin はてな支店

この記事でイラストブログの利点について書かれていますが、コメント欄で反対意見も数多く出ています。
このことでこれだけ賛否両論があるということはイラストブログに関心を寄せる人のでしょう。

このブログもイラストブログの作り方を調べるために訪れる人もいるようですし、
このような情報は共有してノウハウを蓄えたほうがいいのではないかと思います。

小説ブログではブログで小説!などでカスタマイズの研究をしているようです。

至らぬところもあるでしょうが、漫画・イラストを見やすいように自分なりに考えてこのブログをカスタマイズをしています。
FC2ブログなので他で同じことが出来るかは分からないです。
こうした方が見やすいという意見があればどうぞおっしゃってください。



自分の考えとしては重要視するものとしないものがあってもいいと思います。
とりあえず、大きな目標。

・スクリプトを使っていると見易いが、切っていても見るのに差支えがないようにする。
・あくまでメインは「イラスト・漫画」。これを中心に閲覧しやすくする。「らくがき」「雑記」関係は負担をかけてまで閲覧性を高くはしない。

この考えの下に、こんなカスタマイズをしています。

①ポップアップするビューワーの導入
②目次を用意。
③イラストのサムネイル
④漫画専用のビューワーを使う

追加:fc2のイラスト用テンプレート紹介

>>続きを読む

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



( 2009/04/22 22:19 ) Category カスタマイズ | TB(0) | CM(0) | top↑

ブログで漫画用目次を作る

たまにブログをカスタマイズしたくなるのですが最近4コマ漫画目次を少々改造しました。
いたおさんの運営するFC2ブログのテンプレート工房の記事を参考にしています。感謝!


この記事のおかげで自分好みの漫画用目次を自動で作れるようになりました。

私は漫画用にスクリプトの中の<ul>を<ol>に変えて番号が出るようにしたり 『target="_blank"』を足して別ウィンドが開くようにしています。

FC2ブログでしか使えませんが私と同じようなものでよろしければどうぞ参考にしてください。

でも上記の記事を一通り読んでから使ったほうがいいです。私自身はHTMLしか分からないので勘で変更しています。あくまでバックアップを取ってから自己責任で。

【やり方を見る】

アーカイブページを目次に変更します。

テンプレのHTMLの中にある<!--▼サイトマップ▼-->で囲っている部分を差し替え。

赤字のカテゴリーは自分で設定してください。

 

<!--▼サイトマップ▼-->
<!--titlelist_area-->
<div class="menu_outline3">
<div class="menu_title3"><a name="mapnavi_title">■投稿順目次■</a></div>
<div class="menu_cont3">
<div id="maplist">

<!--titlelist-->
<ol type="1">
<li>
<span><%titlelist_category></span>
<a href="<%titlelist_url>"  _fcksavedurl=""<%titlelist_url>" " target="_blank"><%titlelist_title></a>
</li></ol>
<!--/titlelist-->

</div><!--/maplist-->
</div><!--/menu_cont3-->
</div><!--/menu_outline3-->
<script type="text/javascript"><!--
var A=document.getElementById('maplist').getElementsByTagName('A');
var S=document.getElementById('maplist').getElementsByTagName('span');
var C=new Array(); var I=""; var Flg=false;

/*--- カテゴリ名を記述 ---*/
C[0]="カテゴリー1";
C[1]="カテゴリー2";
C[2]="カテゴリー3";
/*------------------------*/

I+='<p><b>■ カテゴリ一覧 ■</b></p>'
I+='<ul class="navi">'
for (i=0;i<C.length;i++) { I+='<li><a href="#'+i+'">'+C[i]+'</a></li>' }
I+='</ul>'

for (i=0;i<C.length;i++) {
Flg=false;
I=I+'<a name="'+i+'" id="'+i+'"></a><br />';
I=I+'<p><b>【 '+C[i]+' 】</b>';
if (i!=C.length-1) {I=I+' <a href ="#'+(i+1)+'" title="次のカテゴリへ進む">▽</a>';}
if (i!=0) {I=I+' <a href ="#'+(i-1)+'" title="前のカテゴリへ戻る">△</a>';}
I=I+' <a href ="#mapnavi_title" title="カテゴリ一覧へ戻る">▲</a>';
I=I+'</p><ol>';

for (j=S.length-1;j>=0;j--) {
if (C[i]==S[j].innerHTML) {
if (Flg==true) {
I+='<li><a href="'+A[k].href+'" target="_blank">'+A[k].innerHTML+'</a></li>';}
k=j;Flg=true;}}
I+='<li class="end"><a href="'+A[k].href+'" target="_blank">'+A[k].innerHTML+'</a></li>';
I+='</ol>';}
document.getElementById('maplist').innerHTML=I;
--></script>
<!--/titlelist_area-->
<!--▲サイトマップ▲-->

CSSはこんな感じで設定しています

でもこの辺は好みの問題なので自分のブログに合わせてかえて下さい。

/************* ▲ サイトマップ調整 ▲ *************/
/* サイトマップ調整 */
div.menu_outline3 {
text-align:left;                     /* 左寄せ */
margin-bottom:5px;             /* 次のコメントまでの間隔 */
margin-left:10%;
}
div.menu_title3{
font-weight:bold;                    /* 太字 (タイトル) */
}
div.menu_outline3 span{
font-weight:bold;                    /* 太字 (タイトル) */
}

 

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



( 2009/03/25 21:51 ) Category カスタマイズ | TB(0) | CM(0) | top↑

WCR Comic Viewerでブログに大きな漫画を載せる

以前【ブログでWCR Comic Viewerを使う】という記事の【大きな漫画を表示したい(HTMLをつかう)】の項目の中に、HTMLを使って漫画を表示する方法を紹介しました。

その時大きな漫画を描いていなかったので小さい画像でしか実験はしていなかったのですが、この間、描いた料理漫画が大きいので試しに作ってみました。
なぜか画面を開くと画像がずれているのですが、更新すると正しい位置に表示されます。
直接アドレスに飛ぶと問題がないのですが、リンクで移動するとずれるのが不思議です。
まぁ、見る分には支障がないのでこのままにしておきます。

Web comic 【料理漫画】まめ太郎のチョコっと豆知識
(別ウィンドウで開きます)

内容は前と変わっていないので一度見た人は見る必要はありませんが、
ブログでもこんなことが出来るんだなぁという豆知識です。
たまにブログで長編漫画を少しずつ更新している人がいますが、こういうのを使うとわざわざHPを用意しなくても綺麗にまとめておけるので便利だと思います。

これを利用してその内4コマではない漫画を描いてみたいと思っているのですが、コマ割りをろくにした事がない上に話がまとまらず、なかなか描けません。
でもこの間の料理漫画でコマ割が適当でも何とか漫画が描けるものだと思い、ちょっとやる気がでました。

一応今考えているのは、いつも描いているまよひが奇譚の関連作で
「びすけとみづはが出会う話」「びすけが人間の里に行く話」「ブラコンのヤンデレ妹の話」
のどれかです。

それと全然関係がないですが単発的に現代が舞台の学園物を4月ぐらいに描こうと考えています。

もう少し種類が増えたら、目次の欄に漫画Viewer用の項目を作ろうと思います。


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

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



( 2009/02/25 20:18 ) Category カスタマイズ | TB(0) | CM(0) | 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↑

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