上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
FC2用テンプレート・3フェイス・ブラックCE

基本テンプレート3枚を更新!
現在バージョンアップし、この記事内容が適応できない部分もあります。

 サイドバーが2列に分かれているのが特徴の「CE」です。アドセンスなどの広告サイズ最適バージョンです。
 上図のように、右上に最大サイズのバナー・レクタングル(336x280)サイズがぴったり収まります。また、その下には縦長バナー・スカイスクレイパー(120x600)サイズもきっちり収まる設計。
 広告やバナーを綺麗に配置したい人は是非ご利用ください。

 このテンプレートは「サイドバーを左側にしてみる」のカスタマイズ対象外です。左右替えをするにはCSSの知識が若干必要になります。




 
使う前に


 必ずやって欲しいのが、右上のサンプルバナーの部分を必ず消してください。リンクも入っていないダミーのため、そのままテンプレートを使うと、訪問者が本当の広告と思ってクリックする様な動作を行い、迷ってしまうかもしれません。結果的に、あなたのサイトの信頼度を下げてしまうかも知れません。



消し方

 まず、「テンプレートの設定」画面で「Ctrl」+「F」キーを押してページ内検索ボックスを立ち上げます。そして…

と、検索してください。

<!--サイドカラム-->
<div id="side">



<div class="box_336">

<!-- (336 x 280 size) 専用 広告挿入場所 ▼-->
<div style="position:relative;z-index:0;"><img src="http://blog-imgs-44.fc2.com/d/e/s/designlabolatory/adsence-size-sample-336x280.gif" alt="サンプルです。このテンプレートは、ここを消してから使ってください。" /><div style="position:absolute;z-index:1;bottom:10px;right:10px;font-size:12px;color:#000;">こちらを消してからお使いください。<br>Please use after erasing here.</div></div>
<!-- (336 x 280 size) 専用 広告挿入場所 ▲-->

</div>



<div class="side_right">

 この、赤字部分をすべて消します。分かる方は、上下のコメント部分も消しても大丈夫です。

 こちらにぴったり(336x280)サイズのモノが入るようになっています。もちろん何も入れなくても大丈夫。



サイドバーの設定


 プラグインは、「プラグイン1」が右端に、「プラグイン2」が、その左隣に入ります。つまり、プラグイン2の方へ「スカイスクレイパー」という、細く縦長のバナーがぴったり入ります。
 プラグイン3は、トップページ、繰り返し記事表示部分の一番下へ挿入されます。


 また、基礎はこちらのテンプレートから構築しています。興味がおありの方は、こちらの方もご覧ください。
3フェイス・ブラック


テンプレートの特徴


ブックマークボタン&RSSフィードボタン
 グーグル、ヤフーのマイページに、アイコンクリックで簡単に追加できます。
 RSSフィードは多用途に。

 また、はてなブックマーク追加ボタン、ツイッターボタンで、訪問者の煩雑な作業を軽減。ブログが気に入られたのに、お気に入り登録やフィードの追加がめんどくさくてそのまま忘れられる。と言うのを防ぎます。
記事最下部ナビゲーション 次の記事の導入、新着エントリー、タグリストを本文下部に。
 ページを最後まで読み切ってくれた訪問者への利便性を上昇させています。次のページへのリンクや、新着記事が記事本文直下にあり、間髪入れずに次のページへのご案内。訪問者の興味が別のところに移るのを、なるべく抑える仕組みです。
クールなコメントフォーム 綺麗な便箋に必要事項を入力するイメージです。
 ストレートな入力フォームをデザインして、ソフト・クール・シンプルに。
プラグイン2
(3フェイス・センス)
 スキンプラグインです。
 周りの枠や、「カテゴリー」だとか「新着記事」のようなプラグインタイトルが表示されず、プラグインコンテンツのみがそのまま表示されます。
 美しいブログパーツや、広告スペースなどにオススメです。タイトルに「ブログパーツ」とか「フリーエリア」などと表示されてカッコ悪い場合は、プラグイン2へコンテンツを移動してみてください。
プラグイン3
 トップページのみに表示されるプラグインです。
 本文部分に表示されます。



テンプレートサイズ

3フェイス・センス
●ヘッダー
920px
●メインカラム
510px
●サイドバー
120px
●サイドバー
192px(174px)
●フッター




