2023/09/19 / 2019/08/20

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

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

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

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

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

サンプルサイト

ダウンロードはこちら

同人向けレンタルサーバー一覧

【2024年度版】二次創作や同人サイトにオススメのレンタルサーバーを特徴別にまとめてみた（WordPress対応）

装飾関係

ヘッダー画像

<p><img src="ヘッダー画像のURL" class="h_bg"></p>

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

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

<p><img src="ヘッダー画像のURL"></p>

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

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

文字の強調

<span class="bold">強調したい文字</span>
<p class="bold">強調したい文字</p>

イラストアイコン（サムネイル）

<ul class="illust_icon">
	<li><a class="example-image-link" href="元の画像のURL" target="_blank" data-lightbox="example-set" data-title="ここに画像の説明"><img src="元の画像のURL"></a></li>
</ul>

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

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

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

<ul class="illust_full">
	<li><img src="元の画像のURL"></li>
</ul>

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

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

<a class="example-image-link" href="元の画像のURL" target="_blank" data-lightbox="example-set" data-title="ここに画像の説明"><img src="元の画像のURL"></a>

作品の注意マーク

<li class="s"><a href="#">リンク文字</a></li>
<li class="r18"><a href="#">リンク文字</a></li>

名前変換機能について

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

変換の方法はこちら

【DreamMaker編】自作した夢小説サイトの名前変換機能の付け方

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

テキスト本文ページ

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

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

<!-- テキストページの場合、bodyにid="novel"をつけます -->
<body id="novel">

<div id="wrapper">

	<header>

		<!--小説タイトル-->
		<h1>タイトル</h1>

	</header>

	<main>

		<!-- ここからテキスト本文 -->

		<p>テキスト用サンプルページです。bodyにid="novel"をつけるのを忘れずに。</p>

		<!-- テキスト本文//ここまで -->

	</main><!--メインコンテンツ//ここまで-->

<footer>

<p class="written">written by 管理人名 or XXXX.XX.XX など</p>

<ul>
	<!-- 著作権表示//他のページにある場合は削除可能 -->
	<li><a href="https://upanda.life/" target="_blank">UPANDA</a></li>
	<!-- ページトップへ戻る -->
	<li><a href="サイトのURL" target="_blank">TOP</a></li>
</ul>

</footer><!--footer-->

</div><!-- wrapper -->

</body>