うまく表示出来ない？陥りがちな間違いポイント
私が実際に「？」となった時や、よくやるミスについてです。
画像ファイルのリネーム間違い
これめっちゃやります。どうしても「01」とやりたくなるんですが、「1」です。この「0」をつけるだけで画像が表示されなくなるので注意が必要！
「ビューアは表示されているのに、画像だけが読み込まれない」という場合、十中八九画像ファイルのリネーム間違いです。
あとは…拡張子間違いくらい？
ファイルを設置する箇所の間違い
これも最初にやりがちなのですが、作品フォルダの中に「Comi_style.css」や「Comic.js」は入れてはいけません。
「作品フォルダのひとつ上の階層にcssとjsファイル、Imagesフォルダがある」と認識しておけば大丈夫です。
【応用】特定タイトルごとに細かく分けたいときの設置方法
ここからは応用というか、ややこしくやっていく方法です。
慣れてないよ～という方はやらないほうがいいです。混乱します多分。
私のサイトでは複数のシリーズ作品があるわけで、個人的にそれぞれに分けたかったんですね。
例えば高天原のマンガのビューアへのリンクアドレスは「https://maronica.work/comics/takamagahara/09/index.html」です。
細かく分類すると、ROOT（https://maronica.work/）＞マンガ全般（comics）＞高天原（takamagahara）＞09と、かなり深い層になってることがわかります。
これは自分でやっててわかったことなんですが、「comics」フォルダにcssやjsファイルを入れていても機能しません。
じゃあどこに入れてるんや？というと「takamagahara」フォルダです。
先程、「作品フォルダのひとつ上の階層にcssとjsファイル、Imagesフォルダがある」と覚えておけばいいと記載しましたが、これが理由です。
他にも天使ちゃんやどんつきなどのシリーズ作品ごとにフォルダをわけているものは、それぞれの作品名フォルダにcssとjsファイルを入れています。
図にするとこんな感じ。
それらのファイルは特別いじらなくてもいいので、大きな手間にはなりませんが、結構管理がややこしくなるので、あんまりおすすめはしない…かも。
【応用】フリースペースのカスタマイズ
フリースペースは、index.html内の以下の箇所に文字などを記載することで活用できます。
私はこのようにカスタマイズしています。
高天原用のHTMLはこんな感じで
どんつき用はこんなかんじ。
今見てて両方色々整えたいわねえ…とは思っていますが、まず基本的に「HTMLファイル」なので、
自動的に改行などは入りません。
いっぱい</br>（改行タグ）が入ってることがわかるかと思います。
あとはわかる方が見たらすぐわかるCSSが入っています。具体的には<div class=”box75″＞や＜div class=”box-title”＞などですね。
これはさっきの画像にもありますが、タイトル「Thanks for Reading!」部分とピンクの箱部分、BOOTHボタンなどの装飾を外部CSSファイルを読ませて見せてるわけです。
ではどこにCSSを書くのか？というと、このビューアの「Comi_style.css」です。
ビューアのデザインなどはすべてこのファイルに集約されているので、ここに書けば適用される、というわけです。
このBOXのCSSについては他所様のサイトから頂いたソースなのでモザイクをかけていますが、CSSファイルに追記する形でこのように記載しています。
基本的なCSSの仕組みさえわかっていれば簡単にできることなので、チャレンジする価値はあります…が、必ず元ファイルのバックアップは取っておきましょう！
