【WEBコミックランキング】ランキング用自作バナーです。最近FC2のimageタグを知りました。イラストを扱うタグです。FeedGrapherもサムネイルを作ってくれるサービスですが、こちらはアップロードした画像がすべて選択されるため、このブログでは使えないです。今回も個人的なメモです。top↑イラスト・漫画ブログのカスタマイズお手軽なレンタルブログ(fc2)でイラスト・漫画ブログをどのようにカスタマイズすればいいのか考えてみました。最近目標とするブログのカスタマイズがようやく出来ました。「はじめに」の上に「通常メニュー」「妖怪タグ」のタグが増えています。設置するの大変でした。タグ切り替えメニューのクッキー付きを使っています。GW頃に使う予定でカスタマイズしていたのですが間に合ってよかったです。肝心の絵が出来ていないのが問題ですが。はてな支店この記事でイラストブログの利点について書かれていますが、コメント欄で反対意見も数多く出ています。このことでこれだけ賛否両論があるということはイラストブログに関心を寄せる人のでしょう。このブログもイラストブログの作り方を調べるために訪れる人もいるようですし、このような情報は共有してノウハウを蓄えたほうがいいのではないかと思います。小説ブログではブログで小説!などでカスタマイズの研究をしているようです。至らぬところもあるでしょうが、漫画・イラストを見やすいように自分なりに考えてこのブログをカスタマイズをしています。FC2ブログなので他で同じことが出来るかは分からないです。した方が見やすいという意見があればどうぞおっしゃってください。自分の考えとしては重要視するものとしないものがあってもいいと思います。・スクリプトを使っていると見易いが、切っていても見るのに差支えがないようにする。・あくまでメインは「イラスト・漫画」。これを中心に閲覧しやすくする。「らくがき」「雑記」関係は負担をかけてまで閲覧性を高くはしない。この考えの下に、こんなカスタマイズをしています。1ポップアップするビューワーの導入2目次を用意。top↑ブログで漫画用目次を作るたまにブログをカスタマイズしたくなるのですが最近4コマ漫画目次を少々改造しました。いたおさんの運営するFC2ブログのテンプレート工房の記事を参考にしています。感謝!ブログのサイトマップの作り方ブログサイトマップの記事表示順序を逆(古い順)にするナビゲーション付きブログサイトマップこの記事のおかげで自分好みの漫画用目次を自動で作れるようになりました。『target="_blank"』を足して別ウィンドが開くようにしています。FC2ブログでしか使えませんが私と同じようなものでよろしければどうぞ参考にしてください。上記の記事を一通り読んでから使ったほうがいいです。私自身はHTMLしか分からないので勘で変更しています。バックアップを取ってから自己責任で。【やり方を見る】アーカイブページを目次に変更します。テンプレのHTMLの中にある<!--▼サイトマップ▼-->で囲っている部分を差し替え。赤字のカテゴリーは自分で設定してください。target="_blank">'+A[k].innerHTML+'</a></li>';I+='</ol>';}document.getElementById('maplist').innerHTML=I;--></script><!--/titlelist_area--><!--▲サイトマップ▲-->CSSはこんな感じで設定していますでもこの辺は好みの問題なので自分のブログに合わせてかえて下さい。Viewerを使う】という記事の【大きな漫画を表示したい(HTMLをつかう)】の項目の中に、HTMLを使って漫画を表示する方法を紹介しました。その時大きな漫画を描いていなかったので小さい画像でしか実験はしていなかったのですが、この間、描いた料理漫画が大きいので試しに作ってみました。画面を開くと画像がずれているのですが、更新すると正しい位置に表示されます。直接アドレスに飛ぶと問題がないのですが、リンクで移動するとずれるのが不思議です。見る分には支障がないのでこのままにしておきます。【料理漫画】まめ太郎のチョコっと豆知識(別ウィンドウで開きます)内容は前と変わっていないので一度見た人は見る必要はありませんが、ブログでもこんなことが出来るんだなぁという豆知識です。ブログで長編漫画を少しずつ更新している人がいますが、こういうのを使うとわざわざHPを用意しなくても綺麗にまとめておけるので便利だと思います。これを利用してその内4コマではない漫画を描いてみたいと思っているのですが、コマ割りをろくにした事がない上に話がまとまらず、なかなか描けません。この間の料理漫画でコマ割が適当でも何とか漫画が描けるものだと思い、ちょっとやる気がでました。一応今考えているのは、いつも描いているまよひが奇譚の関連作で「びすけとみづはが出会う話」「びすけが人間の里に行く話」「ブラコンのヤンデレ妹の話」のどれかです。それと全然関係がないですが単発的に現代が舞台の学園物を4月ぐらいに描こうと考えています。種類が増えたら、目次の欄に漫画Viewer用の項目を作ろうと思います。(うちのビューワを使った漫画です)元のサイトにはHPで使うことを前提として説明しているので、ブログ用の設置の仕方の覚書をまとめておこうと思います。ブログ初心者の覚書なので信頼しすぎないように。(本当にこれでよいのか分かりませんが、とりあえず問題なく動きます)といってもHPよりもすごく簡単です。まどろっこしいのが嫌いな人のために物凄く簡単に要約します。ブログの記事に下の水色の箱の中の文字を貼り付けて赤字のところだけ書き換えてください黄色の行(<li>~</li>で閉じている列)はビューワで表示する画像のリストです。画像のアドレスさえ入れればOKです。必要に応じて好きなだけ増やしてください。リストの最初の画像にすべての画像サイズを自動的に合わせているようなので画像サイズはそろえて下さい。href="http://二番目の画像のアドレス">2ページ</a></li></ul>以上で説明終了です。これで終わるのも何なので以下細かい説明をしていきます。興味のある方だけどうぞ。src="http://viewer.webcomicranking.com/js/wcrcv.js"></script>この文でJavaScriptを呼び出しています。残りの部分はHTMLで書かれたリストです。これからの説明は長いのでそれぞれクリックで開くようにしてます。必要なところだけ読んでください。リストの作り方の簡単な説明リストの作り方はHTMLで表記します。分からない人はコピペして赤字の部分を変えて下さい。(詳しく知りたい人は<UL>タグについてググって下さい)黄色い行は必要な枚数だけ増やしてください。id="wcrcv_list">~</ul>......リスト全体の開始と終わりを知らせるタグ<li>~</li>......リストの内容をはさむタグ。この間に画像へのリンクを入れる。ちなみに<a>~</a>で挟んだ文字がJavaScriptが動かない場合表示されるので、ここでリストを作っておくととても親切です。あと、<li>の行を沢山作るのが面倒な人は簡略化したリストの作り方もあります。Viewerの説明を読んでください。ここで拡張子がbmpになっている人は、ちょっと悔い改めたほうがいいです。title="lastpage=数字">に変更してください。数字の部分にはそのタグの画像から最後のページまでの枚数を入れてください。01.png~05.pngなら『title="lastpage=5"』05.png~15.pngなら『title="lastpage=10"』になります。これをするとJavaScriptが動かない場合、中途半端なリンクが表示されるので注意。ブログだとあまり使えないかもしれません。私の使っているFC2ブログだと、ファイル名を揃えていても画像のあるサーバーがたまに違います。そこを注意してください。ちなみに私が作ったリストは、こんな感じです。</li></ul>理由はよく分かりませんが、lastpage=9で9枚目の画像が表示されません。href="http://blog-imgs-26.fc2.com/*****/10.png">10</a>だと本当は17までしか表示されないと思うのですが18まで表示されています。その辺は臨機応変にビューワに合わせましょう。簡単なカスタマイズ別に設定しなくても使い勝手は結構いいと思うので通常はブログに合わせた色にさえすればいいと思います。Viewerからの転載です。元のページに書いてあるのでしなくてもいい気がしますが一応。元のページにビューワの動作設定の表があるのでそれを参考に以下のスクリプトを書き換えて最初のスクリプトの下に貼ってください。value】の文字列は必要なだけ増やしてください。nameは表の『名前』の欄にある【page_clickable】とか【scroll】に置き換えvalueは『設定可能な値』の欄【true】とか【'left'】を、nameに合わせて選んでください。'#504139'};</script>今までのを全部合わせるとこんな感じです何か文章を入れるときはリストの前か後ろかに書いてください。href="http://二番目の画像のアドレスを入れる">番号を入れる</a></li></ul>基本的に下の2つは補足なので読まなくてもいいです。完全カスタマイズかなり自由に配置できます。必要な要素は全部書かないといけないので、要素を忘れないように注意。Viewer内の≫完全カスタマイズ例を別ウィンドウで表示でソースをコピーして改造するのがいいと思います。私はtableタグを使って配置を調整しています。この辺はHTMLの知識があれば割と簡単に出来ると思います。逆に言えば、これをしたければHTMLを少しかじらなきゃ難しいです。一日で覚えられるのでHTML講座を読んで勉強してください。<div>にidをつけたらその要素が表示されるようです。それとオレンジ部分は自分で設定してください。それと一部自分用に要素を色々加えています。このタグそのまま貼り付ければいいかも。id="wcrcv_canvas"></div>これで全体を囲む。id="wcrcv_menu"></div>の間に挟んでください。大きな漫画を表示したい(HTMLをつかう)私がいつも描いているのは4コマ漫画なので以上のもので困らないのですが通常のストーリー漫画を載せたい場合、ブログでは狭いと思います。他のブログは分かりませんが、FC2ブログでは『htmlファイル』がアップロードできます。この『htmlファイル』で漫画用のページを作ればサイドが無くなる為、そのページのみ広く画像を置けます。赤字の部分を書き換えて、黄色の行は必要なだけ増やし、拡張子をhtmlにして保存してください。<!--~-->のタグはコメント領域なので表示されません。コメント領域で指示している場所に必要なものを挟んでください。全部出来たらブログにアップロードをして、カラムでも記事でも何でもいいのでファイルへのリンクを作って下さい。リンクをクリックするとページが表示されます。オレンジ部分は自分で設定してください。これで必要なところを記入しただけだと文字の大きさも違うしそっけないページになると思います。細かく調整したい人はHTMLを調べて下さい。簡単なので一日あれば十分使えるようになります。それが面倒だけどブログのデザインをそのまま使いたい人はCSSを設定してください。それとCSSだけちょっと説明しておきます。自ブログの何も無いところで右クリック→ソースの表示を選択これでメモ帳が開くのでこんな感じのタグを探します。href="http://画像のアドレスを入れる2">番号を入れる2</a></li>ざっとですが以上です。Viewerの説明をじっくり読んだほうが分かりやすいかも。私自身、そんなに詳しいほうではないですし、間違いなどがある可能性が十分あるため、この記事は自己責任でご利用ください。ご指摘アドバイスなどしていただけたら嬉しいです。