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ではヘッダ画像のオプションセレクタはありません
関連記事
Tweet Hatena

Newer Entryランキングと記事拍手撤去しました

Older EntryFC2 共有テンプレート「SUP17」

Comments
 
テンプレートを探してこちら様にたどり着きました。
あふれるセンスにとてもいいと思い使用したくてたまらないのですが
ちょっと記事の文字が見づらくて・・・
SUP06のように見やすいといいかなっと
新作期待して応援しております。
  • テンプレート配布記事では使用に関してのコメントを優先しますのでご質問・ご報告以外はスルーする傾向にあります。
  • テンプレートへの感想は共有DLページや拍手、ツイッターでいただければ有り難いです<(_ _)>
  • 各テンプレート記事に明記しておりますが カスタマイズについての質問はお受けしておりません のでご留意ください。
Follow
Hex Color Code
Add Spice
Audinst DAC付ヘッドホンアンプ HUD-mx1 【正規輸入品】ワコム Intuos Comic マンガ・イラスト制作用モデル Mサイズ 【新型番】2015年1月モデル CTH-680/S3Logitec HDDスタンド USB3.0接続 4TB対応 ガチャベイ HDDコピー機能付き LHR-2BDPU3 [フラストレーションフリーパッケージ (FFP)]FILCO Majestouch TenKeyPad USBテンキーパッド独CherryMX茶軸スイッチ ブラック FKB22MBTranscend SSD 1TB 2.5インチ SATA3 6Gb/s MLC採用 3年保証 TS1TSSD370S【日本正規代理店品】 Jabra ジャブラ Bluetooth4.0 モノラルヘッドセット 日本語音声ガイダンス対応 Jabra MINI ブラック MINI-U-BKZ-LIGHT LEDデスクライト Z-108LED B ブラック E26LED電球 昼白色Bauhutte (バウヒュッテ) ノートパソコン タブレット用 膝上パソコンデスク BLT-72 PC スマート ボード [ベッドでもソファでも、自由にパソコンを使える ラップトップデスク テーブル]BESTEK AC 充電器 USB コンセント 2in1 急速充電 アダプター 30W 最大6A USB 4ポート バッテリー チャージャー BTCPS017 (黒)【国内正規品】harman/kardon AURA ワイヤレススピーカー Bluetooth対応 ブラック HKAURAAPBLKJN

ESET ファミリー セキュリティ 3年版(最新版)

Hot Item