スマホ対応の告知サイトをサクッと作れるHTMLテンプレート「OSHIRASE」

アンソロジーや合同誌やイベントなどの告知サイトを、スマートフォンページやTwitter・Facebook・LINEなどのソーシャルメディアにも完全対応で、サクッと簡単に作ることができるHTMLテンプレートが「OSHIRASE」です。

OSHIRASE
http://monsier-oui.github.io/OSHIRASE/

◆テンプレートについて
OSHIRASEテンプレートでは、このデモページのような体裁でサイトを簡単に作ることが可能です。

テンプレートにはTwitterやFacebookのボタンも完備。

なお、スマートフォンページにも完全対応しているので、画面サイズを小さくしていくとこんな感じでLINEのアイコンが現れ、スマートフォンのサイトページイメージを確認できます。

OSHIRASEはアンソロジーや合同誌の告知サイトを作ることを想定しているため、Sampleページや……

Contactページも用意されています。なお、これらのフォームはあくまでデザインのみなので、コンテンツを使えるようにするには、「プログラム本体は自分で設置するかレンタルする必要がある」とのこと。

◆実際にサイトデザインを試してみた
まずはOSHIRASEサイトの「DOWNLOAD！」をクリック。

OSHIRASE-master.zipというファイルを好きな場所に保存します。

ダウンロードしたOSHIRASE-master.zipをExplzhなどで解凍するとフォルダの中にはこのようなファイルが用意されています。例えば、index.htmlというファイルをクリックすると……

既定のウェブブラウザで、プレーンな状態のテンプレートを確認することができます。

index.htmlをEmEditorなどのテキストエディターで開くとこんな感じ。各種タグが書き込まれており、このタグを利用することで好きなデザインに変更できるというわけです。

ここで、ヘッダーの画像として下の画像(g01.png)を用意して……

OSHIRASE-masterフォルダ内のimgフォルダの中にコピーします。

タグの「アイキャッチ」関連タグの所定の位置にg01.pngを指定してindex.htmlを上書き保存し、ウェブブラウザを更新すると……

こんな感じでg01.pngをヘッダーに埋めこむことができました。

次に、「コンテンツ」関連タグを……

項目・内容をこんな風に書き換えると……

簡単に内容を変更できました。なお、URLのリンクや太字などのタグもしっかり反映できました。

OSHIRASEは、HTMLに詳しくなくサイト作りを一度もしたことがない編集部員でも、簡単にサクッと告知サイトを構築することが可能でした。なお、自分好みのデザインで作成したページは、FC2などのFTP接続に対応したホームページスペースサービスで利用可能です。