SLUG'S UPPER title

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

SUP08(1カラム2色)08_1 / 08_2

sup08-1.jpg

sup08-2.jpg


  • 写真やグラフィック等大きめの画像を扱うブログ向けです。幅960pxまでの画像が実寸で収まります。
  • プラグイン3をフロントページのみ記事上部に表示します。全ページに表示させたい場合は追記よりカスタマイズの詳細をご覧ください。
  • 一応レスポンシブです。W780px以下の画面では下部プラグインも1カラムになります。


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


YouTube等のFlash動画を貼り付けるとプルダウンメニューに重なってしまう場合の対処


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

UPDATE...

2023-06-09 HTML・CSS改正
アドレス変更に伴い読み込まれていなかったGoogle Fontsの指定箇所を訂正
カラムをレスポンシブに
モダンブラウザのほぼ完全普及に合わせ画像で補っていた部分をCSS記述に置き換え
その他細部をマイナーモデルチェンジ
2014-10-01 CSS追記
Google ChromeのDirectWriteレンダリングによるArial Blackフォントの指定無効を回避ごまかす為の記述を追加
2013-11-17 HTML・CSS改正
TOP・BOTTOMをスムーススクロールに
プルダウンメニューの形態を変更し記述をメインカラム以降に移動
全テンプレート共通修正箇所
2012-09-11 HTML・CSS改正
右下に固定ページナビゲーションを追加
マイナーチェンジ
コメントフォームのサイズ不揃い等ミス修正他ソース改善
2011-10-10 HTML・CSS改正
IE8標準モードで崩れる不具合を修正
ついでにモデルチェンジ。以前のヘッダ画像がいい場合はCSS編集で“sup08_header_sample.jpg”を“sup08_header_sample1.jpg”に書き換えて下さい(てかなるべくご自身の画像に変えてくださいませよ)

超画像特化型。作っといて言うのも何ですが、ここまでデカイ画像載せてるサイトはどうかと思いますので大きな画像を頻繁に掲載される場合は1ページの表示数を少なめに閲覧者への配慮を。

カスタマイズ

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


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

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

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


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

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

/*========== Blog Header ==========*/
#body_header {
	width: 100%;
	height: 200px;
	background: #ffff00;
	・
	・
}


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

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

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

#body_header a:link,#body_header a:visited{...}

.blog_title a:link,.blog_title a:visited{...}


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

#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;
}


画像を記事幅いっぱいに可変フィットさせる

記事幅よりオーバーサイズの画像は以下のように通常右端から断ち切られて表示されます。

sup08-3.jpg

このテンプレートでは記事内の<img>タグを打ち消しタグ<s>~</s>で囲うことにより可変フィットするようになります。

sup08-4.jpg


<s><img src="画像のアドレス" alt="画像の名前" width="" height="" / ></s>

上記のように記述すると画像が記事幅いっぱいにフィットします。記事幅より小さい画像は拡大されて表示が荒くなりますのでご留意ください。

sup08-5.jpg

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

こちらをご覧ください


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

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

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


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

sup08-6.jpg


デフォルトのヘッダーメニューがいらない

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

<!--========== HEADER MENU START (delete if unnecessary) //==========-->
・
・
・
<!--==========// HEADER MENU END ==========-->
HEADER MENU STARTと書かれた行からHEADER MENU ENDまでを全て削除。
関連記事
Comments
こんにちは
SUP08-2 白のテンプレ使用させていただいております。
マイナーチェンジ版にしたいのですが、どうすれば更新できますか?
申し訳有りません、教えていただけますでしょうか?
Re: こんにちは
DL済のSUP08を削除するか、任意のテンプレート名(DL済のテンプレ名でなければ何でも結構です)にリネームしてからSUP08を再DLしてください。
有難うございました
ダウンロード完了です。
使わせていただきます。
教えてください
初めまして、FC2のテンプレート1欄で一目で使ってみたくなり利用したいのですが、
写真(記事)の表示が大きすぎるのでもっと小さくするにはどこを修正すればいいのか
ご教授いただけませんでしょうか?

よろしくお願いします。
SUP08のカテゴリー表示について
素敵なテンプレートありがとうございます。
SUP08_1を使わせてただいております。
カテゴリー数が多いブログを作っているのですが、上部categoryの欄にmonthlyのようなスクロールバーがなく、下のほうが切れてしまいます。
自分で書き換えるしかないのでしょうか。
暫定的に公式テンプレのカテゴリー表示をプラグイン1、2に置いたのですが、その際BOTTOMで最下部まで移動しなくなりました。
これはカスタマイズの質問に当たるかもしれませんが、当ページの下部のような形のカレンダーをプラグインに置きたいのですが。
トップの横長のカレンダーも残しつつ見慣れたカレンダーもとも思い。私のワガママなので無視してくださってかまいません。
無理すいません。よろしくお願いします。
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
Re: SUP08のカテゴリー表示について
CSS編集で#jsddm li ulを以下赤字に入れ替えてください

#jsddm li ul{
width: 240px;
height: 240px;
overflow-y: scroll;
margin: 0 0 0 -1px;
padding: 0;
background: url("http://blog-imgs-37.fc2.com/s/l/u/slugsupper/alpha_ffffff_70-trans.png");
border-right: 1px dotted #000;
border-bottom: 1px dotted #000;
border-left: 1px dotted #000;
-webkit-box-shadow: 0 2px 2px #000;
-moz-box-shadow: 0 2px 2px #000;
box-shadow: 0 2px 2px #000;
position: absolute;
visibility: hidden;
}


ただしこの記述では上部メニュー全てのプルダウンにスクロールバーがつきます。SUP08はこちらのコメント(http://slugsupper.blog22.fc2.com/blog-entry-278.html#comment254)にてご報告いただいているように外部スクリプトがメニューより上に重なってしまうので今後メニュー部分の記述を大幅に改正し更新する予定でおります。その際各プルダウンごとに指定できるようクラスを設定しますので当面は上記の対処でご容赦ください。
こんなに早くありがとうございます。
書き換えてスクロール出来るようになりました。
拙い写真くらいしかお礼になるようなものもありませんが、何かありましたらおっしゃってください。
更新の件、承知いたしました。
大切に使わせて頂きます。

    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