SLUG'S UPPER title

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

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


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


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


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

UPDATE...

2023-04-04 HTML・CSS改正
アドレス変更に伴い読み込まれていなかったGoogle Fontsの指定箇所を訂正
カラムをレスポンシブに
モダンブラウザのほぼ完全普及に合わせ画像で補っていた部分をCSS記述に置き換え
その他細部をマイナーモデルチェンジ
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で画面内に表示できなかったのをスクロール表示させるように改正

カスタマイズ

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


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


ヘッダーに画像を置かない

CSS編集で以下の赤字部分を削除します。

/*========== Blog Header ==========*/
#body_header {
	position: relative;
	width: 100%;
	height: 300px;
	margin-bottom: 40px;
	background: url("https://blog-imgs-163.fc2.com/s/l/u/slugsupper/sup_header_sample_devilmom.png") no-repeat 50% 50%;
	border: 1px solid #ccc;
	background-size: cover;
}


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

CSS編集で以下の赤字部分を削除し、上記のbackgroundプロパティをurl()からカラーコードに書き換えます。例では黄色で塗りつぶされます。

#body_header {
	position: relative;
	width: 100%;
	height: 300px;
	margin-bottom: 40px;
	background: #ffff00
	border: 1px solid #ccc;
	background-size: cover;
}


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

画像を用意し、ブログにアップロードします。 CSS編集で以下の赤字部分をアップロードした画像のURLに書き換えます。

/*========== Blog Header ==========*/
#body_header {
	position: relative;
	width: 100%;
	height: 300px;
	margin-bottom: 40px;
	background: url("https://blog-imgs-163.fc2.com/s/l/u/slugsupper/sup_header_sample_devilmom.png") no-repeat 50% 50%;
	border: 1px solid #ccc;
	background-size: cover;
}
画像はbackground-size: cover指定により縦横比を維持したままヘッダー領域いっぱいにフィットするよう適宜サイズ調整/トリミングされます。画像の高さは任意です。画像に合わせてheightを書き換えて下さい。デフォルトでは300pxになっています(旧Ver.は200px)。ヘッダーの幅は1000px-20px×2(左右余白)ですので、デフォルトでは幅960px×高さ300pxの画像が実寸で表示されます。


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

ヘッダー画像に合わせてタイトルを見やすい色に変更して下さい。 CSS編集で以下の赤字部分を任意の色に書き換えます。例では黄色のタイトルになります。

#body_header a  {
	・
	・
	color: #ffff00;
	・
	・
}
旧Ver.は以下のセレクタになります。

#body_header a:link,#body_header a:visited {
	color: #ffff00;
	text-decoration: none;
}


マウスオーバー時の色は以下のセレクタです。

#body_header a:hover {
	color: #f90;
}


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

CSS編集で以下のセレクタにvisibility: hidden;を追加します。

.blog_title {
	・
	・
	visibility: hidden;
}


説明文の色を変更する

ヘッダー画像に合わせて説明文を見やすい色に変更して下さい。 CSS編集で以下の赤字部分を任意の色に書き換えます。例では黄色になります

.blog_description {
	・
	color: #ffff00;
	・
}


説明文を非表示にする

CSS編集で以下のセレクタにvisibility: hidden;を追加します。

.blog_description {
	・
	・
	visibility: hidden;
}


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

こちらをご覧ください


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

HTML編集で以下の範囲を削除します。

<!--========== FIXED CALENDAR START (delete if unnecessary) //==========-->
・
・
・
<!--==========// FIXED CALENDAR END ==========-->
FIXED CALENDAR STARTと書かれた行からFIXED CALENDAR ENDまでを全て削除。


SUP04は1カラム時にヘッダー上部の一行カレンダーが消え、記事カラム下プラグイン上部にマスカレンダーが表示されます。その為カレンダーの記述が2か所ありますのでFIXED CALENDARでページ内検索をかけて2か所とも削除してください。

関連記事
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;
}
カレンダーについて
ご回答ありがとうございました!!
早速やってみたところ、解決できました。
素早い対応に感謝しております。
    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