ここにもタイトルを入れてください

ゲームロゴ

中級者向けサイトテンプレート

HTMLとCSSに少し慣れてきた方を対象に作られたサイトテンプレートです。
JavaScriptのフレームワーク Vue.js を利用して作られています。
少しプログラムチックにコーディングできるのが特徴です。
ゲームの特設ページのような、1ページで完結させるサイトを作ること想定して設計しています。

動作保証ブラウザは Microsoft Edge / Chrome / FireFox です。
Internet Explorer では、一部レイアウトが崩れる可能性があります。

また、このサイトの他の項目には、基本的な機能、注意事項や利用規約なども書いているので、全てに目を通しておいていただけると幸いです。

今後の予定(要望の実装)

  • 特にありません。何か要望があれば作った人に何か言ってください

更新履歴

2018/01/31
モバイルフレンドリーになりました
2018/01/28
初公開

あらすじSTORY

wixsiteなど、簡単にモダンなサイトを作れるサービスをみることが増えてきた昨今。
モダンなサイトのテンプレートってなかなか見ないよなあ。
と思い、作ってみました。

通常、環境構築をすることでやっと作ることが出来る SPA (Single Page Application) みたいなサイトを、
特に何も設定すること無く作れるように! というのを目的にしています。

なるべく初心者でも触りやすいように……と思いながら設計しましたが、
それでもとっつきにくい部分があるかもしれません。
そこんところはテヘペロって感じで、よろしくお願いいたします。

利用規約

  • ページ下部の Designed by ののの茶屋 は出来れば消さないでおいてください
  • 本テンプレートを使った際に発生したトラブルには責任を負いかねます
  • 以下、お好きにどうぞ

なるべく使いやすくするために

多くの方々からいただいた要望にはなるべく答えようと考えています。
こんなレイアウトが簡単に実装できるように!
とか、
こういう処理をしたい!
みたいなことがあればお気軽にお声掛けくださいませ。。。

システムSYSTEM

あらかじめ用意されたCSSファイルを参考にしてHTMLのclassを書き換えることで
アレコレとアレンジが出来るようになっています。
default.cssには最低限のものしか入れていない(つもり)ので、自身の力で拡張することも可能です。

基本要素

div要素にboxというクラスを付与してあげることで、この文章の後ろに出ているような丸みを帯びた白い背景が表示されます。

リンクの文字はこんな感じで、マウスオーバーすると下線がふわっと出てくるのと同時に、色が変わるようになっています。

h2タグはページ上部のシステム、h3タグはこの項目の最初に書いている基本要素のようなレイアウトになります。

フォントについて

Googleが提供している Google Fontsさわらびゴシック を、
一部のアイコンには fontawesome を利用しています。
フォントの種類やサイズなどはCSSにあるhtml, bodyから変更できます。

リストボックス

2018/XX/XX
dlタグにlist-boxクラスを付与することで、こういう感じのリストを作ることが出来ます。
2018/XX/XX
更新履歴を作ることを想定としています。
2018/XX/XX
dtタグが日付を、ddタグが説明の役割を担っています。
2018/XX/XX
CSSにある dl.list-box の height を変更することで、表示する高さも変更できます。
2018/XX/XX
こんな感じでたくさん項目が増えても、自動的にスクロールバーが出てきて、良い感じにしてくれます。文章が長くなっても改行されます。横にスクロールというわけではないです。。。
2018/XX/XX
こんな感じでたくさん項目が増えても、自動的にスクロールバーが出てきて、良い感じにしてくれます。文章が長くなっても改行されます。横にスクロールというわけではないです。。。
2018/XX/XX
こんな感じでたくさん項目が増えても、自動的にスクロールバーが出てきて、良い感じにしてくれます。文章が長くなっても改行されます。横にスクロールというわけではないです。。。

画面遷移

transitionタグのnameを変更することで、画面遷移時の挙動を変更することが出来ます。
デフォルトではright-slide(左からふわっと)が選択されていますが、他に

  • fade(ふわっと変わる)
  • up-slide(上がっていく)
  • down-slide(下がっていく)
  • left-slide(右からふわっと)

を用意しています。
これらのアニメーションはCSSで作られています。頑張ったら遷移も自作できると思います。

モバイルフレンドリー

画面の横幅が1110px未満ならば、モバイル向けの表示になります。
モバイル向けに html を設定する必要はありません。(多分)
詳しいレイアウトの設定は default-mobile.css を見てください。

ギャラリーGALERRY

サムネイルとプレビュー

画像は以下のようなサムネイル表示で並べることも可能です。
サムネイルをクリックすることでプレビューすることが出来ます。

1段目はサムネイルと同じ画像がプレビューされ、2段目はサムネイルとは異なる画像がプレビューされます。
ネタバレになるであろうピクチャはモザイク付きのサムネイルと差し替える。といったことができます。

画像表示のための特殊タグ

先述のプレビューには、このサイトテンプレート独自の img-pv というタグを使っています。
<img-pv thumb="サムネイル表示したい画像" @view="showImage('プレビューで表示したい画像')"></img-pv>
といった形で入力しています。
詳しくはソースコードを直接読んでみてください。

ダウンロードDOWNLOAD

以下のボタンをクリックすることで、このテンプレートをダウンロードすることが出来ます。
ゲームの配布時には、必要スペックや容量などを書いておくと良いかもしれませんね。