fc2ブログ
FC2用テンプレート・3フェイス・ブラック

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

 3フェイスシリーズのスタンダード3カラムバージョンです。見た目は3カラムですが、HTML上は2カラムと同じ構成のテンプレートで、3カラムテンプレート特有のSEO上の弱点がありません。
 デザインは、白と黒、ほとんどスタイルのみでの構成ですが、今まで修正を重ねてきたデザインを踏襲しており、細部のデザインも隙がないように作り上げています。シンプルですが、妥協はありません。また、さらに日付表示は当サイトテンプレートで採用している背景画像のように記事タイトルに重ねて表示されます。
 クールなデザインですよ☆

※徹底改造コーナーはじめました。
3FaithBlack徹底攻略・はじめに


テンプレート構成について


テンプレートHTML構成

 テンプレートHTMLは、1行目から順に「ヘッダー」「メインカラム」「サイドバー右」「サイドバー左」「フッター」の順番で構築されています。
 検索ロボットはブログの上部から順番に読んでいくと言われています。従来型の3カラムテンプレートは、表示構成上、「ヘッダー」の次に「サイドカラム左」「メインカラム」…と記述することがほとんどだと思います。そうすると、先にサブアイテムの「サイドバー左」を読み込んだ後に「メインカラム」の内容を読むことになってしまいます。そうすると、ロボット側で「サイドバー」に入っているブログパーツや時計、カレンダーなどの飾り的アイテムこそが、このサイトのメインコンテンツだと勘違いする可能性があります。

 当サイトでは、CSS制御で「メインカラム」を配置した後に「サイドバー左」を配置しているので、その不安要素を回避することができます。2カラムとほぼ同様のものと認識するはずです。「divボックス」コーティングが僅かに増えていますが、2~3行なので、気にする必要はないと思います。




テンプレートの特徴


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

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



テンプレートサイズ

●ヘッダー
960px
●サイドバー
180px(160px)
●メインカラム
510px
●サイドバー
180px(160px)
●フッター



ブロック構造

<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カスタマイズ詳細
世界のブログパーツ


(徹底的に改造したい場合は、以下も参照して下さい。)
3FaithBlack徹底攻略・はじめに




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

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

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

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




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


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

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

☆FC2ログイン画面へ
FC2ID


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


 このテンプレートに関してのご質問、不具合は、必ず以下のコメント欄からお願いいたします。FC2サポートやヘルプ等では、恐らく個別のテンプレートに関しての質問は受け付けていないと思いますので…
このエントリーをはてなブックマークに追加
Thu.06.24.2010
Comment
189
デザイン崩れ
TOPページから一番下の記事以外の続きを読むから見てもデザインは崩れないんですが、TOPページから一番下の記事だけサイドバーが左に移動したりしてしまいます。

190
 それはかなりの確率で、その崩れる「記事の追記部分」に記述ミスがある可能性が高いです。
 タグの閉じ忘れや、記述ミスがないか確認して、再度記事を投稿しなおすことでレイアウト崩れが解消されるかと思います。

209
こんばんは。
SDLさんの3FaithBlackをカスタマイズして
愛用させて頂いてます、SHUNです。
いつもありがとうございます。
こちらのブログの運用は
停止されているようなので、
先にメールで伺わせて頂きました、
そちらが届きましたら
こちらでの返答は必要ありません。
プラウザはIE9、
URLはTOPが
http://12shun24.blog.fc2.com/
今回不具合を発見したのが
http://12shun24.blog.fc2.com/blog-entry-3.html
です。
特定の記事で「続きを読む」をクリックした際にこうなってしまうのですが、
この追記部分が多いのが原因でしょうか?
まだ自分はブログを始めたばかりで
こちらのサイトを参考にCSSしかいじっておりません。
どの部分がどう対応しているのか、
プレビューしながら手探りの状態だったので
もしかするといくつかいじってはいけない部分も
触ってしまったのかもしれません。
必要になる場合を考え、
CSSをコピーしたものを添付できるよう、
メールアドレスも記載しておきました。
☆を@、yahooはyahoo.co.jpでお願いします。
(CSSのコピーはさすがに
こちらのフォームで添付すると大変かと思いまして…)
もしよろしければご助言下さい。

SHUN

210
Re: タイトルなし
ご報告ありがとうございます。これは、テンプレート側のミスです。失礼しました。

(誤り)

<!--○次のページ○新着○タグリスト○-->
<!--permanent_area-->
<!--nextentry-->
<div class="float_navi">

<div class="next_entry_entry_floatNext">
« <a href="<%nextentry_url>"><%nextentry_title></a>
</div>
<!--/nextentry-->
<!--preventry-->
<div class="next_entry_entry_floatPerv">
<a href="<%preventry_url>"><%preventry_title></a>» 
</div>
<!--/preventry-->
<br clear="all"/>
</div><div class="clear"></div>




(正)

<!--○次のページ○新着○タグリスト○-->
<!--permanent_area-->
<div class="float_navi">
<!--nextentry-->

<div class="next_entry_entry_floatNext">
« <a href="<%nextentry_url>"><%nextentry_title></a>
</div>
<!--/nextentry-->
<!--preventry-->
<div class="next_entry_entry_floatPerv">
<a href="<%preventry_url>"><%preventry_title></a>» 
</div>
<!--/preventry-->
<br clear="all"/>
</div><div class="clear"></div>


お手数ですが、まずテンプレート編集ページで

「ctrl」+「F」キー

にて、画面内検索ボックスを出します。そして、検索語に

「○次のページ○新着○タグリスト○」

と入力してみてください。そうすると、誤りのHTML部分が出てきますので、これを(正)の方に置き換えてください。
これで正常な表示になるはずです。
一応登録し直してみたのですが、CSSをいじられていると言うことで、テンプレート丸々交換してしまうと、せっかくのカスタマイズが水の泡になってしまうので、上記の手順で手作業で直して頂くのが宜しいかと思います。

お手数をおかけします、申し訳ないですが、宜しくお願いします。
もし直らないようでしたら、またご報告お待ちしています。

Trackback
ドーモ、シチョーシャ=サン。ゆっくりいけちゃんです。 忍殺語が抜けない今日この頃、いかがお過ごしでしょうか。 今日はブログのデザインを変えてみたお話を少々。 ブログを始めて早くも2週間ほど経過しました。 そろそろド素人ブロガーから素人ブロガーへと大きく進化した頃ではないかと自負しています! (´・ω・`)ビフォー    ...
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.