アンソロジーや合同誌、オンリーイベントなどの告知サイトのためのHTMLテンプレートです。デモページはこちら
- ここからダウンロードする
- index.html をテキストエディタで開いて必要な情報を書く
※ソースはガンガン削ったり足したりしてオッケーです。叩き台として使ってください。 - サーバにアップロードする
- 表紙
- イメージイラスト(横幅2000px推奨)
- 内容サンプル(小さすぎるとジャギるので600px四方くらい推奨)
- バナー
- フライヤー(あれば)
ファイルの編集には必ずテキストエディタ(メモ帳、ビルダーはNG)を使ってください。普段テキストエディタを使わない方へのオススメは、Windowsならサクラエディタ、MacならCotEditor。
- Firefox 35
- Google Chrome 40
- iPhone Safari
アイキャッチ、サンプルはimg要素ではなく、div要素の背景画像として指定します。たとえばimgフォルダのimage.jpgを表示させたいなら、style="background-image: url('img/image.jpg');"
と書きます。
一部の要素にGoogle Fontsを利用しています。他のフォントに変えたい場合は、Google FontsからCSSファイルを呼び出すコードと、style.css
で指定しているfont-family
プロパティを修正してください。
OGPは、ざっくり言えばTwitterやFacebookに投稿したときにサムネイルやページ概要を自動で表示してくれる機能です。詳しくは以下の記事が参考になると思います。
OGP設定がしてあれば10分で設定完了!ツイートをより魅力的にしてくれる「Twitterカード」の設定方法|Tips*Blog|株式会社コプロシステム
Twitterへの申請は承認までちょっと時間がかかる(1日〜数日?くらい?)こともあるので、申請だけでも先にしておいたほうがよさそうです。
もちろん、いらない!ということであればヘッダの記述ごと削除していただいて構いません。
こちらから以下のアイコンをお借りして同梱しています。
- pixiv
- novelist
- TINAMI
- tumblr
- ピアプロ
- ニコニコ動画
- soundcloud
他のサービスのアイコンが必要であれば追加でダウンロードして、style.css
の984行目あたりにクラスを追加してください。
.icon-XXX { /* XXX=サービスの名前 */
background-image: url(../img/icons/XXX@2x.png);
}
そして、アイコンを追加したいところに下記を追加します。
<i class="icon-social icon-XXX"></i>
同人サイトによくあるEnterページ的なやつです。Cookieに訪問フラグを記憶し、2回め以降の訪問では表示しません。この機能が不要であれば、下記をindex.html
から削除してください。
<div id="enter" class="center">
<p></p>
<p><button type="button" id="button-enter">Enter</button></p>
</div>
Enterボタンをバナーなどの画像に変更したい場合は、img要素にid="button-enter"
を追加してください。
This software is released under the MIT License.
- Normalize.css - MIT License
- Media Queries Mixins for Sass - MIT License
- ミニ・ソーシャル・アイコン - Public Domain
- Enterページ的なやつを追加実装
- Android端末にも対応した(はず…)
- リリース