SLUG'S UPPER title


FC2 Template 'SUPx' Test Page

<!-- FC2 共有テンプレート「SUP01」跡地 -->
sup01_sample1.jpg sup01_sample2.jpg sup01_sample3.jpg


改訂版であるSUP06の配布に伴い公開を終了しました。ありがとうございました。SUP06は01よりソース自体が改善されておりますので、現在SUP01をご使用いただいている方は06への移行をお勧めします。


 

SUPx共通仕様(HTML・CSSの基礎が分かってる人向け/質問不可)

■主要パーツのセレクタ名は共通しています。ブログタイトル「.blog_title」 記事本文「.entry_body」等
■記事本文の<img>タグに「class="left"」を追加すると左回りこみ、「class="right"」を追加すると右回り込みに対応します。


float_sample.jpg align="left"ではなくclass="left"を指定して回り込ませると画像と文字の距離が整形されます。ただし当テンプレート以外ではCSSで指定されない限り回り込みません。(この記述を使用した後、他所のテンプレに変更された時はCSSでプロパティを追加してください)


■本文の文字が小さいな、と感じる方はCSS編集で以下のサイズを大きくして下さい。
.entry_body{


color: #000;
font-size: 12px;
font-family: メイリオ,Verdana,"MS Pゴシック","ヒラギノ角ゴ Pro W3",Osaka,Sans-Serif;


}
個人的には 14pxが読み易くデザイン性を損なわない文字サイズ (←14px)だと思います。


文字の大きさは%で指定するのがベターだと分かってますが、デザイン優先なので表示崩れを最低限は回避できないとマズいんでやむなく。最近のブラウザは表示の拡大縮小が容易なので開き直っております すみません。


また何か気付いたら足します。
 

<!-- 以下SUP01元記事追記(改) -->


というわけで画像作ったけど使いどころないから配るかシリーズ。今回はシャッター。以前はアイコンサイトに背景画像として放流してたんだけど、もう個人サイトの主流がホームページじゃなくなってしまったんで画像だけ配ってもなぁ、てことでブログテンプレ。ゴミ箱が溜まりまくる前にちょっとずつうpれればなーと思います。てか以前のブログでSafariうぜぇぇぇぇぇ!て記事を書いてましたが今回はIE6うぜぇぇぇ!(でもウザさはSafariの勝ち)。もう8が出てんだから早く過去の人になって欲しいんだけどまだまだシェアがデカくて無視できないのが現実。透過PNGが表示出来ないので透かそうと思ったらCSS八苦(いい誤変換だ)CSSハックで何とかしたりするんですが、セルごとに色変えたりすると一々ハック記述せないかんし、タグによっちゃ効かんし、なんかもうあがー!!となってたら神スクリプトktkr。IE5、6で透過PNGを表示させるjs。PNG画像のファイル名を「ファイル名-trans.png」にしてjs読み込み記述を突っ込むだけ。ダウンロードも出来るお。とりあえず透過png画像が透過されずに表示される人は是非モダンブラウザにアップグレードを。Safari?そんな子いたっけ。もうこいつカバーしてたら我慢所がいっぱいすぎてうpる気になんないので表示確認するのやめました(なんという駄目人間)‥‥あんまりにもあんまりだったらそっと教えて下さい‥ <自分で見ろ。あとお役立ちはHtml Validatorアドオン。火狐は使える子。
関連記事
Tweet Hatena

Newer Entryウカム背中歩き

Older Entrypino

Comments
コメントテスト 
コメントの表示見本があった方がいいと今更気付いたのでサンプルカキコ
画像について 
テンプレートお借りしています。とてもスタイリッシュでかっこよくて気にいています!ありがとうございます^^ それで、トップの画像を自分でカスタマイズできますよね?何時間もテンプレートの書式でどうにかやろうと悩んでいましたが…ついにわかりませんでした。トップの画像(w960px h200px)はどのように変えるか、教えていただけないでしょうか?
はじめまして♪ 
かっこいいテンプレートですね♪
SLUGさんの大ファンです♪
使用させていただきます♪
Re: はじめまして♪ 
ご使用ありがとです(^^
管理人のみ閲覧できます 
このコメントは管理人のみ閲覧できます
Re: ブログ記事中の画像pxサイズについて 
ちょっとご質問の主旨が理解できないのですが‥ 
>元画像を880pxに粗くして
ということは撮影画像は幅880pxより小さいということですか?ブラウザ(ディスプレイ)の表示解像度は72dpi(/96dpi)なので通常ネットにアップロードする画像は画像ソフト等で72dpiに解像度を落とします。その際画像の縦横を任意のパーセンテージで変換する事で画質を下げることなく画像サイズを拡大できます。拝見させていただきましたが300dpiでアップロードされているようなので、ユーザビリティの点からも解像度を下げてアップロードされる事をお奨めします。縮小された画像のコントラストが強く見えるのは圧縮されて色数が減っているからです。そのような画像がお好みでしたら画像ソフトで変更・加工されるのが良いと思われます。HTMLで縮小表示も出来ますが閲覧環境に依存するのでお奨めできません。縮小画像が粗く表示されるブラウザもあります。カスタマイズについては原則お答えいたしておりませんのでご了承下さい。
使わせていただきました~ 
ほんとにどれもかっこよくて感動してます。


体調不良でなかなか自分の画像を用意できなかったのですが、なんとか仕上げました。。。v-356

ようやく公開できるようになって嬉しいですっ

好みのデザインというのは眺めているだけで幸せな気分になれるものですね。。。

本当にありがとうございますv-344

他の記事も楽しく拝見しています♪

また来ま~~~す!
Re: 使わせていただきました~ 
どもども ご使用ありがとです
一目ぼれして 
一目ぼれして、Sup12_2のテンプレを使わせて頂いています❤
FC2ブログを始めてすぐに、SLUGさんの作品に巡り合うことができて
幸運でした!

そこで、、、ちょっとお尋ねしたい事がありまして、
質問なのですが…

Linkwithinを本文末尾に設置したい場合、
どの部分にLinkwithinタグを挿入するのが
ベストでしょうか?

よそのパーツを組み込むというのが
不躾な質問でしたら申し訳ございません><

お時間おありの時に、ご回答頂けましたら嬉しいです♪
どうぞ宜しくお願い致します。
 
初めまして!
このテンプレに一目惚れしたんですがどうやってダウンロードするのかが分かりません。。。
Re: タイトルなし 
ここは表示サンプルページなんでどのテンプレなのか分かりませんが

共有テンプレートならブログ管理画面にログイン>テンプレートの設定>共有テンプレート追加(PC用)>作者:slugsupper もしくは 名前:テンプレート名(SUPx)で検索

直接配布(Direct Editionとなっているもの)は記事内にあるHTMLとCSSをPCに保存しテキストエディター(メモ帳等)で開いて中身をコピー、テンプレートの設定でペースト
  • テンプレート配布記事では使用に関してのコメントを優先しますのでご質問・ご報告以外はスルーする傾向にあります。
  • テンプレートへの感想は共有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