2010.11.11     カテゴリ:  テンプレート 

   《オリジナル・テンプレート》 1カラム黒バック    共用テンプレート《 FDBlack_1columnV2 》

《オリジナル・テンプレート》 1カラム黒バック - バージョン V2.x

特徴
  • 写真ブログを念頭にバックを黒としました。
  • 幅1024ピクセルのPCモニターでもとぎれないように幅を960ピクセルに設定
  • 投稿可能な最大写真幅は940ピクセル
    (カスタムタグ・fcを使った場合は960ピクセル)
  • 記事トップにページのリストを表示。クリックすると記事にジャンプします
  • トップページにのみ最新記事が表示されます
  • 隠しリンクで記事編集ページをワンタッチで開きます
  • 写真の右寄せ、左寄せ、中央配置の3つのオリジナルのカスタムタグを装備


全体の構成
構成は4部になっています
  1. ヘッダー部
  2. メインカラム
  3. ボトムメニュー
  4. フッター
ヘッダー部
ヘッダー画像とヘッダーメニューを含みます。

メインカラム
Plugin3が一番上に、あとページリストが入り、次に最新記事リスト(トップページのみ)が入ります。その次から記事が始まります。

ボトムメニュー
ここにPlugin1、2が表示されます。
プラグインはそれぞれ「一つの箱」として左から右に並べられます。右に余白がなくなると左下へ配置されますが、箱の高さが異なると配置が変化します。
プラグイン1、プラグイン2はそれぞれ一つのブロックして処理しています。

フッター
著作権などを表示する部分です

隠しリンク
ページリスト、最新記事、記事タイトル部の日付の右の隠しリンクをクリックするとその記事の編集ページが新しいウィンドウで開きます。

オリジナルタグ
写真の右寄せや左寄せができてその左、または右に文章を入れられます。写真の上下に説明も入れることができます。

タグは

fc、fr、fl タグ
中央配置 <div class="fc"> ~ </div>
右寄せ <div class="fr"> ~ </div>
左寄せ <div class="fl"> ~ </div>
を使います。

中央配置の使用例
--------------------------------
<div class="fc">
画像説明文(写真上部に金文字で書かれます)
<img src="xxxxxxxx.jpg">
</div>
--------------------------------


右寄せの使用例
--------------------------------
<div class="fr">
画像説明文(写真上部に金文字で書かれます)
<img src="xxxxxxxx.jpg">
</div>
記事・・・・・・・・・・・・・・・・・・・・
(写真の左に書かれます)
<br clear=all>
--------------------------------
最後の<br clear=all>タグは回り込みを防止するために必ず入れてください。


左寄せの使用例
--------------------------------
<div class="fl">
画像説明文(写真上部に金文字で書かれます)
<img src="xxxxxxxx.jpg">
</div>
記事・・・・・・・・・・・・・・・・・・・・
(写真の右に書かれます)
<br clear=all>
--------------------------------
「<div class="fl"></div><br clear=all>」として単語登録しておくと使いやすいです。


