B-Blog

ブログテンプレートの作成、カスタマイズの際の表示用マークアップテスト

ここはH3見出しテキストです

どうやらＦｉｒｅＦｏｘでは連続する英数字はボックス幅にあわせて改行されずボックスからはみ出してひょうじされてしまうっぽいｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ

ここは引用それにしても・・・なぜエントリー入力画面のタグ挿入機能ではblockquoteにＰが付くのだろう？
引用内改行後テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

ここはＰ無し引用文引用内改行後テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

こっちはH4見出しテキストです

プレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレ
プレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレ
プレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレプレ

質問の際は管理ブログのURLも添えてください。適確なアドバイスが出来ると思います。
質問は 『 管理者にだけ表示を許可する 』 を使わないで下さい。

＜準備＞
(１)．『環境設定の変更』の『ブログの説明』は重要です。考え方として"あなたのブログに訪れる人は検索エンジンでどんなキーワードを使うのか？"を意識して入力しておいて下さい。

『ブログの説明』はブログタイトルの下にそのまま表示されてしまいます。
それが嫌な（別の内容を記述したい）場合には(２)の※１を参照し、修正して下さい。
またブログの説明が長い場合、ブログが表示された時に途中で見ずらくなってしまいます。
その場合には(２)の※２を参照し、修正して下さい。

