とある夢女の雑記ブログ

2019/08/20

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

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

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

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

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

サンプルサイト

ダウンロードはこちら

スポンサーリンク

装飾関係

ヘッダー画像

<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>

名前変換機能について

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

今回は名前変換の個数を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>

メインカラーの変更

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

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

ダウンロードはこちら

スポンサーリンク

グッズ譲渡や同人活動をしている方へ
スマホで簡単!確定申告やってみよう

\ LINE@はじめました / 友だち追加 更新したらお知らせします

コメントや誤字脱字報告などお気軽にどうぞ*
悪口系は弾かれて届かない場合があります。
その他お問い合わせはメールフォームへお願いします。

\ follow me! /ブログの最新情報をTwitterで配信中!フォローしてね!ただのツイ廃アカウント(SNSメモ
スポンサーリンク