SLUG'S UPPER title

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

SUP09(2カラム1種・3カラム1種)09_2colum/09_3colum

sup09_1.jpg

sup09_2.jpg


  • プラグイン3をフロントページのみ記事上部に表示します。全ページに表示させたい場合は追記よりカスタマイズの詳細をご覧ください。
  • プラグイン1,2は色分けされます。色味を統一したい場合はどちらか一方をご使用ください(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%;
}


sup09_3.jpg画像の高さに合わせて青字部分を書き換えて下さい。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
デフォルト
Sticker[COOL] COOL
サブい(誤)
Sticker[Snapshot] Snapshot
撮ったどー
Sticker[PhotoFocus]PhotoFocus
カメラー用
Sticker[BIKE] BIKE
チャリスト用
Sticker[Motorbike] Motorbike
バイカー用
Sticker[gr8] gr8
great
Sticker[uber] uber
神神神!
Sticker[YOME] YOME
多いほうがいい
Sticker[FU] 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 ButtonFacebook Social Plugins
※Facebookのオフィシャルボタンはカウントなしがありません。


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


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

sup09_4.jpg

必ず無理くり画像突っ込んで残念なことになる人がいるんで譲歩オプションです。このテンプレベースのヘッダ有り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>を使用されるとよいかと思われます。
関連記事
Comments
失礼します
カスタマイズの質問にお答えできない事を覚悟に、質問させて頂きます。
カレンダーの画像にリンクを張りたいのですが、どのようにすれば良いのでしょうか?
色々と調べても、いくらやってもわからず困っています。

どうしてもお答えできないのであれば、スルーして頂いて結構です。
では、宜しくお願いします。
Re: 失礼します
この記事の説明を読んで分からなければこれ以上お答えしようがないです‥ スタイルシート末尾のsample.jpgをご自身の画像と入れ替えるだけですよ。
うわーーん!v-15
やたーー!!
できたーーーー!!!!うわーん!
アリガトウゴザイマシタ
コメントを削除しました。失礼しました。
いつもカッコイイ、テンプレートありがとうございます。
当ブログでも使用させてもらっています。
カレンダーのシールですが、今後種類は増えませんか?
なんでもいいんで、カッコイイ英語が嬉しいです(^O^)
Re: タイトルなし
ご使用ありがとうございます。カコイイ英語て‥ NFLとかNHLとか?w なるべく多くの使用者さんにかする汎用性の高いものじゃないと配る意味ないんでなかなか難しい所ですね。なんかいいワードがあればご提案ください。お応えできるか分かりませんが検討はしてみます(^^
今更なのですが・・・
配色がキレイだったので使わせてもらっています(画像とか差し替えちゃってるけど・・・)。
いずれはBOXの角を丸くできると良くなるのかな~って思いつつ
カスタマイズ楽しんでます^^

ありがとうございました。
初めまして。
以前より、このテンプレートを使わせて貰っているのですが、このテンプレートはIE9に対応しているのでしょうか?
IE8→IE9に変更したら記事内の文字(文体)の表示が変わり小さくなったもので・・・。
もし宜しければ回答の程お願いします。
Re: 初めまして。
はじめまして。現時点でIE9には対応していません。回答は長くなるので記事にさせていただきますね。
早速の回答ありがとうございます。
IE9には対応していないんですね・・・。
別記事の回答を参考にさせて貰います。
どうもありがとうございました。
こんにちは。
再DLはしていないのですが、あれから<head>直後に<meta http-equiv="X-UA-Compatible" content="IE=8" />を入力すると、きちんと表示されるようになりました。
どうもありがとうございました。
Re: こんにちは。
よかったです(^^ ご報告ありがとうございます
templateを見てブログの引越しを決めました
素敵なtemplateに一目惚れ、使いたくてF2Cにブログ引っ越してきました!
ありがとうございます^^

SLUGさんは音楽好きですよね?そんな空気を感じました^^
私はDjをやっていて、ブログでMIXテープの公開をしています♪
templateのお礼とまではいきませんが、作業時のBGM程度に
よろしければ聞いて頂けると幸いです^^

素敵なtemplateありがとうございます
Re: templateを見てブログの引越しを決めました
空気 でちゃってたか~(地獄のミサワ風に)
ご丁寧にありがとうございます。また拝聴させていただきます(^^
はじめまして
SUP09_2columのテンプレートをダウンロードして使おうと思ったのですが、
上記の説明通りにカレンダーの画像を変えたのですが、真っ白になり、その画像が表示されません。
ちなみに、FC2のブログにアップロードしました。

現在一時的に、SUP15_1をお借りしております。
ご回答頂ければ幸いです。
それにしても、格好良いテンプレートなので、どーしても画像を変更して使いたいのですが・・・
Re: はじめまして
真っ白という事は画像の読み込みがされてないという事です。アップロードした画像はファイル管理画面でちゃんと表示されますか?表示されるのであれば画像パスに何らかの記述ミスがあります。http://や拡張子(.jpg/.gif/.png)等の記述漏れがないかご確認ください。
回答有難う御座います
~jpgの後に、スペースが入っていたようです。
お手数掛けました。これで画像使えますので、こちらのテンプレートお借りいたします。

    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