FC2 共有テンプレート「SUP09」
SUP09(2カラム1種・3カラム1種)09_2colum/09_3colum
テンプレご利用案内的なもの
画像の高さに合わせて青字部分を書き換えて下さい。2カラムW260px、3カラムW390px(旧Ver.410px)は表示最大幅です。それより大きい画像は中央からトリミングされ小さい画像は中心に配置されます(右図)。全面彩色画像は断ち切りまで表示するのが良。デフォルトでは2カラム260*260、3カラム390*260で断ち切ります。
HTML編集で上記範囲を以下のソースにまるっと差し替えます。
はてなブックマークボタン/Tweet Button/Facebook Social Plugins
※Facebookのオフィシャルボタンはカウントなしがありません。
- プラグイン3をフロントページのみ記事上部に表示します。全ページに表示させたい場合は追記よりカスタマイズの詳細をご覧ください。
- プラグイン1,2は色分けされます。色味を統一したい場合はどちらか一方をご使用ください(2カラムのみ可能)。

公開後しばらくはソースの修正を頻繁に行います。お手数をおかけしますがこまめに最終更新日をご確認頂き、最新状態でのダウンロードをお願いします<(_ _)> 不具合などお気付きの点がございましたらコメ欄にてご指摘くださると幸いです。
- 2015-08-26 HTML・CSS改正
- ソーシャルボタンアイコンの変更
- TOP・BOTTOMをスムーススクロールに
- 全テンプレート共通修正箇所
- TOP・BOTTOMをスムーススクロールに
- 2012-12-21 HTML修正
- Tweetボタンのリンクに動作テスト時の当方アカウントが入ったままだったのを削除(すみません
)。「&via=slugsupper」を削除するか「&via=ご自身のアカウント」に変更してください。
- 2012-09-04 HTML・CSS改正
- 右下に固定ページナビゲーションを追加
- ソーシャルボタンをアイコン化
- カレンダー画像をトップページへリンク
- 3カラムの記事幅拡張・サイドバー縮小
- ソース改善
- ソーシャルボタンをアイコン化
- 2012-02-08 HTML・CSS改正
- FC2既定の拍手ボタンとソーシャルボタンを横並びに
- ソース改善
UPDATE...
カスタマイズ
※カスタマイズは自力で。質問にはお答えいたしませんのでご了承ください。カレンダーの画像を差し替える
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%; }

カレンダーのシールを差し替える
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="http://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 ==========-->

