SLUG'S UPPER title


FC2 テンプレート「DE_SUP11d」

DIRECT EDITION

SUP11d(1カラム1種・2カラム1種)11d_1colum/11d_2colum

sup11d_1.jpg

sup11d_2.jpg


  • 画像特化ギャラリー型。淡々と画像をアップするブログ用です。通常の仕様と異なっています。追記の仕様説明をご覧下さい。
  • プラグイン3をフロントページにのみ表示します。全ページに表示させたい場合は追記よりカスタマイズの詳細をご覧ください。
  • プラグイン1,2は色分けされます(2カラムのみ)。色味を統一したい場合はどちらか一方をご使用ください。
  • CSS3を多用している為IE9以下ではサンプル画像と表示が異なります。閲覧に支障はありませんが見目がショボくなりますのでご了承ください。


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


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

【最終更新日:2015-09-11】

UPDATE...

2015-09-11 HTML・CSS改正
TOP・BOTTOMをスムーススクロールに
全テンプレート共通修正箇所
2011-10-23 HTML変更(1colum)
1カラムのページボタンへの画像リンクを修正。ボタンが表示されてない方は再DLをお願いします。

仕様

sup11d_3.jpg1カラムはただひたすら画像を上げる用です。デフォルトでは画像が装飾されるので透過画像は不可、というか本文を入れること自体想定してありません(入れても備考程度の文章)。本文領域はデフォルトでセンタリングされ、タイトルは本文領域の下にきます。2カラムはまぁ どうでもいい(…)というか いつも通り。ただ文章のみのブログや画像がメインじゃないブログには向きません。読みにくい。そんなことないよ、て人はたぶん今IE(6~9)で見てるとオモw
1カラム推奨環境設定
・「関連記事リスト 表示場所」テンプレート変数のみ
・「記事(PC ページ別)」(旧Ver.の場合「最新記事一覧」)はトップ画像の高さをはみ出ない件数。参考画像は5件です。


適用方法

  • 初めに共有テンプレート追加より「SUPx」(どれでも可)をダウンロードしておきます。DLしたテンプレートをリネームしてください。
  • テンプレートの編集でリネームした任意のテンプレートを以下のソースに入れ換えます。

DOWNLOAD ※右クリック>対象を保存>テキストエディタで開く
Right click and choose "Save target as" or "Save link as".
SUP11d_1colum [HTML] [CSS]
SUP11d_2colum [HTML] [CSS]


カスタマイズ

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


トップの画像を差し替える(1カラムのみ)

幅270px・高さ360pxの画像を用意し、ブログにアップロードします。 CSS編集で以下の赤字部分をアップロードした画像のURLに書き換えます。
/*====================================================================== TOP IMAGE W270px X H360px ======================================================================*/ #front .pic p{ width: 270px; /* Do not change the size */ height: 360px; margin: 0 auto 20px auto; background: url("http://blog-imgs-34.fc2.com/s/l/u/slugsupper/sup11_top_sample.png") no-repeat 50% 50%; ・ ・ ・ } /*====================================================================*/


旧Ver.は以下のセレクタになります。
/*======================================================================      TOP IMAGE W270px X H360px ======================================================================*/ #top_image .image p{ width: auto; ・ background: #ccc url("http://blog-imgs-34.fc2.com/s/l/u/slugsupper/sup11_top_sample.png") no-repeat 50% 50%; ・ } /*====================================================================*/


記事一覧の「NO IMAGE」画像を差し替える(1カラムのみ)

