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

SUP09（2カラム1種・3カラム1種）09_2colum/09_3colum

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

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

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

UPDATE...

2015-08-26 HTML・CSS改正

ソーシャルボタンアイコンの変更

TOP・BOTTOMをスムーススクロールに

全テンプレート共通修正箇所

2012-12-21 HTML修正

Tweetボタンのリンクに動作テスト時の当方アカウントが入ったままだったのを削除（すみません）。「&via=slugsupper」を削除するか「&via=ご自身のアカウント」に変更してください。

2012-09-04 HTML・CSS改正

右下に固定ページナビゲーションを追加

ソーシャルボタンをアイコン化

カレンダー画像をトップページへリンク

3カラムの記事幅拡張・サイドバー縮小

ソース改善

2012-02-08 HTML・CSS改正

FC2既定の拍手ボタンとソーシャルボタンを横並びに

ソース改善

---

カスタマイズ

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

カレンダーの画像を差し替える

2カラムは幅260px、3カラムは幅390px（旧Ver.410px）の画像をブログにアップロードします。CSS編集で以下の赤字部分（CSS末尾にあります）をアップロードした画像のURLに書き換えます。月ごとに変えると良いかと思います。

/*======================================================================
　　　　　CALENDAR IMAGE  maximum width to be displayed 260px
======================================================================*/
.calendar_image{
	height: 260px;　←画像高さ　変更可
	background: #fff url("アップロードした画像のURL") no-repeat 50% 50%;
}

画像の高さに合わせて青字部分を書き換えて下さい。2カラムW260px、3カラムW390px（旧Ver.410px）は表示最大幅です。それより大きい画像は中央からトリミングされ小さい画像は中心に配置されます（右図）。全面彩色画像は断ち切りまで表示するのが良。デフォルトでは2カラム260*260、3カラム390*260で断ち切ります。

カレンダーのシールを差し替える

CSS編集で以下の赤字部分（CSS末尾にあります）を各シール名に書き換えます

.put_up{
	・
	・
	background: url("http://blog-imgs-34.fc2.com/s/l/u/slugsupper/circle_sticker_LOVE_c33-trans.png") no-repeat 50% 50%;
	・
}

旧Ver.はHTML編集で以下の赤字部分を各シール名に書き換えます。

<!--========== FIXED CALENDAR START (delete if unnecessary) //==========-->
<div class="calendar_image">
<div class="put_up">
<img src="https://blog-imgs-34.fc2.com/s/l/u/slugsupper/circle_sticker_LOVE_c33-trans.png" border="0" />
</div>
</div>

	LOVE デフォルト		COOL サブい（誤）
	Snapshot 撮ったどー		PhotoFocus カメラー用
	BIKE チャリスト用		Motorbike バイカー用
	gr8 great		uber 神神神！
	YOME 多いほうがいい		FU 発酵と言え

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

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

<!--========== FIXED CALENDAR START (delete if unnecessary) //==========-->
・
・
・
<!--==========// FIXED CALENDAR END ==========-->

FIXED CALENDAR STARTと書かれた行からFIXED CALENDAR ENDまでを全て削除。

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

こちらをご覧ください

ソーシャルメディアボタンがいらない

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

<!--========== SOCIAL MEDIA BUTTON START (delete if unnecessary) //==========-->
・
・
・
<!--==========// SOCIAL MEDIA BUTTON END ==========-->

SOCIAL MEDIA BUTTON STARTと書かれた行からSOCIAL MEDIA BUTTON ENDまでを全て削除。

ソーシャルメディアボタンをカウント無しのボタンにしたい

※旧Ver.のみ
HTML編集で上記範囲を以下のソースにまるっと差し替えます。

<!--========== SOCIAL MEDIA BUTTON START (delete if unnecessary) //==========-->
<div class="social">

<!-- Hatena /-->
<p><a href="http://b.hatena.ne.jp/entry/<%topentry_link>" class="hatena-bookmark-button" data-hatena-bookmark-title="<%blog_name> : <%topentry_title>" data-hatena-bookmark-layout="simple" title="Add URL to Hatena"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="Add URL to Hatena" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></p>
<!--/ Hatena -->

<!-- Tweet /-->
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<%topentry_link>" data-text="<%topentry_title>" data-lang="en" data-count="none">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<!--/ Tweet -->

<!-- Facebook /-->
<p><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="<%topentry_enc_link>" send="false" layout="button_count" width="100" show_faces="false" action="like" font=""></fb:like></p>
<!--/ Facebook -->

<br class="clear" />
</div>
<!--==========// SOCIAL MEDIA BUTTON END ==========-->

はてなブックマークボタン／Tweet Button／Facebook Social Plugins
※Facebookのオフィシャルボタンはカウントなしがありません。

各メディアはコメントアウト<!-- ○○○ -->で括ってあるので不要な物は個別に削ってください。

ヘッダに画像を挿入したい※非推奨

必ず無理くり画像突っ込んで残念なことになる人がいるんで譲歩オプションです。このテンプレベースのヘッダ有りVer.は作ってあるのでお待ちいただくのが吉。

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

/*---------- OPTION HEADER |----------
.option_header{
	・
	・
	background: url("upload the image of 960px in width") no-repeat;
}
----------| OPTION HEADER ----------*/

画像の高さは任意です。画像の高さに合わせてheightを書き換えて下さい。ヘッダ部分にフィードやアドセンス置く方はこのセレクタ<div class="option_header">～</div>を使用されるとよいかと思われます。

関連記事

• FC2 共有テンプレート「SUP10」
• FC2 テンプレート「DE_SUP09d1」
• FC2 共有テンプレート「SUP09」
• FC2 共有テンプレート「SUP08」
• FC2 共有テンプレート「SUP07」