カスタマイズ
  • ヘッダー画像の設定
    オリジナルのヘッダー画像は960 x 240ピクセルを使用しています。画像の差し替えは可能ですが、高さを240ピクセルから変更した場合はスタイルシートの変更が必要です。画像差し替え手順は
    1. 画像をアップロード
    2. スタイルシートを変更します。
      スタイルシートの最後あたりの"カスタマイズ"部の「ヘッダー画」項を書き換えます。

      /* カスタマイズ
      ============================================================ */
      /* ヘッダー画像 */
      .header_title {background:#000 url(http://blog-imgs-32.fc2.com/s/c/e/scenewayfc/aosagi_960x240.jpg) no-repeat top;}
      .header_title {height:240px;}

      http://blog-imgs-32.fc2.com/s/c/e/scenewayfc/aosagi_960x240.jpg を新しい画像のurlに変更します。
    3. イメージの高さを変更したときは height:240px; の値を調整します。 
  • ヘッダーメニュー部にメニューを追加する
    HTMLファイルの <!-- ヘッドメニュー -->部にメニュー項目を追加します。
    1. <ul>~</ul>>の後か先に
      ===================
      <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      </ul>
      ===================
      の形式をを追加します。
    2. <ul>~</ul>で一つのブロックができ、ブロックとブロックの間はスペースで区切られます。
  • 投稿部分の初期設定
    投稿部分のフォントサイズ、文字色など、初期設定を変更したいとき
    1. /* 投稿部の初期設定 */
      .entry_body {text-align:left;}
      の{ }内を変更、追加します。
    2. たとえば投稿部デフォルトの文字の大きさを変える
      .entry_body {text-align:left; font-size:20px;}
    3. さらに文字色を青くする
      .entry_body {text-align:left; font-size:20px; color:#0000FF;}
  • カテゴリー表示を横並びにする
    カテゴリーがたくさんある場合、下にどんどん続くので横並びに変更します。


    プラグインのHTML編集を使います。
    1. プラグイン管理ページでカテゴリープラグインの詳細設定をクリックして編集ページに移動。
    2. 【HTMLの編集】をクリックして内容を下記のように変更します。
      ============================
      <!--category-->
      <div class="fl" style="width:180px;padding-right:30px;">
      <span class="fr">(<%category_count>)</span>
      <a href="<%category_link>" style="display:block;"><%category_name></a>
      </div>
      <!--/category-->
      =============================
    3. width:180px;
      の数値を変えると列の幅が変わります。最大カテゴリー名の幅に応じて変更します。
    4. padding-right:30px
      の数値を変えると列間の隙間が変わります。
    5. (注) IEでのバグを回避するため、プラグインカテゴリグループの先頭に入れてください。
      (ほかのブラウザでは問題ないのですが・・・)


できあがりのレイアウトチェック  - 各ブラウザで

テンプレートを変えたらなるべく各ブラウザでレイアウトが崩れていないか、チェックしておきたいものです。
ブラウザの表示については大きく2つのグループに分けられると思います。

 A. マイクロソフトのInternet Explorer系
 B. Firefox、Google Chrome、Safari、Opera

Bグループの表示は各ブラウザ各バージョンともにだいたい同じで安定していますが、AグループのIE系はIE6、IE7、IE8すべてで表示が変わりますのでちょっとやっかいです。特にIE7とIE8で差が大きいです。(おそらくIE8でHTMLの規格に準拠させた?)
IE8がB系のブラウザに一番近いのですがIE8には互換表示(たぶんIE7の表示にする)があって、FC2ブログの場合、自動的に互換表示になるようでIE8を選択して見ることができないようなのです・・

従ってFC2ブログのチェックはBグループのどれか一つとIE系のIE6、IE7でチェックする必要があると思いますが、一般的にはIE6,IE7の両方でチェックできませんので、シェアから考えて(IE6は現在10%ぐらい)IE7かIE8のどちらかでいいですかね。

FC2ブログのコーディングは日本語ですので中国字やほかの言語を表示させる場合、IE系とSafariで文字化けや文字欠けが起こりやすので要注意です。
関連記事
素晴らしい所に辿り着きました。
日本国内でないのですね。随分遠いです。
まだフレームがお借りしてないのですが、参考になる事が
いっぱいあるようですね。いろいろ参考になるようです。
ありがとうございました。
みなきのなおみさん 初めまして。
津軽林檎のページ拝見しました。日本ではないような感じでとてもいいですね。
どんなものになるのか楽しみです。
今、FDBlack2columnをダウンしたのですが、右のフレームが出てこないのです。どうすればいいでしょうか。実は二つのブログを管理しているのです。
今使用しようかなぁと思っているのは、「僕だけの岩木山」の方なんです。

みなきのなおみ さん

右のフレームはプラグインを表示するようになっています。
プラグインの設定をされていないのでは?
http://scenewayfc.blog59.fc2.com/blog-entry-729.html
↑ この構成図を参考にしてください。

「僕だけの岩木山」を見ますとサイドメニューはTHMLで直接書かれているようなので出ないと思います。

直接HTMLで書かれる場合はHTML編集の

<!-- サイド メニュー side_menu
============================= -->
<div id="side_menu">
・・・・
</div><!-- side_menu -->


・・・の部分に書き込んでください。
  • 管理人のみ閲覧できます
  •  - 
  • 2012.08.28 15:52  
  •  [ 編集 ]
このコメントは管理人のみ閲覧できます
上に書いてくれた事実行してみましたが、どうも巧く行きませんでした。

FC2のサイトの何処でみたのか忘れたのですが、前に使用したフレームを
初期化できるとありましたが、ご存じないですよねぇ
すみませんです。

なおみ
みなきのなおみ さん
初期化するのはHTMLファイルとスタイルシートだけですよ。
プラグインはそのままです。
Sceneway さん
どうもありがとうございました。
  • 管理人のみ閲覧できます
  •  - 
  • 2012.09.03 15:38  
  •  [ 編集 ]
このコメントは管理人のみ閲覧できます
  • すばらしい!
  •  NK 
  • 2014.11.27 06:37  
  •  [ 編集 ]
すばらしいテンプレートですね。
ちょっとカスタマイズして使用させて頂きます。
ありがとう。
(^_^)v
よかったです  (^_^)





トラックバック


この記事にトラックバックする(FC2ブログユーザー)



Produced by Sceneway copyright © "深圳と香港の日々 - Funny days in Shenzhen + Hong Kong" all rights reserved.
powered by