タグ 《 2カラム黒バック 》  ( 1 記事  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. 検索結果の表示をきれいに(以前のカスタムタグが残っていたため)


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