記事に画像が無いとき(このテンプレ使う意味がないけど)に記事一覧で表示される「画像あらへんで」サムネイルをオリジナル画像にしたい場合、幅160px・高さ90px(それより大きい場合は中央からトリミングされます)の画像を用意し、ブログにアップロードします。CSS編集で以下の赤字部分をアップロードした画像のURLに書き換えます。
.headline .sum p{ width: 160px; ※変更不可 height: 90px; ※変更不可 margin: 0 0 2px 0; background: #000 url(" http://blog-imgs-81.fc2.com/s/l/u/slugsupper/noimage_duct_tape.png") no-repeat 50% 50%; ・ ・ ・ }


画像の装飾がいらない(1カラムのみ)

デフォルトでは写真のようにフチとガラスに落ちる影がつきます。必要ない場合はCSS編集で以下赤字部分を削除します。
.entry_body img{ margin: 0; padding: 15px; background-color: #e5e5e5; border-top: 1px solid #fff; border-right: 1px solid #333; border-bottom: 1px solid #333; border-left: 1px solid #fff; -webkit-box-shadow: 0px 5px 5px 1px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 5px 5px 1px rgba(0, 0, 0, 0.75); box-shadow: 0px 5px 5px 1px rgba(0, 0, 0, 0.75); }


ソーシャルメディアボタンがいらない(1カラムのみ)

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のオフィシャルボタンはカウントなしがありません。


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


デフォルトのカレンダー部分がいらない(2カラムのみ)

HTML編集で以下の範囲を削除します。
<!--========== FIXED CALENDAR START (delete if unnecessary) //==========--> ・ ・ ・ <!--==========// FIXED CALENDAR END ==========-->
FIXED CALENDAR STARTと書かれた行からFIXED CALENDAR ENDまでを全て削除。


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

こちらをご覧ください


関連記事
Tweet Hatena

Newer Entryメールでの確認は不要です

Older EntryHalloween

Comments
こんにちは。 
COOLなテンプレートですね。
DE_SUP09d1同様、このテンプレートもFC2に申請→承認されないのでしょうか?
こちらでの直接のDOWNLOAD(右クリック>対象を保存)がどうも上手く反映されないのもあって質問させて貰いました。
Re: こんにちは。 
う~ん 使っておられる方がいらっしゃるので適用できると思うのですが。上手く反映されないとはどのような状況でしょうか?テキストデータが見れないということですか?詳細をお願いします。テキストが見れない場合はOSも。

汎用性の低いものや申請テンプレの類似バージョンは直接配布のみで共有申請はしません。ブログに足を運んでくださる方への特典的な意味もありますのでご了承くださいませ。
こんにちは。 
早速の回答ありがとうございます。
当方の仕方に問題があるようですね。
右クリック>対象をファイルに保存したのですが、テキストデータが見れませんでした。
OSはWindows 7です。

なるほど。テンプレートの一部は特典的な意味合いなんですね。
共有申請がないのは残念です。
Re: こんにちは。 
7ならメモ帳で見れるはずなんですけど‥ 保存したのを右クリ>プログラムから開くでメモ帳で開きませんかね。MKEditorならより確実ですけど。
こんにちは。 
無事、メモ帳で見ることが出来ました。
初歩的な勘違いでした。どうも失礼しました。
そして、ありがとうございました!
Re: こんにちは。 
( ^ω^)b
 
ごぶさたしておりました^^
いつもお洒落なテンプレですねぇ・・・っていうか
今このページのテンプレが欲しいのですが・・・要求していいですか?
Re: タイトルなし 
おつとめご苦労さんです。
このテンプレはやれん。てか私の書きこみルールに合わせて作ってあるんで汎用化するのは無理ですw
カテゴリ数タグ数カテゴリ名の長さ、プラグインの内容量etc... そういうのに左右されるテンプレは配れないんですよね。ブログタイトルだけでもABC!みたいな一単語の人から行を跨ぐ長文タイトルの人までいるわけで。それらがどれも崩れず印象変わらないようにするには色々制限があるですよ。ソリッドカラー(無地)のものは数種ストック(というか作りかけ)があるんで、またそのうちお目見えすると思いますのでそれらで我慢してくんさいw
 
かしこまりました。
もうね他の人のテンプレ使う気になれないSLUG信者ですので
お待ちしております。
Re: タイトルなし 
つってスグ他のテンプレに変えとかんと。華麗なツッコミが披露できんがな。
いやいや ありがとです(^^
RSSのこと 
はじめまして。
すてきなテンプレートとの出会いで、ブログ再開準備中です。
DE_SUP11は、探していたのに無かった、ガラスのテンプレート。
このようなものをフリーで作って下さって、ほんとうにほんとうに感謝いたします!!

ところで、ご多忙中申し訳ないのですが、RSSの件でお伺いしたいのです。
当方GoogleChromeで自ブログ製作中すが、トップページの画像下のRSSをクリックすると
ページソースのような画面になってしまいます。
試しに、IE8でブログを開き、RSSをクリックすると、通常のRSS画面になります。
・・・・・・ナゼでしょうか。
GoogleChromはRSSに対応していない?なんてことは無いと思うのですが
IEだと大丈夫なので、テンプレート側の問題でも無いのかという気もします。
もしも、なにかご存知でしたら、教えて頂けないでしょうか。
Re: RSSのこと 
はじめまして。ご使用ありがとうございます。
ChromeはデフォルトではRSSに対応していません。Chromeでフィードを読み込むには"RSS Subscription Extension"等を追加して機能拡張が必要です。
GoogleChromでのRSSのこと 
SLUG様

早速のお返事どうもありがとうございます。
教えて頂いた拡張機能をインストールし、無事にRSSに対応できました!
Re: GoogleChromでのRSSのこと 
( ^ω^)b
 
こんにちは!
お洒落なテンプレートばかりですね!
特に『DE_SUP11』は探し続けていた至極のテンプレです。

ただ、なにぶん当方が素人の為、
画像の大きさの作業で四苦八苦しております。

当方が使う画像が900×600がメインなので、
どうしても縦横が切れてしますんです。

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