SLUG'S UPPER title

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

SUP03(2カラム2色)03_1 / 03_2


  • 写真やグラフィック等大きめの画像を扱うブログ向けです。2カラムの状態で幅720pxまでの画像が実寸で収まります。1カラム状態での最小表示幅は600pxです。
  • プラグイン3をフロントページのみ記事上部に表示します。全ページに表示させたい場合は追記よりカスタマイズの詳細をご覧ください。
  • プラグイン1,2は背景色により色分けされます。色味を統一したい場合はどちらか一方をご使用ください。
  • 一応レスポンシブです。W780px以下の画面では1カラムになります。


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


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

UPDATE...

2023-03-22 HTML・CSS改正
アドレス変更に伴い読み込まれていなかったGoogle Fontsの指定箇所を訂正
カラムをレスポンシブに
モダンブラウザのほぼ完全普及に合わせ画像で補っていた部分をCSS記述に置き換え
その他細部をマイナーモデルチェンジ
2015-09-03 HTML・CSS改正
TOP・BOTTOMをスムーススクロールに
全テンプレート共通修正箇所
2012-06-24 HTML・CSS改正
右下に固定ページナビゲーションを追加
配色微調整他ソース改善
2012-01-21 HTML・CSS改正
コメント欄等全体的にマイナーチェンジ
カレンダー装備
FC2既定の拍手ボタンとソーシャルボタンを横並びに
CSSの重複記述等ミス修正他ソース改善
2011-06-09 HTML修正
プラグイン設定での行揃え機能が無効になっていたのを修正
記事のカテゴリー表示に親カテゴリーを追加
2011-06-04 HTML訂正
Archiveのtitleミスを訂正(再DL or 書き換えをお願いします)
2011-05-24 HTML・CSS改正
タイトルが長文の場合に日付の下へ回りこんでしまうのを修正。
白ver.で前後エントリーへのリンクのクォートマーク画像が白になっていたのを黒に訂正。
背景色の変更・背景画像挿入に対応するよう日付のオーナメントをpng画像に変更。
ローカルバナーに対応するよう右サイドの内包幅を200pxに拡張。
月間アーカイブのデフォルト表示を排除。
その他フォント変更等の微調整。
2011-04-17 HTML訂正
コメントフォームのレーベル指定ミスを修正

カスタマイズ

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


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


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

CSS編集で以下の赤字部分を削除し、青字部分で記事までの距離を調整します。

/*========== Blog Header ==========*/
#body_header {
	width: 100%;
	height: 300px;
	margin: 0 0 30px 0;
	background: url("https://blog-imgs-163.fc2.com/s/l/u/slugsupper/sup_header_sample_devildad.png") no-repeat 50% 50%;
	background-size: cover;
}
旧Ver.で枠線のあるものはborderプロパティも一緒に削除してください。

/*========== Blog Header ==========*/
#body_header {
	・
	・
	background: url("http://~~サンプル画像URL") no-repeat;
	border: 1px solid #333;
	・
	・
}


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

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

/*========== Blog Header ==========*/
#body_header {
	width: 100%;
	height: 300px;
	margin: 0 0 30px 0;
	background: #ffff00;
	background-size: cover;
}
heightを任意の高さに調整します。


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

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

/*========== Blog Header ==========*/
#body_header {
	width: 100%;
	height: 300px;
	margin: 0 0 30px 0;
	background: url("https://blog-imgs-163.fc2.com/s/l/u/slugsupper/sup_header_sample_devildad.png") no-repeat 50% 50%;
	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: #f63;
}


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

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

.blog_title {
	・
	・
	visibility: hidden;
}


説明文の色を変更する

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

.blog_description {
	・
	color: #ffff00;
	・
}


説明文を非表示にする

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

.blog_description {
	・
	・
	visibility: hidden;
}


日付の背景オーナメントの色を変更する

sup03_sample1.png記事タイトル横にある日付の同心円です。
CSS編集で以下の赤字部分を任意の色に書き換えます。例では黄色の同心円 になります。

.circle b {
	width: calc(100% - 32px);
	aspect-ratio: 1;
	padding: 8px;
	border: 8px solid #ffff00;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	display: block;
}


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

.entry_date a:hover .circle b {
	border-color: #f63;
}


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

こちらをご覧ください。


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

こちらをご覧ください。
関連記事
Comments
No title
こんにちは。
そのテンプレを使わせていただいています。
ちょっとお聞きしたいのですが
・タイトルの文字体の変更のやり方
・タイトルの文字のリンク設定の解除
・右上の「Archive RSS Login」の部分の消し方
・検索窓「Search entries」の消し方
もしよろしければ上記について教えていただけないでしょうか?
よろしくお願いします。
Re: No title
カスタムは許可してるだけで推奨はしてませんので説明のない部分は自力でお願いします。
文字化けでお困りかもしれないので以下だけお答えします(^^

> ・タイトルの文字体の変更のやり方
CSS編集で#body_headerのアンカー要素にフォント指定
No title
ありがとうございました!
Re: No title
あ .blog_titleに指定でよかった(^^; すんません
頑張ってください
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
Re: お願いいたします。
おかしくなったテンプレートを一旦削除してもう一度DLしてください。DLは何回でもできますよ(^^
ぜんしゅうてきこころのこれから
はじめまして何も分からないままの見切り発車で
ブログを始めちゃいましたが、初めに選んだテンプレートが見にくく
お宅様のが良かったので勝手に使わせていただきましたので
宜しくお願い致します。
Re: ぜんしゅうてきこころのこれから
これはご丁寧にありがとうございます(^^
ところでこんな得体の知れないブログにプロバイダメールは打ち込まれない方が‥ うちは開示しない設定ですが公開されるブログもあります。捨てメアドとしてご用意されてるなら差し出口を叩いてすみません(^^;)ゞ
お世話になっております。
また、教えてください(^^)
コメント欄に、Email AddressとWebsite URLが
でないようにしたいと思います。

どのようにするといいですか?
テンプレート使わせてもらってます。
ヘッダー変えたり色々カスタムさせて貰ってるんですが、コメントカラーの変え方がわからないんです……グレーから白に変えたいんですが何処いじればいいですかね?
    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