ブロック構造

<div id="conteinar">
コンテナ
<div id="header">
ヘッダー
</div>
<div id="header">
パンくずナビ
</div>
<div id="header">
カテゴリバー
</div>
<div id="main">
メインカラム
</div>
<div id="side">
サイドバー(右にフロートします)
</div>
<div class="left_box">
サイドバー(左にフロートします)
</div>
<div id="footer">
フッター
</div>
</div>


■カテゴリバーが崩れる方は?
カテゴリバーの編集




カスタマイズしてみよう


 最低限のテンプレート最適化は施してあります。あとは、自由にテンプレートを改造していくだけ。
 簡単にできるカスタマイズから始めてみよう!

①大きなブログパーツや、300pxサイズの広告を美しく表示してみよう。
②ランキングボタンやブックマークボタンを配置しよう。
③バナー、ロゴをオリジナルにしてみよう。

 これらのヒントは、カスタマイズカテゴリーの項目にヒントが隠されています。

テンプレート簡単カスタマイズ
シンプルテンプレートのHTMLカスタマイズ詳細
世界のブログパーツ




ヘッダー画像・ロゴをオリジナルに

 このテンプレートには、あえてヘッダーに画像を入れていません。
 オリジナルのロゴ画像を挿入し、他のブログに差を付けることを考慮に入れてデザインしています。

■ロゴ作成のチュートリアル
ロゴをデザインしてみよう
CUTIE PHOTOSHOP・キューティーフォトショップアート
 ロゴ | CUTIE PHOTOSHOP・キューティーフォトショップアート

■素材探し
3faithテンプレート専用ヘッダー素材
無料写真素材・もみじローカル
きらきらフォントコレクション




テンプレートのダウンロード方法


テンプレートダウンロードは、FC2管理画面の共有テンプレート検索「作者」で

 で、一覧が表示されます。

☆FC2ログイン画面へ
FC2ID


■全テンプレート一覧はこちらから。
テンプレート一覧


 このテンプレートに関してのご質問、不具合は、必ず以下のコメント欄からお願いいたします。FC2サポートやヘルプ等では、恐らく個別のテンプレートに関しての質問は受け付けていないと思いますので…
このエントリーをはてなブックマークに追加
Sun.09.26.2010
Comment
88
現在、このテンプレートを使わせていただいているのですが、FC2ブログにて対応している「リツイートボタン」と「いいねボタン」と同列に、はてなが提供している「はてなブックマークボタン」を設置しようとしているのですが、うまくいきません。
コードを挿入している箇所は、<%topentry_more>の後なのですが、表示してくれません。
もし、理由が分かりましたらアドバイスいただければ幸いです。
ご検討よろしくお願いします。

89
Re: タイトルなし
 なるほど、これは難しいですよね。
 一番簡単なのは、このボタンをFC2の設定で表示するのではなく、「ツイッター」と「フェイスブック」から、直接タグを取ってきて、HTMLに直接配置する方法だと思います。(ツイッターはボタンが置いてあったのを見たのですが、フェイスブックの方は未確認です…)


 後は、HTMLタグのポジション「position」で「bottom」から強引に設置する方法か、ネガティブマージンを使う(マージンにマイナスの値を入れる)とか、JavascriptとかjQueryなんかで、無理矢理後から表示させるとかが考えられますが…やはり、はてなと同様にタグを取ってくるのが一番無難ではないかと思います。

90
早速のアドバイス有難う御座いました。
本家からタグを持ってくるやり方でトライしてみます。

115
不思議な四角い枠が・・・
はじめまして。
現在このテンプレートを利用させて頂いております

素晴らしいテンプレートの数々を提供してくださり
本当にありがとうございます。感謝の気持ちが絶えません。

早速質問で申し訳ないのですが・・・
現在使用しているブログで、アフィリエイトリンクなどを貼った際に
文字や画像の周りに不思議な四角い枠が出てきてしまいます

一つだけではなく複数個でてきてしまう物もあります

これを消したいのですが、どのような編集を行えば宜しいでしょうか?

グーグルで色々検索して頑張ってみたものの、解決に至らず
ご多用の中失礼かとは存じますが、ご本人様に解決方法を伺いたい次第でございます

お手すきの際で構いませんので、何卒ご教示頂ければ幸いです

