カテゴリー 《 テンプレート 》  ( 3 記事  1 ページ )

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

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

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

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


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

サイドメニュー
ここにプラグイン1とプラグイン2が表示されます。

メインカラム
先頭にプラグイン3が入ります。「最近の記事」「ページリスト」が続き、そのあとから記事が始まります。

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

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

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

タグは

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. スタイルシートを変更します。
      スタイルシートの最後あたりの"設定"部の「ヘッダー画」項のurlを書き換えます。
      #header {background: #000 url(http://blog-imgs-32.fc2.com/s/c/e/scenewayfc/kubiwamukudori_960x240.jpg) center 2px no-repeat;}の
      http://blog-imgs-32.fc2.com/s/c/e/scenewayfc/kubiwamukudori_960x240.jpg を書き換えます。
    イメージの高さを変更したとき
    1. 設定部「ヘッダー画の高さ設定」項の .header_title {height: 240px;} の数値を変更
  • 右メニューを左メニューにする
    スタイルシートを2カ所変更 「設定」部 「左右メニュー設定」項の
    1. #side_menu {float:right;} === right を left に変更
    2. #main_column {float:left;} === left を right に変更
  • 投稿部分をセンター寄せにする
    写真だけを投稿したりするときに写真をセンターに置きたいときなど。
    文字、写真全部センター寄せになります。
    スタイルシートを1カ所変更 「設定」部 「投稿部の整列」項の
    1. .entry_body {text-align: left;} === left を center に変更
  • メール設定
    ヘッダーメニューにメールボタンも表示できます。
    1. HTMLファイル・ヘッダー部の
      <!--
      <li class="headmenu_mail"><a href="">Mail</a></li>
      -->
      の部分の "<!--" と "-->" を削除して
      <li class="headmenu_mail"><a href="">Mail</a></li>
      とします
    2. <a href="">を設定します。アドレスを直接書き込む場合はmailto:のあとにアドレスを書きます。
      <a href="mailto:aaa@bbb.com">
  • ヘッダーメニュー部にメニューを追加する
    HTMLファイルの <!-- ヘッドメニュー -->部にメニュー項目を追加します。
    1. <ul>~</ul>>の後か先に
      ===================
      <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      </ul>
      ===================
      の形式をを追加します。
    2. <ul>~</ul>で一つのブロックができ、ブロックとブロックの間はスペースで区切られます。
  • 写真の金枠を消す
    1. スタイルシートを変更
      システム・タグ部のイメージ項
      .entry_body img {padding:0;margin:5px 0px;border:1px inset Goldenrod;}のborderを削除して
      .entry_body img {padding:0;margin:5px 0px;}とします
  • 「太字」の色を変更する (投稿エディタの「B」)
    デフォルトは「Tomato」に設定されていますがほかの色にしたいとき
     色の一覧は  HTML Color Chart  を参照
    1. スタイルシートの最後の方の「システムタグ」部「強調」項の
      .entry_body strong {color: Tomato;}
      の Tomato を変更します。
      色の名前か数値(16進数)で変更します。数値の場合先頭に#をつけます。たとえばWhiteの場合
      color:White またはcolor:#FFFFFF とします。(大文字・小文字は区別されません)
    2. 指定を消去して .entry_body strong {} とすると普通字と同色で文字が太くなるだけとなります。

  • ページリスト
    ページリストの表示はHTMLファイルの
    <!-- ページリスト
    ----------------------------- --> から
    </div><!-- pagelist --> までの部分です。
    不必要ならばファイルから削除します。

  • 最近の記事
    最近の記事表示はHTMLの
    <!-- 最新記事
    ----------------------------- --> から
    <!-- 記事部分手前の <!--/index_area--> までの部分です。
    不必要ならこの部分を削除します。

  • 投稿部分のスタイル初期設定
    投稿部分の見栄えはスタイルシート「投稿記事内で使用するタグ」部の「.entry_body」 項に記述されます。

    /* 投稿記事内で使用するタグ (上記の全体設定も参照)
    ============================================================ */
    .entry_body {}

    従ってデフォルトの初期設定を変更したい場合は{}内に必要項目を追加します。たとえば
    1. .entry_body {color:#FFFFFF;}
      とするとデフォルトの文字色が#FFFFFF (白)となります。 (参考  HTML Color Chart   )
    2. .entry_body {color:#FFFFFF; font-size:20px;}
      とすると文字色が白でフォントサイズが20pxのデフォルトとなります。
    (注) 少し上、「投稿部の整列」項にも.entry_body がありますがどちらに書き込んでも有効です。

FDBlack2column V2.x
バージョンV1からの変更内容 (HTML、スタイルシートの上部にバージョン表示があります)

見栄え調整など
  1. ヘッダーメニューの位置変更(ヘッダー画像変更を簡単にするため)
  2. サイドメニューのbackground-colorをなくす(見栄え)
バグ修正
  1. Firefoxでのinputボックスの不具合対策(マウスでの選択、右ボタンが使えなかった)
  2. 検索結果の表示をきれいに(以前のカスタムタグが残っていたため)

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

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

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

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


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

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

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

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

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

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

タグは

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>」として単語登録しておくと使いやすいです。

カスタマイズ例
  1. ヘッダー画像の変更
    ヘッダー画像を変更する時は960 x 240ピクセルのサイズを使ってください。手順は
    1. 画像をアップロード
    2. スタイルシートを変更
      スタイルシートの最後あたりの"background image"の項の「ヘッダー画」のurlを書き換えます。
    幅は960ピクセル固定です。高さは変更可能ですがスタイルシートの変更が必要です。変更箇所は
    1. "#header"の"height"を変更
    2. ".header_title" の "height"を変更
  2. メールメニュー設定
    ヘッダーメニューにメールボタンも表示できます。
    1. HTMLファイル・ヘッダー部の
      <!--
      <li><a href="">Mail</a></li>
      -->
      の部分の "<!--" と "-->" を削除して
      <li><a href="">Mail</a></li>
      とします
    2. <a href="">を設定します。アドレスを直接書き込む場合はmailto:のあとにアドレスを書きます。
      <a href="mailto:aaa@bbb.com">

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で文字化けや文字欠けが起こりやすので要注意です。


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