DIRECT EDITION

SUP17d（2カラム1種・3カラム1種）17d_2colum/17d_3colum

• SUP17にインスタントフォト（チェキ）を飾ります
• IEではサンプル画像と表示が異なります。（※閲覧に支障はありません）

テンプレご利用案内的なもの

公開後しばらくはソースの修正を頻繁に行います。お手数をおかけしますがこまめに最終更新日をご確認頂き、最新状態でのダウンロードをお願いします<(_ _)>　不具合などお気付きの点がございましたらコメ欄にてご指摘くださると幸いです。

【最終更新日：2013-11-20】

UPDATE...

2013-11-20 JavaScript追加

TOP・BOTTOMをスムーススクロールに

2013-09-20 HTML・CSS改正

Google Chromeでフッターの表示が崩れるようになったのを修正

全テンプレート共通修正箇所

---

適用方法

• 初めに共有テンプレート追加より「SUP17」をダウンロードしておきます。「SUP17」をストックしておきたい場合は任意のテンプレートを複製しリネームしてください。
• テンプレートの編集で「SUP17」（もしくは複製した任意のテンプレート）を以下のソースに入れ換えます。

DOWNLOAD　※右クリック＞対象を保存＞テキストエディタで開く
Right click and choose "Save target as" or "Save link as".
SUP17d_2colum [HTML] [CSS]
SUP17d_3colum [HTML] [CSS]

カスタマイズ

※カスタマイズは自力で。質問にはお答えいたしませんのでご了承ください。

写真・テープ・テキストを変更します。それぞれサンプルに該当する番号が当てられています。(1)の変更は　画像（.image_1）テープ（.scotch_tape_1）テキスト(1)を書き換えることになります。

インスタントフォトの画像を差し替える

幅180px・高さ240pxの画像を3つ用意し、ブログにアップロードします。CSS編集で以下の赤字部分（CSS末尾にあります）をアップロードした画像のURLに書き換えます。

/*====================================================================== 　　　　　INSTAX IMAGE W180 x H240 px Upload 3 pics ======================================================================*/ .image_1{ background: #000 url("http://blog-imgs-45.fc2.com/s/l/u/slugsupper/sup17d_sample1.jpg") no-repeat 50% 50%; } .image_2{ background: #000 url("http://blog-imgs-45.fc2.com/s/l/u/slugsupper/sup17d_sample2.jpg") no-repeat 50% 50%; } .image_3{ background: #000 url("http://blog-imgs-45.fc2.com/s/l/u/slugsupper/sup17d_sample3.jpg") no-repeat 50% 50%; }

画像サイズは固定です。変更は出来ません。

写真を貼るスコッチテープを差し替える

CSS編集で以下の赤字部分（CSS末尾にあります）を上部記載の文字列（青字部分）に書き換えます。

/*========================================================================================== 　　　　　SCOTCH TAPE "LOVE","COOL","HOT","LOL","GR8","UBER","SNAPSHOT","MOE","NONE" ==========================================================================================*/ .scotch_tape_1{ background: url("http://blog-imgs-45.fc2.com/s/l/u/slugsupper/scotch_tape_NONE-trans.png") no-repeat 50% 0; } .scotch_tape_2{ background: url("http://blog-imgs-45.fc2.com/s/l/u/slugsupper/scotch_tape_HOT-trans.png") no-repeat 50% 0; } .scotch_tape_3{ background: url("http://blog-imgs-45.fc2.com/s/l/u/slugsupper/scotch_tape_LOVE-trans.png") no-repeat 50% 0; }

テープは9種類用意されています。"NONE"は文字無し（empty）です。

写真下部のショートテキストを書き換える

HTML編集で以下の赤字部分を任意のテキストに書き換えます。1行以内に収まるようにしてください。テキストがいらない場合は赤字部分を削除します。

<!--========== INSTAX MINI PHOTO //==========--> ・ ・ ・ (1) Put your short text here ・ ・ ・ (2) Put your short text here ・ ・ ・ (3) Put your short text here ・ ・ ・ <!--==========// INSTAX MINI PHOTO ==========-->

その他はSUP17と同じです。※このテンプレートSUP17dではヘッダ画像のオプションセレクタはありません

関連記事

• FC2 テンプレート「DE_SUP17d」
• FC2 共有テンプレート「SUP17」
• FC2 テンプレート「DE_SUP04d」
• FC2 テンプレート「DE_SUP16d」
• FC2 共有テンプレート「SUP15」