※Facebookのオフィシャルボタンはカウントなしがありません。
ヘッダに画像を挿入したい※非推奨
/*---------- 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」
Comments
Re: 失礼します
この記事の説明を読んで分からなければこれ以上お答えしようがないです‥ スタイルシート末尾のsample.jpgをご自身の画像と入れ替えるだけですよ。
うわーーん!

やたーー!!
できたーーーー!!!!うわーん!
アリガトウゴザイマシタ
アリガトウゴザイマシタ
コメントを削除しました。失礼しました。
いつもカッコイイ、テンプレートありがとうございます。
当ブログでも使用させてもらっています。
カレンダーのシールですが、今後種類は増えませんか?
なんでもいいんで、カッコイイ英語が嬉しいです(^O^)
当ブログでも使用させてもらっています。
カレンダーのシールですが、今後種類は増えませんか?
なんでもいいんで、カッコイイ英語が嬉しいです(^O^)
Re: タイトルなし
ご使用ありがとうございます。カコイイ英語て‥ NFLとかNHLとか?w なるべく多くの使用者さんにかする汎用性の高いものじゃないと配る意味ないんでなかなか難しい所ですね。なんかいいワードがあればご提案ください。お応えできるか分かりませんが検討はしてみます(^^
今更なのですが・・・
配色がキレイだったので使わせてもらっています(画像とか差し替えちゃってるけど・・・)。
いずれはBOXの角を丸くできると良くなるのかな~って思いつつ
カスタマイズ楽しんでます^^
ありがとうございました。
いずれはBOXの角を丸くできると良くなるのかな~って思いつつ
カスタマイズ楽しんでます^^
ありがとうございました。
初めまして。
以前より、このテンプレートを使わせて貰っているのですが、このテンプレートはIE9に対応しているのでしょうか?
IE8→IE9に変更したら記事内の文字(文体)の表示が変わり小さくなったもので・・・。
もし宜しければ回答の程お願いします。
IE8→IE9に変更したら記事内の文字(文体)の表示が変わり小さくなったもので・・・。
もし宜しければ回答の程お願いします。
Re: 初めまして。
はじめまして。現時点でIE9には対応していません。回答は長くなるので記事にさせていただきますね。
早速の回答ありがとうございます。
IE9には対応していないんですね・・・。
別記事の回答を参考にさせて貰います。
どうもありがとうございました。
IE9には対応していないんですね・・・。
別記事の回答を参考にさせて貰います。
どうもありがとうございました。
こんにちは。
再DLはしていないのですが、あれから<head>直後に<meta http-equiv="X-UA-Compatible" content="IE=8" />を入力すると、きちんと表示されるようになりました。
どうもありがとうございました。
どうもありがとうございました。
Re: こんにちは。
よかったです(^^ ご報告ありがとうございます
templateを見てブログの引越しを決めました
素敵なtemplateに一目惚れ、使いたくてF2Cにブログ引っ越してきました!
ありがとうございます^^
SLUGさんは音楽好きですよね?そんな空気を感じました^^
私はDjをやっていて、ブログでMIXテープの公開をしています♪
templateのお礼とまではいきませんが、作業時のBGM程度に
よろしければ聞いて頂けると幸いです^^
素敵なtemplateありがとうございます
ありがとうございます^^
SLUGさんは音楽好きですよね?そんな空気を感じました^^
私はDjをやっていて、ブログでMIXテープの公開をしています♪
templateのお礼とまではいきませんが、作業時のBGM程度に
よろしければ聞いて頂けると幸いです^^
素敵なtemplateありがとうございます
Re: templateを見てブログの引越しを決めました
空気 でちゃってたか~(地獄のミサワ風に)
ご丁寧にありがとうございます。また拝聴させていただきます(^^
ご丁寧にありがとうございます。また拝聴させていただきます(^^
はじめまして
SUP09_2columのテンプレートをダウンロードして使おうと思ったのですが、
上記の説明通りにカレンダーの画像を変えたのですが、真っ白になり、その画像が表示されません。
ちなみに、FC2のブログにアップロードしました。
現在一時的に、SUP15_1をお借りしております。
ご回答頂ければ幸いです。
それにしても、格好良いテンプレートなので、どーしても画像を変更して使いたいのですが・・・
上記の説明通りにカレンダーの画像を変えたのですが、真っ白になり、その画像が表示されません。
ちなみに、FC2のブログにアップロードしました。
現在一時的に、SUP15_1をお借りしております。
ご回答頂ければ幸いです。
それにしても、格好良いテンプレートなので、どーしても画像を変更して使いたいのですが・・・
Re: はじめまして
真っ白という事は画像の読み込みがされてないという事です。アップロードした画像はファイル管理画面でちゃんと表示されますか?表示されるのであれば画像パスに何らかの記述ミスがあります。http://や拡張子(.jpg/.gif/.png)等の記述漏れがないかご確認ください。
回答有難う御座います
~jpgの後に、スペースが入っていたようです。
お手数掛けました。これで画像使えますので、こちらのテンプレートお借りいたします。
お手数掛けました。これで画像使えますので、こちらのテンプレートお借りいたします。
カレンダーの画像にリンクを張りたいのですが、どのようにすれば良いのでしょうか?
色々と調べても、いくらやってもわからず困っています。
どうしてもお答えできないのであれば、スルーして頂いて結構です。
では、宜しくお願いします。