SLUG'S UPPER title

FC2 テンプレート「DE_SUP17d」

DIRECT EDITION

SUP17d(2カラム1種・3カラム1種)17d_2colum/17d_3colum

sup17d_1.jpg

sup17d_2.jpg


  • 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]


カスタマイズ

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


sup17d_3.jpg写真・テープ・テキストを変更します。それぞれサンプルに該当する番号が当てられています。(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ではヘッダ画像のオプションセレクタはありません
関連記事
Comments
テンプレートを探してこちら様にたどり着きました。
あふれるセンスにとてもいいと思い使用したくてたまらないのですが
ちょっと記事の文字が見づらくて・・・
SUP06のように見やすいといいかなっと
新作期待して応援しております。
    ATTENTION PLEASE
  • 各テンプレート記事に明記しておりますが カスタマイズについての質問はお受けしておりません 。テンプレート記事へのコメントは表示不具合に関するご質問ご報告以外、原則返信は致しませんのでご了承ください。他意はありません。
  • テンプレートへの感想は共有DLページや拍手、ツイッターでいただければ有り難いです<(_ _)>


 

Follow
Hex Color Code
Add Spice
Audinst DAC付ヘッドホンアンプ HUD-mx1 【正規輸入品】Wacom Cintiq Pro 24 ペンモデル ブラック TDTK-2420/K0 Logitec HDDスタンド USB3.0接続 4TB対応 ガチャベイ HDDコピー機能付き LHR-2BDPU3 [フラストレーションフリーパッケージ (FFP)]Transcend SSD 1TB 2.5インチ SATA3 6Gb/s MLC採用 3年保証 TS1TSSD370SJabra TALK USB ブラック ワイヤレス Bluetooth イヤホン ヘッドセット (モノラル 簡単操作) Z-LIGHT LEDデスクライト ブラック E26LED

Hot Item
RALD ラルド ボルトレスラック4D 4段RMX-002 マジックボックス L 折りたたみ 蓋付 ブラックカシオ Gショック G-SHOCK GAW-100B-7AJF

JINS Glasses


TOP

PREV

NEXT

COMMENT

BOTTOM