SLUG'S UPPER title

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

SUP07(2カラム2種・3カラム1種) 07_2colum / 07_2colum_wide / 07_3colum

sup07-1.jpg

sup07-2.jpg


  • プラグイン3をフロントページのみ記事上部に表示します。全ページに表示させたい場合は追記よりカスタマイズの詳細をご覧ください。
  • プラグイン1,2は色分けされます。色味を統一したい場合はどちらか一方をご使用ください(2カラムのみ可能)。
  • 一応レスポンシブです。W780px以下の画面では1カラムになります。


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


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

UPDATE...

2023-05-13 HTML・CSS改正
アドレス変更に伴い読み込まれていなかったGoogle Fontsの指定箇所を訂正
カラムをレスポンシブに
モダンブラウザのほぼ完全普及に合わせ画像で補っていた部分をCSS記述に置き換え
その他細部をマイナーモデルチェンジ
2013-11-17 JavaScript追加
TOP・BOTTOMをスムーススクロールに
2013-09-25 HTML・CSS改正
3カラムの記事幅を560px→580pxに拡張
カレンダーを追加
右下に固定ページナビゲーションを追加
マイナーチェンジ
全テンプレート共通修正箇所
2012-02-03 HTML・CSS改正
コメント周り等全体的にマイナーチェンジ
FC2既定の拍手ボタンとソーシャルボタンを横並びに
CSSの重複記述等ミス修正他ソース改善
2011-06-22 CSS修正
z-indexの指定が抜けていたのを修正(特に問題なさそうですが気持ち悪い方は再DLを。※極最初にDLしていただいた十数名のみ対象です すみません)

誰得な黒ボール紙。需要ないの分かってるけどシールが貼りたかったんだよ!
  _  ∩ ( ゚∀゚)彡 シール!シール!  ⊂彡

カスタマイズ

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


16進数カラーコードの生成はサイドバーのカラーピッカーHex Color Codeをご利用下さい。


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

こちらをご覧ください


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

こちらをご覧ください。


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

sup07-3.jpg シール枠に載せる為、長いタイトル名を考慮してブログタイトルのフォントサイズがデフォルトでは小さめになっています。(※左画像はW780px以下画面での1カラム時です)


短いタイトルで大きく表示させたい場合、CSS編集で以下の赤字部分を任意のサイズに書き換えます。

.blog_title {
	width: 100%;
	height: 100%;
	font-size: 40px;
	font-family: 'Arial Black','Meiryo UI','MS UI Gothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
	letter-spacing: -1px;
}
旧Ver.は以下のセレクタになります。

.blog_title h1 {
	・
	font-size: 28px;
	・
	・
}


ヘッダー部分に地模様として入っている黒字タイトルのサイズは以下赤字部分。

#body_bg {
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #000;
	font-size: 150px;
	font-weight: 900;
	・
	・
	position: absolute;
}


ソース分かってる方は上記のヘッダー背景部分を任意の文字列や画像に置き換えていただくのも好改造です。

sup07-4.jpg

sup07-5.jpg

画像の場合は背景透過pngを#body_bgセレクタに背景画像として設定します。参考画像の王冠と渦巻きのスタイル指定を置いておきます。そのままお使い頂いても構いません。CSS編集で#body_bgをまるっと差し替え、HTML編集で<div id="body_bg">~</div>内の<%blog_name>を削除することで地模様のタイトル文字を画像に変更できます。


HTML編集で以下の赤字部分を削除

<div id="body_bg"><%blog_name></div>


CSS編集で#body_bgを差し替え
王冠

#body_bg {
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("https://blog-imgs-34.fc2.com/s/l/u/slugsupper/bg_crown-trans.png") no-repeat;
	opacity: 0.4;
	-moz-opacity: 0.4;
	filter :alpha(opacity=40);
	position: absolute;
}


渦巻き

#body_bg {
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("https://blog-imgs-34.fc2.com/s/l/u/slugsupper/bg_spiral-trans.png") no-repeat;
	opacity: 0.4;
	-moz-opacity: 0.4;
	filter :alpha(opacity=40);
	position: absolute;
}


青字部分は透過率の設定です。透過させない場合は削除してください。1を不透明としてパーセンテージで設定します。80%の濃度で透過する場合は以下のようになります。

	opacity: 0.8;
	-moz-opacity: 0.8;
	filter :alpha(opacity=80);
関連記事
Comments
SUP07_3columのIE8でのエラー表示に付いて。
SUP07_3columを使わせていただいています。

SUP07_3columをIE8で表示するとエラーになるのですが。
対策がありましたら教えていただきたいのですが。
よろしくお願いします。

Web ページ エラーの詳細

ユーザー エージェント: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; YTB720; GTB7.1; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
タイムスタンプ: Mon, 8 Aug 2011 14:53:28 UTC


メッセージ: 'null' は Null またはオブジェクトではありません。
ライン: 2
文字: 1
コード: 0
URI: http://blog-imgs-37-origin.fc2.com/s/l/u/slugsupper/event_script.js
Re: SUP07_3columのIE8でのエラー表示に付いて。
IEはプレビュー画面等(FC2のプログラム動作)で当テンプレートに限らずエラーを吐きますが、適用中の通常表示でのエラーはないと思いますが‥。当ブログに適用しても出ませんし、使用されてる方のブログをいくつかIE8で拝見させていただきましたがエラーは出てませんね。JavaScriptプログラムを追加されている場合はサポート対象外なのでご了承ください。jsが原因だと思われる場合、jsの記述順等で回避できる場合もあるようなのでお試しいただくか、jquery.jsとevent_script.jsの行を削除して下さい。SUP07の場合は月の英表記が無くなるだけで使用に問題はありませんので。
    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