116
Re: 不思議な四角い枠が・・・
 恐らく、サイドバーの中の右のサイドバーに画像を貼ったときに出てくる枠だと思います。
 これは、以下の一文を消すことで、枠が出なくなります。

--------------
.side_right img{
background:#fff;
padding:2px;
margin:2px;
border:1px solid #ccc;
}
--------------

 テンプレートの編集画面で「.side_right img{」などで、画面内検索をかけてみてください。

117
直りませんでした
迅速なご返答ありがとうございます
そのとおりにやってみたのですが、消えませんでした

http://blog-imgs-46.fc2.com/n/a/n/nandemo767/sikaku.jpg

このような状態になってしまいます
画像に枠が出るのが問題なのですかね・・・

修正できたら嬉しいのですが・・・難しいでしょうか;

お手数かけまして申し訳ないですが、アドバイス頂けましたら幸いです

118
Re: 直りませんでした
 あ、なるほど本文部分ですね?
 それでしたら、以下の一文を削除します。

----------------------
.text_body img{
margin:0 5px 0 0;
border:1px solid #ccc;
padding:3px;
}
----------------------

 これで、本文部分にも画像に枠が出なくなると思います。
 アフィリエイトが「訪問者確認」に非常に小さな画像を使っているようなので、それで小さな四角が出てしまうんですよ。画像の周りの設定をすべて取れば大丈夫のハズです。

119
遅れましてすみません・・・
お返事ありがとうございます

おかげさまで無事修正されました
見栄えもよくなり大満足です

このテンプレートを大変気に入っていまして、何とか継続して使いたかったもので・・・

重ね重ねありがとうございました
影ながら応援しておりますので、また機会がございましたら懲りずによろしくお願い致します

177
こんばんは^^  ありがたく使わせていただいております

 このテンプレートのヘッダー部分に画像を挿入したいのですがやり方がわかりません・・・


 よろしければ教えていただけませんでしょうか?

178
Re: タイトルなし
 テンプレートのご利用ありがとうございます☆
 テンプレートのバージョンは「version 2.0」ですよね?(テンプレートのスタイルシートの一番最後の行に記述してあります。)
 ヘッダーの背景画像と言うことで宜しいですか?

 その場合でしたら、まずはテンプレート編集画面で、「Ctrl」+「F」キーを押して画面内検索を行います。
『#header』と検索してみてください。以下の記述が出てきます。

--------------------
#header{
text-align:left;
margin:0 auto;
background:#333;
}
--------------------

 コレを、以下のように書き換えます。

--------------------
#header{
text-align:left;
margin:0 auto;
background:#333 url("http://アップロードしたヘッダー画像のURL.jpg") no-repeat left top;
height:○○px; (画像の高さ)
}
--------------------

 コレで完成します。

179
見るのが遅くなってすいません  結構いじったんですがそのせいかurlに画像を挿入して 100pxくらいにしても 背景が真っ暗になっています
 http://taiou7.blog.fc2.com/

 どうぞよろしくお願いします

180
Re: タイトルなし
 書式が若干間違ってます。「;」を「半角スペース」に書き換えてみてください。

background:#333;url("http://アップロードしたヘッダー画像のURL.jpg") no-repeat left top;

background:#333 url("http://アップロードしたヘッダー画像のURL.jpg") no-repeat left top;

181
 無事できました ありがとうございます ・・・が画像が大きいです

 圧縮して載せることはできますか? 今500pxです 200か300にしたいのですが

183
Re: タイトルなし
 背景画像はサイズ指定できないので、画像編集ソフトで加工した方が早いですよ。

 CSS3であれば、確かできたような気がするのですが、未だIE7、IE8のシェアが大きいので、あまり現実的ではないと思いますので。

184
紹介文が反映されないのですが、、、
こちらのテンプレートが気に入り、ダウンロードさせていただきました。カテゴリがわかりやすい位置に配されていること、色々な解像度でも崩れないこと、文字がほどほどに大きいことなどが気に入りました。おかげさまですぐに結果が出ました。グローバルナビに、記事カテゴリーがあるこのテンプレートしてすぐに、回遊率がアップ。直帰率が14%ほど低下(改善)され、滞在時間も約1分伸びております。ありがとうございます。すごい力です。ありがとうございます。

