テンプレート05

update

2017.5.11　iPhone等での表示崩れを修正しました (ver1.1)
2017.3.20　テンプレート公開

about template

こちらは、WEBサイト用テンプレートです。使用規約に則り、楽しく使用してください。中々力技なコーディングですがかわいく作れたと思います。レスポンシブ対応していますが、PCサイト向きです。

column

<section class="column">内の<p></p>はこのようなります。リンク案内や注釈など記したいときに。 <span>装飾1</span>　<mark>装飾2</mark> これらはcolumn_2と共通です。

<p class="center"></p>で真ん中寄せができます。

column_2

<section class="column_2">内の<p></p>は2列表示になります。

link_sample link_sample link_sample link_sample link_sample link_sample

download

使用規約をご確認後、DLしてください。
template_05_1.1.zip (2017.5.11)

※修正以前のzipをDL済みの方はcssを入れ替えるだけでも大丈夫です。
t05.css

sozai

草花画像はアンティークパブリックドメイン画像素材さまよりお借りし、加工しました。再配布可とのことなのでzip内に同梱してあります。

google fonts

1. Miss Fajardose … <h1>左上のAlphabet
2. Marcellus SC … <h2>各見出し部分
3. さわらび明朝(Sawarabi Minch) … 本文

三種のGoogle fontsを使用しています。1、2は部分使いなのでそれ程ですが、3は全体に適応させているので重くなる際は外してください。

logo alphabet

上記の通り、左上のAlphabetはGoogle fontsにて表示しています。サイト名の頭文字でも推しのイニシャルでも好きなものを入れてください。文字によっては表示位置がずれるので適宜修正してください。

Jquery

※ディスプレイの横幅1001px以上のとき

スクロール装飾に「jQuery custom content scroller」を使用しています。デザイン上、レフト/ライトカラムそれぞれにスクロールバーが出るので、邪魔にならない感じに。スクロールバーの表示位置を、左は左に、右は右に出るように設定してあります。別途jsファイルのDLが必要です。導入方法はこちら