(２)．『管理画面』→『テンプレートの設定』からDLしたsquaresを『編集』します。
『HTMLの編集』欄から下の部分（青）を書き直してください。
<meta name="Keywords" content="ブログのキーワードを,で区切って入れてください。"/>
上の『ブログのキーワードを,で区切って入れてください。』を削除してご自分のブログの内容にあったキーワードを半角カンマで区切って入力。
検索エンジンでそのキーワードで検索にかかるようになる（かもしれないです。）
<link rev="made" href="mailto:info@sample.com" title="<%author_name>"/><!--mail:toの後にメールアドレス入力してね-->mailto:info@sample.com
のとこのinfo@sample.comを削除して、ご自分のメールアドレスを入力してください。
<!--ここにアクセス解析を入れましょう♪-->
FC2アクセス解析をご利用の際には、ここを削除して、アクセス解析（script）を貼り付けてください。
>※１　<!--タイトルエリア-->にある<p　class="site_info"><%introduction></p>
上の<%introduction>を削除して、自分の好きな紹介文を入力して下さい。
※２　『スタイルシートの編集』欄内の/* ブログ説明 */.site_info {color:#ｘｘｘｘｘｘ;
のcolor:#ffffff;を好きな色コードに書き換えて下さい。
デフォルトでも以前のように全く見えなってしまうということはないと思います。

＜カスタマイズ＞
【プラグイン】
左メニューがプラグインカテゴリー１、右メニューがプラグインカテゴリー２になっています。
是非、変更して下さい。（デフォルトのレイアウトはテキトーに配置しちゃってるので…）
スタイルシートのカスタマイズは説明しきれないので自力で頑張ってください。なお、エントリー内にテーブルを使うと自動的に1pxのボーダーが設定されてしまう＆ブログ説明が長いと文字が見えなくなってしまうという点は修正済みです。
【幅の変更】

squaresの構造は左の画像のようになっています。
幅を変更したい部分がある場合には、その外側のボックス幅も変更しなければなりません。
これは『管理画面』→『テンプレートの設定』→『スタイルシートの編集』から行います。

｛例：右メニューを左と同じ幅(160px）にしたい｝
右メニューのwidth:140px;を探して160pxに書き換え。コンテンツのwidth:815px;を探して835pxに書き換え。ベースボックスのwidth:820px;を探して840pxに書き換え。で完了といった手順になります。できればヘッダーとフッターもコンテンツと同じ835にしておくと良いですね。
【メニューのリスト化(ツリーじゃないよ)】
プラグインのフリーエリアを使って書いた内容をリスト化（文頭に色付き■のマークが付く）すると、引き締まると思います。
フリーエリアのリストにしたい範囲の先頭行に半角英数で<ul>、最終行末尾に</ul>を記述します。あとは<ul>から</ul>の間でリストマークを付けたい行の先頭に<li>、最後に</li>を記述して下さい。
これでカテゴリーや最近の記事部分と同じようなリストマークを文に付けることができます。

このFAQではどこに書けばわからない質問を受け付けています。

共有テンプレートへの質問は基本的に各テンプレートのカスタマイズ法エントリーを一読いただいたうえで、そのエントリーにコメントしてください。

カスタマイズ法ページ一覧

その際、どのテンプレへの質問なのかを、必ず明記してください。
また、URLも添えて頂ければ適確なアドバイスが出来ると思います。

それから、この 『 FAQ 』 への質問は 『 管理者にだけ表示を許可する 』 を使わないで下さい。

お願いしますm(_ _)m

【特徴】
黒を貴重とした幅固定３カラムのテンプレートです。
エントリー欄の背景に画像を使って罫線風に見える処理をしています。
エントリー欄は３カラムにしてはゆったりめに設定してあり、幅広のバナー（画像）も貼れます。
また各ボックス（全体やメニュー、エントリー）の幅の変更も楽チン。元がシンプルですのでカスタマイズにチャレンジしていただければ…と思います。
XHTML1.0 TransitionalのValid目指して記述しましたが、共有テンプレ登録にあたりカスタマイズしやすいようにしてあります。
（DLした素のままではValidになりません。）

【仕様】
全体の幅：870px
左右のメニューエリア幅：160px
エントリー幅：500px

エントリー内画像挿入時、周囲に2pxのボーダー（枠線）が付きます。
また画像挿入時に<br clear="all">を外すと自動的に右寄せ＆テキスト回り込みになるようになっています。

プラグインは左メニューが１に対応、右メニューが２に対応しています。
しかし、各プラグインごとにの表示確認はしていません。
プラグインを無効にしても一般的なメニューは（私好みの並びで）表示されるようになっております。


【使用法】
HTMLの編集で『ここにブログのキーワードを書いてね』とあるところに自分のブログのキーワード（宣伝文句等）を記述してください。
FC2のアクセス解析タグは<!--アクセス解析タグはここへ-->のところへコピペしましょう。

→利用規約
→カスタマイズ法

【特徴】
黒を貴重とした幅固定右メニュー２カラムのテンプレートです。
エントリー欄の背景に画像を使って罫線風に見える処理をしています。
また各ボックス（全体やメニュー、エントリー）の幅の変更も楽チン。元がシンプルですのでカスタマイズにチャレンジしていただければ…と思います。
XHTML1.0 TransitionalのValid目指して記述しましたが、共有テンプレ登録にあたりカスタマイズしやすいようにしてあります。
（DLした素のままではValidになりません。）

【仕様】
全体の幅：760px
左右のメニューエリア幅：220px
エントリー幅：520px

エントリー内画像挿入時、周囲に2pxのボーダー（枠線）が付きます。
また画像挿入時に<br clear="all">を外すと自動的に右寄せ＆テキスト回り込みになるようになっています。

プラグインは１に対応しています。
しかし、各プラグインごとにの表示確認はしていません。
プラグインを無効にしても一般的なメニューは（私好みの並びで）表示されるようになっております。

【使用法】
HTMLの編集で『ここにブログのキーワードを書いてね』とあるところに自分のブログのキーワード（宣伝文句等）を記述してください。
FC2のアクセス解析タグは<!--アクセス解析タグはここへ-->のところへコピペしましょう。

→利用規約
→カスタマイズ法

blacknoteシリーズのカスタマイズ法です。
FAQに寄せられた内容や、リクエストに応じて適時更新してまいりたいと思います。

質問の際は管理ブログのURLも添えてください。適確なアドバイスが出来ると思います。
質問は 『 管理者にだけ表示を許可する 』 を使わないで下さい。

現在紹介しているカスタマイズ法リスト

• リンク色の修正
• タイトル文字の変更
• ヘッダー部への画像挿入
• エントリー内挿入画像について
• 記事の投稿時間を表示させる
• コメントの投稿時間を表示させる
• 罫線を取る

どこの誰かもわからない御方からテンプレートに関してリクエストを頂きました。
これまでも何度か書いてきたように、本来ならば『どこの誰かもわからない』って時点で無視するところ。
何らかの情報発信の為にブログ立ち上げて、それで人に頼みごとするなら（というか、私としてもなるべく適切な対応をしたいので）、最低でもハンドルネームと管理してるブログのアドレスくらいは書いてよね。

と、愚痴りつつも、リクエストの内容は既に自分のブログで仕込み完了していたものだったので、公開する良い機会かと思いまして…。

本当は『squaresシリーズ公開一周年記念！』に全色用意してから、長期にわたりご利用頂いてる方へのお礼として準備していたんですがね…。（ま、そんな方々は決して多いわけでは無いし…。）

んで新バージョン、パッと見は同じなんですが中身は大分変更されております。

んで、導入のメリット

1. エントリー欄上部にプラグインカテゴリー３に対応したスペースを設置。（デフォルトではトップページのみの表示）
   フリーエリアをひとつ用意していただき、使って貰えれば良いかと。
2. エントリー欄内に全記事リストが表示されるようになった
3. 管理画面へのリンクをフッターに装備

逆にデメリット

1. 旧バージョンからの乗り換えで表示が崩れる可能性アリ。
   （特にプラグイン(メニュー)関係）
2. プラグインの設定が不可欠
3. 細かいチェックが済んでないので細かいコトは自己責任で

どーでもいいこと

1. テンプレ自体はW3C準拠
2. コメント入力欄が全体的にデッカクなった

といった感じ。

つーわけで、下のリンク先にHTML用とCSS用のtxtファイルを置いておきます。
必ずダウンロードしてお使いください。
(IEの場合【右クリック】→【対象をファイルに保存】)
(ブラウザで開いても表示されないかも。)

HTMLソース（共通）：graysquares3html.txt


グレー用CSS：graysquares3css.txt


オレンジ用CSS：orangesquares3css.txt


ブルー用CSS：bluesquares3css.txt

オレンジ用リンク色変更の要望があったのですが、場所ごとに色が違う等々悩んだ挙句以前のもののままです。（jirokonpeiさんゴメンなさい。）

基本的にサポート対象外とさせていただきますが、ご利用及び、バグ報告、他の色のリクエスト等、このエントリーへのコメントもしくはメールにて、記名及びアドレス明記して頂いた方へは対応したいと思います。

ウチの共有登録していないテンプレ（squares）のように、トップページにだけ表示されるフリースペースをblacknote3cにも付けたい、という要望がありました。

元々blacknoteシリーズは私の旧squaresをベースにしてるけど私がデザインしたものではなく、私としては今更古いソースを弄るのヤダなぁ…という気持ちがあって先延ばししていたのですが、やってみたら思ってたより簡単に着せ替え出来ちゃった（＾＾；

ただしベースはあくまでsquares3になので各カラムのサイズ変更はメンドーになってます。あしからず。

つーわけで、下のリンク先にHTML用とCSS用のtxtファイルを置いておきます。
必ずダウンロードしてお使いください。
(IEの場合【右クリック】→【対象をファイルに保存】)
(ブラウザで開いても表示されないかも。)

HTML：blacknote3c2html.txt
CSS：blacknote3c2css.txt

上記をファイルをテキストエディタ（メモ帳は文字コードが対応していない為ダメ）で開き、『テンプレートの編集』ページにて、それぞれの編集欄にコピペしてください。

基本的にサポート対象外とさせていただきますが、ご利用及び、バグ報告、他の色のリクエスト等、このエントリーへのコメントもしくはメールにて、記名及びアドレス明記して頂いた方へは対応したいと思います。

なお、使い方に関してはコチラも参考になさってください→◆

下の解答は、それぞれいただいた質問に対し、考えられるいくつかの方法から質問者のレベルを考慮して回答しております。

質問の際は管理ブログのURLも添えてください。適確なアドバイスが出来ると思います。
質問は 『 管理者にだけ表示を許可する 』 を使わないで下さい。

（レイアウトは大きく崩れないように配慮して回答しておりますが、カスタマイズという行為の性質上、細かい見た目（表示位置、行間、）などはあまり考慮していません。あしからず）


Ｑ　ページ最下段のl INDEX l次ページ の表記を、本文末の 日付・時刻・コメント l トラックバック l URL l の真下右ならえに置きたい。

Ａ　テンプレートの設定 - 『テンプレートの管理』画面より、HTML編集にて下の部分を

<ul class="e_navi">
<li><%topentry_year>.<%topentry_month>.<%topentry_day>　<%topentry_hour>:<%topentry_minute>　</li>
<li><!--allow_comment--><a href="<%topentry_link>#comment_post" 
title="コメントを書く">Comment</a> : (<za href="<%topentry_link>#comment_list"
 title="コメントを見る"><%topentry_comment_num></a>)<!--/allow_comment-->
<!--deny_comment-->Comment(-)<!--/deny_comment--> | </li>
<li><!--allow_tb-->Trackback : (<a href="<%topentry_link>#trackback" 
title="トラックバックを見る"><%topentry_tb_num></a>)<!--/allow_tb-->
<!--deny_tb-->Trackback(-)<!--/deny_tb--> | </li>
<li><a href="<%topentry_link>" title="記事を参照">URL</a> | </li>
</ul>

下のように書き換える

<ul class="e_navi">
<li><%topentry_year>.<%topentry_month>.<%topentry_day>　<%topentry_hour>:<%topentry_minute>　</li>
<li><!--allow_comment--><a href="<%topentry_link>#comment_post" 
title="コメントを書く">Comment</a> : (<za href="<%topentry_link>#comment_list" 
title="コメントを見る"><%topentry_comment_num></a>)
<!--/allow_comment-->
<!--deny_comment-->Comment(-)<!--/deny_comment--> | </li>
<li><!--allow_tb-->Trackback : (<a href="<%topentry_link>#trackback" 
title="トラックバックを見る"><%topentry_tb_num></a>)<!--/allow_tb-->
<!--deny_tb-->Trackback(-)<!--/deny_tb--> | </li>
<li><a href="<%topentry_link>" title="記事を参照">URL</a> | </li>
</ul>
<ul class="e_navi"><!--prevpage--><li><a href="<%prevpage_url>" 
title="前のページへ戻る">≪前ページ</a> </li><!--/prevpage-->
<li>| <a href="<%url>" title="INDEXへ戻る">INDEX</a> | </li>
<!--nextpage--><li><a href="<%nextpage_url>" title="次のページへ進む">
次ページ≫</a></li>
</ul>

Ｑ　個別エントリーページでは、最下部に　前ページl INDEX l次ページ リンクが表示されないが、表示させるようにするにはどうしたら良いか？

Ａ　テンプレートの設定 - 『テンプレートの管理』画面より、HTML編集にて下の部分を

<!--固定リンクページエントリー下部（ナビ）・始-->
<ul class="c_navi">
<li><a href="<%url>" title="INDEXへ戻る">INDEX</a></li>
</ul>
</div>
<!--固定リンクページエントリー下部(ナビ)・終-->

下のように書き換える

<!--固定リンクページエントリー下部（ナビ）・始-->
<ul class="c_navi">
<li><!--prevpage--><li><a href="<%prevpage_url>" 
title="前のページへ戻る">≪前ページ</a> </li><!--/prevpage-->
<li>| <a href="<%url>" title="INDEXへ戻る">INDEX</a> | </li>
<!--nextpage--><li><a href="<%nextpage_url>" title="次のページへ進む">
次ページ≫</a></li>
</ul>
</div>
<!--固定リンクページエントリー下部(ナビ)・終-->