質問です。
ヘッド画像をオリジナルに変えたのですが、「紹介文」が出ていないことに気づきました。いじっているうちにプラグインが消えたりしてわからなくなってしまいました。どこを書き換えればいいか教えていただきますか?? 

ブログ:http://majorcategorized.blog91.fc2.com/

ヘッド画像差し替えに参照させていただいた御社のページ
http://designlabolatory.blog16.fc2.com/blog-entry-340.html
↑このページの説明通りにやったつもりですが、できていないのだと思います。訂正箇所がわからず、質問させていただきました。

よろしくお願いいたします。

185
Re: 紹介文が反映されないのですが、、、
 これは失礼しました、私のほうでの記述漏れでした。

http://designlabolatory.blog16.fc2.com/blog-entry-340.html

 この記事の一番最後辺りを確認してみてください。赤字で修正してあります。
 色指定の記述漏れでした。
 なお、Hirotee-1969様のブログの場合、紹介文が長いので、タイトルと紹介文で2行となると思います。これはHTMLの仕様として致し方ない部分なので、もし気になるようでしたら、フォントサイズの指定などしてみてください。
 また、文字色の明度を落とすのも方法論の一つとしてあると思います。
(色指定については「http://designlabolatory.blog16.fc2.com/blog-entry-18.html」この辺りを参考にしてみてください。)

(例)
font-size:12px;
color:#ccc;

フォントサイズを「12px」に
フォントカラーを「#ccc」に

186
Re: 紹介文が反映されないのですが、、、
スタンダード・デザインラボ様

お世話になります。
早速のご回答をありがとうございました。 ご指示通り訂正したところ、紹介文が反映されるようになりました。
文字色と背景色が同じだったから見えなかったのですね。失礼しました。
適切な回答を誠にありがとうございました。
このブログをもっと読ませていただいて、色々勉強させていただきます。

192
Linkwithinのタグを入れる場所について
スタンダード・デザインラボ様
お世話になります。
回遊率をアップさせるため、各記事の下に「この記事を読んだ方はこんな記事もお読みになっています」とう"画像つきで関連記事が反映されるLinkwithin"というツールを使って表示させようとしています。
そのツールは、タグをHTMLの</body>の手前に設置させればよいのですが、そこまでは大丈夫なのです。
ただ、任意の場所に表示させるために<div class="linkwithin_div"></div>というタグを入れなければなりません。 私とすれば、拍手・リツート・いいねのボタンと、コメント欄の上の横線の間のスキマを広げて設置させたいのですが、そこの場所がどこなのかちょっとわからないのですが、教えていただいてよろしいいでしょうか?? よろしくお願いします。 


193
Re: Linkwithinのタグを入れる場所について
 個別記事ごとに表示されると言うことでしたら、

///////////////////////////////////////////////
<!--追記-->
<!--more-->
<div id="more"><%topentry_more></div>
<!--/more-->
</div><!--/text_body-->
///////////////////////////////////////////////

 この部分を探します。「Ctrl+F」で画面内検索ボックスを出して「<!--追記-->」辺りで検索してみてください。

///////////////////////////////////////////////
<!--追記-->
<!--more-->
<div id="more"><%topentry_more></div>
<ブログパーツのタグ>
<!--/more-->
</div><!--/text_body-->
////////////////////////////////////////////////

 こんな感じで追記します。コレで個別記事のみで、恐らく希望されている場所に表示されると思います。


(追記)
 FC2ブログの拍手ボタン等の表示が、先か後かどっちに表示されるか失念してしまったので…もし<!--more--> ~ <!--/more-->間に入れられない場合(FC2拍手ボタンとの場所の関係が気に入らない場合)は、下のタグを使います。

<!--permanent_area--><ブログパーツのタグ><!--/permanent_area-->

 こちらなら、<!--more--> ~ <!--/more-->間に入っていなくても、個別記事でのみの表示が可能です。

194
Re:Re: Linkwithinのタグを入れる場所について
スタンダードデザインラボ様
お世話になります。
早急にご対応いただき、感謝申し上げます。
追記で教えていただいたところに入れることができました。
その場所が最適でした。ありがとうございました。
画像が出るかどうかは、画像を入れた記事があるかどうかによるそうなので、
そこはツール側を研究したいと思います。
お忙しい中、ありがとうございましたm(__)m

Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。