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="https://blog-imgs-35.fc2.com/s/l/u/slugsupper/trim_circle_ol_300_000-trans.png" border="0" />
LPレーベル CDレーベル
関連記事
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: タイトルなし
修正しましたので再ダウンロードしてください
    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