とある夢女の雑記ブログ

随時更新:京アニへの支援方法一覧

創作サイト向けテンプレート『 #バラ薔薇に散る 』

二次創作サイト用のテンプレート『 #バラ薔薇に散る 』です。(再度求む:ネーミングセンス)

レスポンシブデザインなので、同じURLでPC・タブレット・スマホからの閲覧が可能です。(PCからの場合、幅を縮めてみたら確認できます)

色変え・背景画像の差し替えなどはご自由にどうぞ。

使用言語
HTML5 / CSS3 / jQuery(※jQueryはローカルでは動かないので、サーバーに上げて確認してください/リンク先のスクロールなど)
文字の装飾(使用のWebフォント)
Google FontsNoto Serif SC(日本語)
文字コード
UTF-8 / 既存のテキストエディタでは文字化けする可能性があるので、無料でも利用できる『 TeraPad 』などで編集してください。
その他
検索避け済み / DLファイルの名前変換は未実装 / CDN経由でのLightbox2実装済み / 広告がでる無料サーバーでは、レイアウトが崩れる場合があります

サンプルサイト

ダウンロードはこちら

スポンサーリンク

装飾関係

ヘッダー画像

枠線はCSSでつけるようにしています。

枠線がいらなければ下のコードのようにclass=”h_bg”は削除してください。

小説ページにも載せたい場合は、サイト名や小説タイトルの上にこのタグを入れると表示されます。

※見出しのアイコンでNEO HIMEISM様の画像を加工したものを利用しているので、ヘッダー画像を差し替えた場合でもリンク表記はそのままにしてください。

文字の強調

イラストアイコン(サムネイル)

<li>~</li>はいくらでも増やせます。

<a>に色々と文字がついていますが、Lightbox2のタグです。今回はCDN経由にしているので、「元の画像のURL」を修正するだけで利用可能です。

イラストをページに直接表示

直接出す場合は、class=”illust_full”です。

アイコンのときのようにLightbox2を利用したい場合、<img>の部分を以下のタグに変更します。

作品の注意マーク

名前変換機能について

サンプルサイトでは機能しますが、ダウンロード用のファイルにはシステムをいれていませんので、『 ドリーム小説変換ツール 』様を御覧ください。

今回は名前変換の個数を2つで作っています。

テキスト本文ページ

<body>にid=”novel”を追加するのを忘れずに。(タイトル部分の余白を微調整しています。)

※<head>までのタグを省略しています。

メインカラーの変更

グレーがメインのテーマですが、css>design.cssで自由に色の変更ができます。

幅などのサイズを調整したい場合はcss>style.cssで変更してください。

ダウンロードはこちら

スポンサーリンク

随時更新:京アニへの支援方法一覧

  • ブログランキング・にほんブログ村へ
スポンサーリンク