SLUG'S UPPER title


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

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

sup08_1.jpg

sup08_2.jpg


  • プラグイン3をフロントページのみ記事上部に表示します。全ページに表示させたい場合は追記よりカスタマイズの詳細をご覧ください。
  • プラグイン1,2は表示幅が異なります(1:W320px 2:W520px)。2にはフルバナー(468px)が収まります。


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


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


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


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

UPDATE...

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編集で以下の赤字部分を削除します。
/*========== Blog Header ==========*/ #body_header{ width: 960px; height: 200px; ・ background: #1a1a1a url("http://blog-imgs-34.fc2.com/s/l/u/slugsupper/sup08_header_sample.jpg") no-repeat; ・ ・ }


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

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


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

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


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

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


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

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


説明文の色を変更する

ヘッダ画像に合わせて説明文を見やすい色に変更して下さい。 CSS編集で以下の赤字部分を任意の色に書き換えます。例では黄色の説明文になります。
.blog_description{ width: auto; ・ 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までを全て削除。


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

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

Newer Entry3カラムは「デザイン」ではない

Older Entry「Comment: n」が「本文: n」と表示される件

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)にてご報告いただいているように外部スクリプトがメニューより上に重なってしまうので今後メニュー部分の記述を大幅に改正し更新する予定でおります。その際各プルダウンごとに指定できるようクラスを設定しますので当面は上記の対処でご容赦ください。
 
こんなに早くありがとうございます。
書き換えてスクロール出来るようになりました。
拙い写真くらいしかお礼になるようなものもありませんが、何かありましたらおっしゃってください。
更新の件、承知いたしました。
大切に使わせて頂きます。

  • テンプレート配布記事では使用に関してのコメントを優先しますのでご質問・ご報告以外はスルーする傾向にあります。
  • テンプレートへの感想は共有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