azu / oshirase

同人誌の告知サイト向けHTMLテンプレート

OSHIRASE

アンソロジーや合同誌、オンリーイベントなどの告知サイトのためのHTMLテンプレートです。

##使い方

1. ここからダウンロードする

• index.html をテキストエディタで開いて必要な情報を書く
  ※ソースはガンガン削ったり足したりしてオッケーです。叩き台として使ってください。
• サーバにアップロードする

###用意する画像ファイル

• 表紙
• イメージイラスト(横幅2000px推奨)
• 内容サンプル(小さすぎるとジャギるので600px四方くらい推奨)
• バナー
• フライヤー(あれば)

##作業上の注意 ファイルの編集には必ずテキストエディタ(メモ帳、ビルダーはNG)を使ってください。普段テキストエディタを使わない方へのオススメは、Windowsならサクラエディタ、MacならCotEditor。

##動作確認環境

• Google Chrome 35
• iPhone Safari

##ワンポイント解説 ###画像ファイルの指定について アイキャッチ、サンプルはimg要素ではなく、div要素の背景画像として指定します。たとえばimgフォルダのimage.jpgを表示させたいなら、style="background-image: url('img/image.jpg');"と書きます。

###フォントについて

一部の要素にGoogle Fontsを利用しています。他のフォントに変えたい場合は、Google FontsからCSSファイルを呼び出すコードと、style.cssで指定しているfont-familyプロパティを修正してください。

###OGPについて

OGPは、ざっくり言えばTwitterやFacebookに投稿したときにサムネイルやページ概要を自動で表示してくれる機能です。詳しくは以下の記事が参考になると思います。

OGP設定がしてあれば10分で設定完了！ツイートをより魅力的にしてくれる「Twitterカード」の設定方法｜Tips*Blog｜株式会社コプロシステム

Twitterへの申請は承認までちょっと時間がかかる(1日〜数日?くらい?)こともあるので、申請だけでも先にしておいたほうがよさそうです。

もちろん、いらない!ということであればヘッダの記述ごと削除していただいて構いません。

###ソーシャルメディアアイコンについて

こちらから以下のアイコンをお借りして同梱しています。

• pixiv
• novelist
• TINAMI
• Twitter
• Facebook
• tumblr
• ピアプロ
• ニコニコ動画
• soundcloud

他のサービスのアイコンが必要であれば追加でダウンロードして、style.cssの984行目あたりにクラスを追加してください。

.icon-XXX { /* XXX=サービスの名前 */
  background-image: url(../img/icons/[email protected]);
}

そして、アイコンを追加したいところに下記を追加します。

<i class="icon-social icon-XXX"></i>

##License This software is released under the MIT License.

###同梱物のライセンス

• Normalize.css - MIT License
• Media Queries Mixins for Sass - MIT License
• ミニ・ソーシャル・アイコン - Public Domain

##更新履歴 ###2014/6/26

• Android端末にも対応した(はず…)

###2014/6/22

• リリース