SLUG'S UPPER title


FC2 共有テンプレート「SUP12」

SUP12(2カラム2色)12_1/12_2

sup12_1.jpg

sup12_2.jpg


  • 比較的小さな画像でヘッダを飾ることができます。
  • ヘッダ部分にカテゴリーを表示します。
  • プラグイン3をフロントページのみ記事上部に表示します。全ページに表示させたい場合は追記よりカスタマイズの詳細をご覧ください。
  • プラグイン1,2は色分けされます。色味を統一したい場合はどちらか一方をご使用ください。


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


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

UPDATE...

2014-09-30 HTML・CSS改正
TOP・BOTTOMをスムーススクロールに
右下に固定ページナビゲーションを追加
ヘッダ部分のカテゴリー表示がGoogle Chrome/Firefoxで崩れるようになってしまったのを修正。
マイナーチェンジ
全テンプレート共通修正箇所

カスタマイズ

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


透過PNG画像を重ねて円形にする為このテンプレートでの背景色の変更は不可です。


ヘッダの画像を差し替える

幅300px・高さ300pxの画像を用意し、ブログにアップロードします。CSS編集で以下の赤字部分をアップロードした画像のURLに書き換えます。
/*---------------------------------------------------------------------- Header Image width/height size cannot be changed ----------------------------------------------------------------------*/ #body_header .image{ width: 300px; height: 300px; background: url("http://blog-imgs-35.fc2.com/s/l/u/slugsupper/sup12_header_sample.jpg") no-repeat 50% 50%; float: left; } /*--------------------------------------------------------------------*/
W300*H300pxは表示最大サイズです。それより大きい画像は中央からトリミングされ小さい画像は中心に配置されます。


記事タイトルのオーナメントを差し替える

sup12_3.jpg幅80px・高さ80pxの画像を用意し、ブログにアップロードします。CSS編集で以下の赤字部分をアップロードした画像のURLに書き換えます。
.entry_header .icon{ width: 80px; height: 80px; background: url("http://blog-imgs-35.fc2.com/s/l/u/slugsupper/sup12_ornament_fff-trans.png") no-repeat 50% 50%; }
W80*H80pxは表示最大サイズです。それより大きい画像は中央からトリミングされ小さい画像は中心に配置されます。


デフォルトのカレンダー部分がいらない

HTML編集で以下の範囲を削除します。
<!--========== FIXED CALENDAR START (delete if unnecessary) //==========--> ・ ・ ・ <!--==========// FIXED CALENDAR END ==========-->
FIXED CALENDAR STARTと書かれた行からFIXED CALENDAR ENDまでを全て削除。


プラグイン3をフロントページ以外にも表示させる

こちらをご覧ください


ブログタイトルの文字サイズを調整する

sup12_5.jpg極端にブログタイトルが短いor長い場合は文字の大きさを調節してバランスを取っていただけると良。青字は上部からの距離です。文字を大きくした場合は青字を小さくして詰めて下さい。(CSS編集)
.blog_title{ margin: 50px 0 5px 0; font-size: 48px; ・ ・ ・ }


おまけ

sup12_4.jpg

黒い方(SUP12_1)のヘッダ画像はレーベル風にできます。HTML編集で以下の赤字部分(29行目辺り)を書き換えてください。
<img src="http://blog-imgs-35.fc2.com/s/l/u/slugsupper/trim_circle_ol_300_000-trans.png" border="0" />
LPレーベル CDレーベル
関連記事
Tweet Hatena

Newer Entryテンプレ追記

Older Entry申請中

Comments
 
こんばんわ。
いつもテンプレでお世話になってます。
このたびちょっとヒマだったので新しいブログを
こちらのテンプレでオープンしました。
お時間のあるとき遊びにきてください。

BREAKBEAT
http://madxbull.blog.fc2.com/
Re: タイトルなし 
了解っす
 
はじめまして。
こちらのテンプレに一目ぼれしてお借りしました。
ありがとうございます。
 
こんにちわ。こちらのテンプレートを愛用させてもらっています。
ところで先日からですが、google chromeでブログを見ると、
ヘッダ部分にカテゴリーを表示がおかしくなっていました。
あたしはHTMLの編集などはほとんどしてませんが、
原因は何か分かりませんか?
ちなみにIE10の場合はヘッダ部分にカテゴリー表示は正常でした。

google chromeっで閲覧した場合のスクリーンショットを貼っておきますね。
http://blog-imgs-47.fc2.com/a/s/h/ashslowgameblog/20130824065043759.jpg
Re: タイトルなし 
あ~ ホントですね リストのinside指定を無視しやがってますね‥ クローム何があったのだ。暫定的な対処としてCSS編集で以下青字部分を #body_header ul li.sub{...}より後に追加してください 。

#body_header ul li.sub{



}

@media screen and (-webkit-min-device-pixel-ratio:0){
#body_header ul li{
margin: 0 10px 5px 20px;
float: left;
}
#body_header ul li.sub{
margin: 0 10px 5px 0;
list-style: none;
}
}


クローム次バージョンまで様子見て戻らないようなら配布更新します。
ご報告ありがとうございました!


【追記】Ver.31.x~正常に表示されます
Re:SLUGさん 
今google chromeで確認したらヘッダ部分のカテゴリーを表示が正常な戻ってました。
http://blog-imgs-47.fc2.com/a/s/h/ashslowgameblog/201308241757317c5.jpg
一体なんだったのでしょうか。
表示は正常に戻ってますが、一応CSS編集の追記はしておいたほうがいいですか?
Re: Re:SLUGさん 
それは正常な頃のキャッシュでは。
うちのヘッダ↑もズレてるんで現状ズレてると思います。ので一応入れておいてください。
うちは次バージョンで表示が直るか確認する為放置しますがw お手数おかけします
Re:SLUGさん 
わかりました。 こちらでCSS編集しておきます。
素早い対応ありがとうございました。
ありがとうございます! 
こんばんわ。
いつもかっこいいテンプレをありがとうございます!

ヘッダ部分のカテゴリー表示がおかしくなっていましたが、
暫定的な対処法を試したところ、見事解決。

気持よく使わせていただきます。

今後ともよろしくお願い致します。
はじめまして! 
はじめまして。コチラのテンプレートを使わせて頂いているものですが、数週間前から、上部のカテゴリーに変な改行が行われてしまって困っています。長すぎるという事ではないようで、FC2に問い合せた所、このテンプーレートに不具合が見られるという回答を頂きました。お手数ですが、解明していただけますでしょうか?
Re: はじめまして! 
Chromeでですよね うちのヘッダもおかしくなってるんで気にはしてました。今ちょっと忙殺ぎみで修正作業にかかれないんで申し訳ありませんがしばらくお待ちいただくか、ヘッダにリスト表示がないテンプレートに変更していただけますか。すみませんご迷惑をおかけします<(_ _)>
 
そこまでパソコンに詳しくないので、待ちたいと思います。宜しくお願いします。
Re: タイトルなし 
修正しましたので再ダウンロードしてください
  • テンプレート配布記事では使用に関してのコメントを優先しますのでご質問・ご報告以外はスルーする傾向にあります。
  • テンプレートへの感想は共有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