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">
関連記事
はじめまして。
やっと1カラムで、シンプルでステキなテンプレートに出会えて本当に嬉しいです。
使わせていただきたいと思っているんですが
とにかくシンプルに、写真をメインにしたいとおもっています。
記事前に出る「ページリスト」と「最新記事リスト」というのは消すことは出来ないのでしょうか?
これは、ルール違反になるのでしょうか?
初心者なゆえ、失礼なことでしたら申し訳ありません。
可能であればやり方を教えてください。よろしくお願いいたします。
マダム鈴木さん、初めまして。
私はそういう条件を出していませんのでルール違反ではありません。

HTMLファイルの
<!--// ページリスト↓-->から
<!--// ページリスト↑ -->まで
の42行と

<!--// 最新記事↓  -->から
<!--// 最新記事↑  -->まで
の15行を削除してください。

ただしこれだと「次のxxページ」というナビが出ません。(ページ最後の部分のナビは残ります)
ナビだけ必要、ということであれば、削除した部分に

HTMLファイル下部の
<!--// 記事ページリスト↓ -->から
<!--// 記事ページリスト↑ -->まで
をコピーしてください。
素早い回答ありがとうございますっ !!
1カラムで写真がこれだけ大きく載せられるテンプレートは無かったので
これから更新が楽しみです♪
丁寧な解答ありがとうございました。
また1カラムのステキなテンプレートの新作を期待しています♪

野鳥が大好きなので、またのぞきに来させていただきます♪

はじめまして。このテンプレートを使わせていただいております。

もし、可能であれば、お教えいただきたいのですが、
「このページのリスト」欄か、記事のところに、新着記事であることを
示す「new」みたいなものを表示させることは可能なのでしょうか?

よろしくお願いします。
曹仁さん 初めまして

「このページのリスト」はFC2のシステムのループ変数を利用していますので個別に新着マークをつけることができません。ここを変更するとすべてのページについて変更されます。

「最近の記事」はFC2環境設定の「最新記事一覧」の設定数だけ表示されるのでこちらの方が利用できると思います。
これを変更する場合はHTMLファイルの <!--// 最新記事↓  --> 部を変更します。

============================
<div class="new_entry">
<em>最近の記事</em><br>
<!--recent-->
<div class="fl">
<%recent_year>.<%recent_month>.<%recent_day>
<a href="<%server_url>control.php?mode=editor&process=load&eno=<%topentry_no>" target="_blank" title="管理人用" style="background-color:transparent;"> </a>
</div>
<a href="<%recent_link>" title="<%recent_title>" style="display:block;"><%recent_title></a>
<!--/recent-->
============================
<%recent_year> の前に「New」マークを挿入すると最新記事のリスト全部に「New」マークが付きます。
<em>最近の記事</em>を変更するとリストの表題名を変えられます。

公開プラグインで探すと何かいいものが見つかるかも知れません。ちょっと見てみましたが・・
具体的にアイデアがまとまりましたらまたコメントでもください。
早速、ご回答いただきありがとうございます。
私も、公開プラグインを見てみたのですが、あまり良いものが見つからず・・・。

考えた結果、Scenewayさんご提案の方法で、HTMLファイルを変更することとしました。
・・・が、うっかりしたことに、私、こちらのテンプレートを使っているのではありませんでした。(^^;)
使っているのは、「FDBlack2column」でした・・・。(恥)

その場合、HTMLファイルの修正方法も変わりますか?何度も申し訳ありません。<(_ _)>
お返事をした後、そちらのブログに行きました。行った後でコメントを書けばよかったのにね。

修正方法は同じですので。
修正方法、理解しました。(すみません、理解が遅くて・・・。^^;)
で、一度、試してみたのですが、やはりちょと違和感がありまして、
結局、このままにさせていただくことにしました。

テンプレそのものは非常に気に入っております。ありがとうございました。<(_ _)>
今日からこのテンプレを使わせていただくようにしました。
1カラムだと記事がすっきりして見映えがいいです。
ところでヘッダー画像の高さを変えたんですが、画像に配置されるRSSメニューほかのアイコンの位置を画像の最下部に移動したいんですが、その方法が分かりません。
年末で多忙を極めてると思いますが、ご教授のほど宜しくお願いします。
dejavuewordsさん

スタイルシートの
.header_title {height:203px;}
203pxの値を変えてください。
アイコンを画像下に移動できました。
これですっきりしました~
また宜しくお願いします。





トラックバック


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



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