とある夢女の雑記ブログ

随時更新:京アニへの支援記事

2018/12/13

創作サイト向けテンプレート『 #note 』

創作サイト向けのテンプレート #note

二次創作サイト用のテンプレート『 #Note 』です。

Noteという名前の通りデザイン自体はシンプルですが、付箋っぽい見出しだったり、Google Fontsを利用した手書き風の筆記体表示などをさせています。

背景の素材は『 GIRLY DROP 』様より。テンプレート利用での許可を頂いておりますので、そのまま利用できます。

※18禁を取り扱う場合はテンプレート自体の利用は問題ありませんが、背景素材は他の利用可能な素材サイト様をお探しください。(NEO HIMEISM様は利用できます)

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

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

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

サンプルサイト

ダウンロードはこちら

 

 

(2019.02.07)

IEでの不具合を修正しました。

テンプレートを新しくDLしてCSSを上書き保存するか、すでに他の部分の色を変えている方は、一番下の方に修正方法を記載しているので御覧ください。お手数おかけします。

 

スポンサーリンク

テキストページ

スポンサーリンク

イラストページ

贅沢に1枚1Pでも問題ありません。

※小説・イラストのコンテンツページに限り、クレジット表記はサイト内のどこかにリンクを貼っていただければ削除して構いません。

スポンサーリンク

装飾関係

文字の強調

ボックスデザイン

作品の注意マーク

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

カスタマイズ

一部ですがテンプレートのカスタマイズ方法。

サイトタイトル(h1)の筆記体表示について

英語では手書き風の筆記体で表示されますが、日本語では明朝体で表示されます。

日本語表記でも問題はないのですが、筆記体がいい場合はローマ字などに置き換えてみてください。

また、文字が長いと少し窮屈になるかと思うので、お好みでフォントサイズを修正してください。

style.css

タブレット・スマホはまた別でサイズを指定しているので探してください。

見出し(h2)の文字位置について

文字によっては中央のはずが少し上の方に位置がずれたりするので(フォントの問題)、無理やり気味ですが専用の修正コードを入れています。

筆記体が上に伸びているかとか下に伸びているかの影響なのですが、気になる方は class やCSSの padding を調整してみてください。

index.html

style.css

CSSはPC・タブレット・スマホの各所にあるのでお好みで調整どうぞ。

チェック柄やストライプ柄の背景について

画像ではなくCSSで指定しているのでお好きな色に変更できます。

ただ、16進数(#000000)ではなく、RGB6桁(rgba(0,0,0,1))で指定しています。

RGBへの変換はこちらのサイト様が便利です。

チェック背景

.5の部分は透過の数字です。1になると無透過、0になると透過します。

ストライプ背景

名前変換機能について

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

名前変換の個数を友人分含めて3つ置いていますが、苗字と名前の2つでも問題ありません。

友人分の苗字+名前を含めた変換4つ用に横2列のレイアウトをご用意しています。

style.css(スマホ用の項目)

下の張り替えてくださいのコードと上のコードを入れ替えます。(元のは削除でOKです)

これで横幅が長めの入力フォーム2列になります。

スポンサーリンク

IE(Internet Explorer)で表示させた時の不具合(2/7追記)

レイアウトが崩れる場合

どうやらIEの場合、HTML5の<main>という要素がインライン要素だそうで、それによって不具合がおきるようです。

対処法としては、以下の行を「全体のレイアウト」の項目に新しく追加してください。

ボタンの背景色がでない場合

background-colorで色を指定します。

 

ダウンロードはこちら

 

スポンサーリンク

随時更新:京アニへの支援記事

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

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