《オリジナル・テンプレート》 1カラム黒バック
特徴
- 写真ブログを念頭にバックを黒としました。
- 幅1024ピクセルのPCモニターでもとぎれないように幅を960ピクセルに設定
- 投稿可能な最大写真幅は940ピクセル
(カスタムタグ・fcを使った場合は960ピクセル)
- 記事トップにページのリストを表示。クリックすると記事にジャンプします
- トップページにのみ最新記事が表示されます
- 隠しリンクで記事編集ページをワンタッチで開きます
- 写真の右寄せ、左寄せ、中央配置の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>」として単語登録しておくと使いやすいです。
カスタマイズ例
- ヘッダー画像の変更
ヘッダー画像を変更する時は960 x 240ピクセルのサイズを使ってください。手順は
- 画像をアップロード
- スタイルシートを変更
スタイルシートの最後あたりの"background image"の項の「ヘッダー画」のurlを書き換えます。
幅は960ピクセル固定です。高さは変更可能ですがスタイルシートの変更が必要です。変更箇所は
- "#header"の"height"を変更
- ".header_title" の "height"を変更
- メールメニュー設定
ヘッダーメニューにメールボタンも表示できます。
- HTMLファイル・ヘッダー部の
<!--
<li><a href="">Mail</a></li>
-->
の部分の "<!--" と "-->" を削除して
<li><a href="">Mail</a></li>
とします
- <a href="">を設定します。アドレスを直接書き込む場合はmailto:のあとにアドレスを書きます。
<a href="mailto:aaa@bbb.com">