PROFILEなまえをここにいれます。
ここにプロフィールを入れます。サンプルテキスト。
タグ解説
イラストのブロックと、文字ブロックの２カラム構成になっています。それぞれのブロックには、回り込み(float)の指定と、幅の指定が入っています。左のイラストの場合は、class="fl w25"です。flは左に回り込み(float:left)、w25は幅25%になるスタイルで、間に半角スペースを挟む事で２つ指定しています。
ここの文字ブロックは、class="fr w70"です。frは右に回り込み(float:right)、w70は幅70%です。
２カラムを囲む一番外側のブロックには、class="clear"指定を入れておいて下さい。これがないと前のブロックに次のブロックの内容が流れ込んでしまいます。PCで見た場合にいい感じに見えても、小さな端末で崩れるので入れておいた方がいいでしょう。
イラストの利用規約
当ページのイラストは、イラスト素材サイトのコムマールさんの著作物です。弊社テンプレート内でご利用頂く場合のみ、イラストの再梱包が許可されています。コムマールさんではオリジナルイラストもオーダーできます。
※イラスト横の小さなサイン(Komalu)はコムマールさんの著作表示箇所なので消さないで下さい。
「Komalu」のサインを消したい場合や、弊社テンプレート以外での使用についてはコムマールさんのサイトの利用規約をご確認下さい。
イラストをご自身の写真に入れ替えたりなどは自由に行なって下さい。
もちろん、イラストを使わない場合はコムマールさんの著作は不要です。
PROFILEなまえをここにいれます。
XXXX年生まれ。
ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。
こちらのブロックは、イラストブロックが、class="fr w25"となり、文字ブロックが、class="fl w70"です。回り込み(float)の指定を逆にしただけです。
Transformアニメーション加工
※以下の画像のアニメーションは、DL直後では表示されません。
inview.jsというファイルが必要です。ファイルは簡単に入手できます。
※IE10以上で動作します。IE9以下だと挙動がおかしくなる(微妙に動いたり見えなかったりする)ので、一通りリセット(固定表示)しています。リセットスタイルはhead内に入っています。
アニメーションのスタイルは、cssフォルダのinview.cssで調整できます。
自作アニメーションを作って適用する場合、jquery.inview_set.jsへの追加も忘れず行って下さい。
※アニメーションを使わず、通常の固定表示にする場合。
html上部にある、
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
の１行を削除。
続いて、html下部にある、
<!--パララックス用ファイル読み込み-->
<script src="js/jquery.inview.js"></script>
<script src="js/jquery.inview_set.js"></script>
の３行を削除。
続いて、cssフォルダのstyle.css冒頭にある、
/*inview.cssの読み込み*/
@import url(inview.css);
の2行を削除して下さい。
transform1
アニメーションにしたいブロックなどに、class="transform1"とすると、このブロックの動きになります。
XXXX年生まれ。
ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。
transform2
アニメーションにしたいブロックなどに、class="transform2"とすると、このブロックの動きになります。
XXXX年生まれ。
ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。
up
アニメーションにしたいブロックなどに、class="up"とすると、このブロックの動きになります。
XXXX年生まれ。
ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。
left
アニメーションにしたいブロックなどに、class="left"とすると、このブロックの動きになります。
XXXX年生まれ。
ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。
right
アニメーションにしたいブロックなどに、class="right"とすると、このブロックの動きになります。
XXXX年生まれ。
ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。