Bootstrapで同人サイトは簡単に作れるの?やってみたよ。

2014年11月13日

Bootstrapという簡単にレスポンシブサイトが作れるのがあるときいて、ずっとぐりぐりいじってました。
注意:素人が検証用に作ったので、すべての環境での動作保障は致しかねます。参考にどうぞ。

Bootstrap · The world’s most popular mobile-first and responsive front-end framework.・・・話題のCSSフレームワーク

WCR Comic Viewer – 超簡単ウェブコミックビューワ・・・WCRさんが提供する簡単に設置が可能なJavaScriptで動作するwebコミックビューワです。デフォルトの状態で設置をするだけならスクリプトの知識は一切不要ですが、カスタムも可能なので今回はそれをちょっと突っ込んでやってみました

HTML5アプリ作ろうぜ!(11):Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4) – @IT

体験後に持った私の感想は↓

  • HTMLのソースがある程度読めないと難しい。手打ちでHTML作ってる人ならわかると思う。中級者向けだなと触ってて思った。
  • ある程度HTMLタグがわかる人なら「Bootstrap」にあるSource codeをダウンロードしてコピペで何とかなる。レスポンシブの振り分けめんどクセ!の私には手間が省けるのはありがたいです。
  • 製作時間:今回、基本のソースコピペで作ってみましたが1日がかりでした。
  • こんなかんじです。

    Source codeに基本ソースが入ってます。コレの色替えするぐらいでぐっと違うとおもいます。
    Source codeに基本ソースが入ってます。コレの色替えするぐらいでぐっと違うし時短になる。

    で、自分としては「web漫画がメインのサイト」用にカスタムできないと使う理由がないので、今回「WCR Comic Viewer」をbootstrapに仕込むというのが可能かやってみました。

    やってみた結果、親和性は高そう、と感じました。
    WCRコミックスクリプトを本家サーバーから呼び出したページサンプルはこちら(別窓)
    注意:現在、https://~のURLからの呼び出しにWCRコミックスクリプトが対応していないため、上記リンクではWEBコミック本体のJavascriptが動いていません。

    wcr.jsをダウンロードして入れてどうなるかも試しました。

    備考

    WCR Comic Viewer はこのサーバ上にスクリプトファイルを置いたまま使用する事を念頭に作成されていますが、使用許諾に反しない限り、スクリプトをダウンロードして自分のサーバにアップして使用しても構いません。
    WCR Comic Viewer を設置できるのは、1 ページにつき 1 個までです。複数のビューワを設置する事は出来ません。
    (http://viewer.webcomicranking.com/より引用)

    ・設置方法>完全カスタマイズ
    こちらを参考にして自分のサイト用にjsの中身もいじってjsフォルダ配下に入れました。
    記述はこんな感じ。↓

    サンプルコードだと下にjsを入れてるみたいなのでそれに倣って入れました。
    サンプルコードだと下にjsを入れてるみたいなのでそれに倣って入れました。

    ロードのボタンもbootsrapのに変えてみました。

    今がこれが精一杯っぽい
    テスト動作ページはこちら(別窓)

    と、いうわけでbootsrapで同人サイトも作れるようです。
    本家のテンプレコピペでレスポンシブできるのはいいですね。
    CGI呼び出しはまた今度時間あったらやってみます。

    ●。PR:レンタルサーバー

     ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
    このサイトは、
    パワフルで高速なピュアSSDクラウドレンタルサーバー
    MixHost

    を利用しています。
    ↑日本の会社。大人向けOKで、当サイト管理人がメインで動かしてます。
     ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄

    さくらのレンタルサーバ スタンダード
    ↑安定性とセキュリティを気にする初心者なら、おすすめ。独自仕様も多いが、初めてのサイト作りなら気にならないです。

     ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄

    ★月額100円(税抜)~/WordPress簡単インストール! ロリポップ!レンタルサーバー ★
    ↑とにかく安く、かわいいURLではじめたいなら

     ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
    独自SSLが無料!クラウド型高速レンタルサーバーが月額126円(税抜)から!スターサーバー
    ↑広告なしの無料レンタルサーバーも併設。

     ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
    【MINIPOPレンタルサーバー】
    月額250円からの格安レンタルサーバーにもかかわらず、MySQL,POSTGRESSQL,PHP,CGI,WEBメール等が利用できる高機能レンタルサーバーです。大人向け運営OK

     ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
    月額59円からのレンタルサーバーミニム
    ↑契約は3か月分からになります。有限会社ネットグルーヴワークス運営

     ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
    WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』
    ↑来訪者多くて安定したwordpress運営したい人向け

     ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
    アニメ、ゲーム、コミックなどの創作(同人)活動を応援します!Just-Size.Networks
    ↑大人同人は申請制で利用可能*2019年10月運営会社が「セブンアーチザン」へ変更になっています。
    セブンアーチザンは国内最安級の99YENレンタルサーバー
    やっている会社です


    **独自ドメインで本格的にやりたいならあわせて↓**
    年間920円(税抜)からの格安ドメイン取得サービス─ムームードメイン─

    【早い者勝ち!】.com/.net/.jp ドメイン取るならお名前.com

    ●。スポンサーリンク













    ●。