SLUG'S UPPER title


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

SUP04(2カラム2色)04_1/04_2

テンプレートサムネイル

テンプレートサムネイル


  • プラグイン3をフロントページのみ記事上部に表示します。全ページに表示させたい場合は追記よりカスタマイズの詳細をご覧ください。
  • プラグイン1,2はサイドのラインにより色分けされます。色味を統一したい場合はどちらか一方をご使用ください。


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


サーバ番号の無いブログアドレス(http://hogehoge.blog.fc2.com)の「Comment:件数」表示のバグ回避


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

UPDATE...

2015-08-31 HTML・CSS改正
TOP・BOTTOMをスムーススクロールに
全テンプレート共通修正箇所
2012-07-28 HTML・CSS改正
本文内リスト表示の不具合を修正
右下に固定ページナビゲーションを追加
FC2既定の拍手ボタンとソーシャルボタンを横並びに
CSSの重複記述等ミス修正他ソース改善
マイナーチェンジ
2012-01-06 CSS修正
FC2検索バー利用時にカレンダーの表示がズレる不具合を修正
2011-10-01 HTML・CSS改正
モデルチェンジ
2011-06-09 HTML修正
プラグイン設定での行揃え機能が無効になっていたのを修正
記事のカテゴリー表示に親カテゴリーを追加
2011-06-04 HTML訂正
Archiveのtitleミスを訂正(再DL or 書き換えをお願いします)
2011-05-11 CSS調整
月間アーカイブのログが多量である場合、デフォルトカレンダーのMonthly Archiveで画面内に表示できなかったのをスクロール表示させるように改正

カスタマイズ

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


ヘッダに画像を置かない

CSS編集で以下の赤字部分を削除します。
#body_header{ ・ ・ background: url("http://blog-imgs-37.fc2.com/s/l/u/slugsupper/sup04_header_sample.jpg") no-repeat; ・ ・ }


ヘッダを単色カラーにする

CSS編集で上記の赤字部分を以下のように書き換えます。例では黒色で塗りつぶされます。
#body_header{ ・ ・ background-color: #000000 ・ ・ }


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

幅960pxの画像を用意し、ブログにアップロードします。 CSS編集で以下の赤字部分をアップロードした画像のURLに書き換えます。
#body_header{ ・ height: 200px; ←ヘッダ高さ 変更可 ・ background: url("アップロードした画像のURL") no-repeat; ・ ・ }
画像の高さは任意です。画像の高さに合わせて青字部分を書き換えて下さい。デフォルトでは200pxになっています。


タイトル文字の色を変更する

ヘッダ画像に合わせてタイトルを見やすい色に変更して下さい。 CSS編集で以下の赤字部分を任意の色に書き換えます。例では黄色のタイトルになります。
#body_header a{ ・ ・ color: #ffff00; ・ ・ }
旧Ver.は以下のセレクタになります。
.blog_title a:link,.blog_title a:visited{ color: #ffff00; text-decoration: none; }


タイトル文字を非表示にする

CSS編集で以下のセレクタに「visibility: hidden;」を追加します。
.blog_title{ ・ ・ visibility: hidden; }


説明文の色を変更する

ヘッダ画像に合わせて説明文を見やすい色に変更して下さい。 CSS編集で以下の赤字部分を任意の色に書き換えます。例では黄色の説明文になります。
.blog_description{ ・ color: #ffff00; ・ }
16進数カラーコードの生成はサイドバーのカラーピッカーをご利用下さい。WEBセーフカラーはVeign Color Reference Guide [PDF]等参照のこと


説明文を非表示にする

CSS編集で以下のセレクタに「visibility: hidden;」を追加します。
.blog_description{ ・ ・ visibility: hidden; }


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

こちらをご覧ください


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

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

Newer Entryテンプレ追記

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

Comments
No title 
読者の方からFirefoxで見たら、崩れていて見にくいと指摘があったんですが
わたしのブラウザはIEなので、その崩れ方がよくわからなくて。
もし本当に崩れるのであれば修正お願いしますTT
Re: No title 
サンプル画像はFirefoxのスクリーンショットです。Win・Mac共に表示確認しておりますが当方の環境では問題が見当たりませんので対応できません。
管理人のみ閲覧できます 
このコメントは管理人のみ閲覧できます
Re: No title 
拝見しましたがうちでは崩れませんね。気になるようでしたらテーブルで組まれている表示誤差の少ないテンプレートの使用をお奨めします。あとフッターのコピーライトやスポンサー広告のリンクを見えなくしては駄目ですよ。使用を続けられる場合は元に戻してください。
管理人のみ閲覧できます 
このコメントは管理人のみ閲覧できます
管理人のみ閲覧できます 
このコメントは管理人のみ閲覧できます
管理人のみ閲覧できます 
このコメントは管理人のみ閲覧できます
管理人のみ閲覧できます 
このコメントは管理人のみ閲覧できます
管理人のみ閲覧できます 
このコメントは管理人のみ閲覧できます
Re: タイトルなし 
IE7・8共に正常に表示されることを確認後公開しております。当方で問題は確認できません。
ご自身が本文・プラグイン等で書き込まれた記述に不備が無いか、改造された場合はCSSの閉じ忘れ等がないか合わせてご確認ください。
日付について 
お忙しいところ申し訳ありません。
日付で12日や27日といった特定の日付のみ少し左が開いてしまうのですが、これを修正する方法はありますでしょうか?
ご教示よろしくお願い致します(゚0゚)(。_。)ペコッ
Re: 日付について 
仕様です。
どうしても左を揃えたいなら.entry_dayのtext-align: をleftに。真ん中ならcenter。
右のラインで揃えるのがデザイン的には優秀だと思いますけどね(^^
等幅フォントに置き換えても回避できると思います。その再は各OSにインストールされてるフォントの種類にご注意ください。
( v^-゚)有難う御座いました♪ 
確かに右のラインで揃えるのが1番ですね^^
自分の理想のテンプレなので大切に使っていきます。
お忙しい中ご教示有難う御座いました^^
ブログ 最終更新日表示 
お忙しい中度々申し訳ありません。。。

次のスクリプトを使用して最終更新日を表示したかったのですが、ブログを表示した日付になってしまいます。
これを最新記事の日付を表示できるようにしたいのですがどのようにしたらいいでしょうか?

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">

<!--
document.write("最終更新日:",document.lastModified)
//-->
</SCRIPT>


ご教示よろしくお願い致します(゚0゚)(。_。)ペコッ

Re: ブログ 最終更新日表示 
つ「テンプレご利用案内的なもの」Q&A3つ目
管理人のみ閲覧できます 
このコメントは管理人のみ閲覧できます
失礼しました 
よく読まずにお伺いしてしまいました…
申し訳ありませんでした。
Re: お世話になります。 
ご使用ありがとうございます(^^ これは2カラムだからこのデザインなんですよ。3カラム想定してたらこんなんにしませんw 3カラムも想定して作るものは最初から一緒に配布します。後から○○の3カラムバージョン出ました、なんてことはうちでは無いのでご了承下さい(^^ゞ
Re: 失礼しました 
いえいえ(^^
管理人のみ閲覧できます 
このコメントは管理人のみ閲覧できます
Re: お忙しいところすみません。。。 
「Comment:0」が「本文:0」になる現象はうちのテンプレだけで起こるわけではないので、サーバ番号の無いブログ特有のエラーかと思ってるのですが‥。「Comment」を「<%template_comment>」もしくは「コメント」と日本語に書き換えれば回避できるかもしれません。当方が使用しているサーバではそのような現象が起きないので確認してから提言することができません、ご了承ください。あと 利用案内にも書いてますが質問コメントは公開設定でお願いします。
すみませんでした! 
わからないhtmlを目を皿にしてみてみたら、

<%template_body>

ってなってたので、そこを直してみたらできました!
ありがとうございました。

次回からは公開コメントにさせていただきますね。
失礼しました。
Re: すみませんでした! 
よかったです(^^ 気になってた部分なのですが当方では確認ができないので注釈を付けれずにおりました。対処法として記事にさせていただきます。こちらこそご報告ありがとうございました。
フリーエリアを表示させたいのですが 
使わせて頂いております。
写真ブログしてますので、黒背景で、タイトル画像がそこそこ大きくて簡単に差し替えもでき、幅の広いテンプレを探していました。
まぁ、夏や女子カメラなら白背景が好まれると思いますが。

・・・で、プラグイン3のフリーエリアを表示させるには、どこを見れば良いのでしょうか?

Re: フリーエリアを表示させたいのですが 
「プラグインの設定」でフリーエリアをプラグイン3に設定するだけですよ
フリーエリアを表示させたいのですが 
やや、これまたテンプレートのHTML編集で面倒な事をしないといけないのかと思っておりましたが、FC2のプラグイン管理画面で簡単にポチッって選択するだけだったとは!
全くもって知りませんでしたorz
助かりました。
ありがとうございました。
Re: フリーエリアを表示させたいのですが 
テンプレ触るのはデザイン改変する時だけですので(^^
ヘッダー画像について 
素晴らしいデザインでとても気に入って使わせて頂いています。
表題のヘッダー部の画像なのですが、自分で描いたイラストを表示させておりますが、
Firefox(8.0)では問題なく表示しておりますが、IE9で見てみたところ、ブログタイトルのみで
あとは真っ黒に表示されております。 なにか表示させる方法がありましたら、ご教授頂きたいのですが・・・ よろしくお願い致します。
Re: ヘッダー画像について 
CSSを拝見させていただきましたが書き換え時にミスをされているようです。#body_headerの背景画像指定でno-repeatの前の半角スペースを削除されています。

("画像のアドレス") no-repeat; として下さい。
("画像のアドレス")半角スペースno-repeat; です。
ヘッダー画像について 
早速のご回答ありがとうございます!
問題なく表示でしました! ご回答感謝致します!!
カレンダーについて 
デザインが気に入り、使用させていただくこととなりました。
1つどうしてもわからないのですが、カレンダーの位置を上にずらすことは可能でしょうか?ヘッダーの画像と重なっているので修正したいのですが、どうしたらよいかわかりません。何か方法があればご教授頂けないでしょうか?よろしくお願い致します。
Re: カレンダーについて 
ブログの設定でFC2の検索バーを利用しないにする(推奨)か、CSSで#body_wrapを以下のように変更してください。

#body_wrap{
z-index: 0;
width: 960px;
margin: 0 auto;
padding: 60px 0 0 0;
}
カレンダーについて 
ご回答ありがとうございました!!
早速やってみたところ、解決できました。
素早い対応に感謝しております。
  • テンプレート配布記事では使用に関してのコメントを優先しますのでご質問・ご報告以外はスルーする傾向にあります。
  • テンプレートへの感想は共有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