共有テンプレート「memo_black01_3c」サポートページ

管理人が公開しているFC2ブログの共有テンプレート「memo_black01_3c」のサポートページ(エントリ)です。

Last Update : 2008 12/25

重要なお知らせ

2008年9月28日22時以前にダウンロードしたテンプレートは「絵文字パレット」「文字装飾パレット」が正常に動作しません。

動作しなくても問題ない方はそのままで構いませんが、正常に動作するものを使用したい場合は一度テンプレートを削除した後、再度ダウンロードして適用し直してください。HTMLとCSSの両方が修正対象になっているため、手動での修正はかなり大がかりになってしまいます。またそれとは別に、初回公開時のものと比べ以下の不具合が修正されています。

• コメントとトラックバックのHTMLタグの修正
• 概要(Blogの説明)文が長くてもヘッダの背景が途切れなくなりました
• フッターのBlogリンクが適切ではなかったので修正
• トップナビゲーションにtitle属性で説明文を追加
• サイドバーのpadding(余白)の微調整
• 拍手とブックマークボタンを表示させたときの余白の調整
• 誤字・脱字の修正

絵文字パレットほど致命的なものはありませんが、細かい不具合が修正されています。

2008年12月21日以前にダウンロードしたテンプレートは「コメントの編集・削除機能」が正常に動作しません。

修正版を使用したい場合は、テンプレートを一度削除して再度ダウンロードし直すか、下記の修正方法をチェックして手動で修正してください。

基本情報

FC2ブログ用の3カラムテンプレートです。自由にカスタマイズして使用してください。

プラグインについて

プラグイン(サイドバー)の場所については以下のようになっています。

• プラグイン1 : 左サイドバー
• プラグイン2 : 右サイドバー
• プラグイン3 : メインカラム上

機能について

以下のような特徴があります。

• 親子カテゴリ完全対応
• パンくずリスト標準搭載
• 各エントリごとにユーザータグが自動でmeta keywordsに設定されます
• Google用のmetaタグ最適化
• 固定・可変幅両対応
• クロスブラウザ対応
  • チェックブラウザ : IE6^*1・IE7・Firefox 3・Opera 9.5・Google Chrome・Safari (全てWindows版)

1 : できる限り対応させましたが、可変幅を使用したとき条件によっては崩れることもあります。

カスタマイズについて

文字サイズを大きく/小さくしたいのですが

CSSの以下の記述の部分を検索機能などで探してください。

.entry-inner {
	margin: 1em 0;
	padding: 0;
	font-size: 0.95em;
	line-height: 1.5;
}

赤文字の部分の数字を増減させることによって、文字サイズを変更することができます。

横幅を広げたい/狭めたいのですが

CSSを少し下にスクロールさせると以下の記述があります。

#container {
	width: 900px; /* サイトの幅 */
	min-width: 900px; /* サイトの最小幅 (固定の場合は「サイトの幅」と同じ数値を入れる) */
	max-width: 900px; /* サイトの最大幅 (固定の場合は「サイトの幅」と同じ数値を入れる) */
	margin: 0 auto; /* コンテンツのセンタリング (モダンブラウザ用) */
	text-align: left; /* IE対策 (コンテンツのセンタリング解除) */
}

赤文字の部分を増減させると横幅を変更できます。また、100%や95%などのパーセンテージで数値を設定すると、画面幅に合わせて自動でサイズが変更されます。下の2行はパーセンテージで数値を設定したときの最大幅と最小幅を設定する^*2ところで、固定幅の場合は消してしまっても構いません。 2 : IE6を使用している環境では効果がありません。

2カラムに変更できますか？

2カラム版が別途存在します。そちらを使用してください。

2カラム版の公開テンプレートがDL可能になりました

<blockquote>タグを使用したときに表示される「Quote」を消したい

CSSの記述から以下の部分を探してください。

/* エントリ内部タグの装飾 */

.entry-inner blockquote {
	margin: 1em;
	padding: 28px  0.5em 0.5em 0.5em;
	border: solid 1px #999999;
	background: url("http://blog-imgs-30.fc2.com/1/2/8/128bit/temple01_quote.png") no-repeat right top #F7F7F7;
}

赤文字の部分を丸ごと削除すれば表示されなくなります。

リンクの下線を消したいのですが

CSSのどこでもいいので、以下の一文を書き加えてください。

a {
	text-decoration: none;
}

ただし、タグやヘッダ部分などの一部下線は消すことができません。

リンクの表示色を変更したい

CSSを下にスクロールさせるとすぐ以下のような記述あります。

/* リンク設定 */

a:link {
	color: #0000FF;
}

a:visited {
	color: #551A8B;
}

a:hover {
	color: #FF4500;
}

a:active {
	color: #FF3300;
}

赤文字の部分を任意の値に変更してください。各プロパティの意味は以下のようになっています。

• a:link : 未訪問(通常)リンク
• a:visited : 訪問済みリンク
• a:hover : マウスオーバー時
• a:active : クリック時

サイドバーの幅を変更したいのですが

今までのものとは違い、カスタマイズには少々手間がかかります。記述ミスをしてしまうと表示が崩れてしまうので、あらかじめバックアップしておくことをお勧めします。

まずCSSの記述から以下の部分を探してください。

/* メインコンテンツ開始 */

#wrapper {
	width: 100%;
	float: left;
	margin-right: -182px;
	text-align: left;
	display: inline;
}

#contents {
	width: 100%;
	float: right;
	margin-left: -182px;
	display: inline;
}

#contents-inner {
	margin: 0 182px 0 182px;
	text-align: left;
	padding: 0.5em 1em;
	font-size: 100%;
}

赤文字が右サイドバー、青文字が左サイドバーの幅を変更するために書き換える部分です。変更したい幅に「+2」した値を書き込んでください。「#wrapper」と「#contents」に設定されている数値はマイナス値が正常です。マイナスを消さないでください。

次にCSSから以下の記述を探します。

/* プラグイン1 */

#left-contents {
	width: 180px;
	float: left;
	text-align: left;
	display: inline;
	overflow: hidden;
}

/* プラグイン2 */

#right-contents {
	width: 180px;
	float: right;
	text-align: left;
	display: inline;
	overflow: hidden;
}

右サイドバーの幅を赤文字部分、左サイドバーの幅を青文字部分に設定してください。プレビュー、保存してみて幅が変更され正常に表示されれば成功です。表示が崩れた場合、設定のどこかを書き間違えているはずです。また、変更するときに行末の「;」を誤って消さないように注意してください。

フォントを変更したい

CSSの上部に以下のような部分があります。

body {
	font-family: Verdana,'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','ＭＳ Ｐゴシック',Osaka,sans-serif;
	color: #111111;
	font-size: 100.01%;
	text-align: center; /* IE対策 (コンテンツのセンタリング) */
	line-height: 1.4;
	letter-spacing: 0;
	background-color: #FFFFFF;
}

赤文字の部分を変更すれば使用フォントを変更できます。例えば以下のように変更すれば、このBlogでも使用しているメイリオに変更できます。

font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,'ＭＳ Ｐゴシック',sans-serif;

ただし、メイリオはWindows Vistaを使用しているか、別途メイリオをインストールしている環境でないと表示できません。条件を満たしていないWindows環境では、MS Pゴシックで表示されます。

不具合の修正方法

コメント欄の修正・削除機能を正常に動作するようにする

コメント欄タグの不具合によって、修正前のテンプレートはコメントの修正・削除機能が正常に動作しません。正常に機能させるためにはテンプレートを以下のように修正して保存してください。

テンプレート内の

<!-- ▼コメントフォーム開始▼ -->
(中略)
<!-- ▲コメントフォーム終了▲ -->

というコメントで囲まれた部分を

<!-- ▼コメントフォーム開始▼ -->
	
	<form class="post" method="post" action="./" id="comment_form" name="comment_form">
		<fieldset>
		<legend>コメントフォーム</legend>
		<div>
		<input type="hidden" name="mode" value="regist" />
		<input type="hidden" name="comment[no]" value="<%pno>" />
		</div>
		
		<table summary="コメントフォーム" class="cf-table">
		<caption>このエントリへコメントを書く</caption>
		<tbody>
		<tr>
			<th class="cf-th"><label for="name">Name</label></th>
			<td class="cf-td"><input type="text" id="name" name="comment[name]" size="30" value="<%cookie_name>" /></td>
		</tr>
		<tr>
			<th class="cf-th"><label for="subject">Title</label> <span class="small">(任意)</span></th>
			<td class="cf-td"><input type="text" id="subject" name="comment[title]" size="30" value="No Title" onblur="if(this.value == '') this.value='No Title';" onfocus="if(this.value == 'No Title') this.value='';" /></td>
		</tr>
		<tr>
			<th class="cf-th"><label for="mail">Mail address</label> <span class="small">(任意)</span></th>
			<td class="cf-td"><input type="text" id="mail" size="30" name="comment[mail]" value="<%cookie_mail>" /></td>
		</tr>
		<tr>
			<th class="cf-th"><label for="url"><acronym title="Uniform Resource Identifier">URI</acronym></label> <span class="small">(任意)</span></th>
			<td class="cf-td"><input type="text" id="url" name="comment[url]" size="30" value="<%cookie_url>" /></td>
		</tr>
		<tr>
			<th class="cf-th"><label for="comment">Comment</label> <span class="attention">(必須)</span></th>
			<td class="cf-td"><span class="block small"><acronym title="HyperText Markup Language">HTML</acronym>タグは使用できません</span><textarea id="comment" name="comment[body]" rows="8" cols="35"></textarea><span class="block"><script type="text/javascript" src="http://blog41.fc2.com/load.js"></script></span></td>
		</tr>
		<tr>
			<th class="cf-th"><label for="pass">Password</label> <span class="small">(任意)</span></th>
			<td class="cf-td"><span class="block small">ID生成と編集に使用します</span><input type="password" id="pass" name="comment[pass]" size="30" /></td>
		</tr>
		<!--accept_secret_comment--><tr>
			<th class="cf-th"><label for="himitu">Secret</label> <span class="small">(任意)</span></th>
			<td class="cf-td"><input type="checkbox" id="himitu" name="comment[himitu]" /><span class="small">非公開コメントにする</span></td>
		</tr><!--/accept_secret_comment-->
		</tbody>
		</table>
		
		<div class="submit-action">
		<input type="submit" class="submit post" value="送信" />
		</div>
		</fieldset>
	</form>
	
<!-- ▲コメントフォーム終了▲ -->

に書き換え。

次に

<!-- ▼コメント編集フォーム開始▼ -->
(中略)
<!-- ▲コメント編集フォーム終了▲ -->

という部分を

<!-- ▼コメント編集フォーム開始▼ -->
<!--edit_area-->

<div id="comment-edit-area">
	
	<h2 id="comment-edit-header" class="com-tb-title">コメントの編集</h2>
	
	
	<form class="post" method="post" action="./" id="comment_form" name="comment_form">
		<fieldset>
		<legend>Comment Edit Form</legend>
		<div>
			<input type="hidden" name="mode" value="edit" />
			<input type="hidden" name="mode2" value="edited" />
			<input type="hidden" name="edit[rno]" value="<%eno>" />
		</div>
		
		<table summary="コメントエディットフォーム" class="cf-table">
		<caption>コメントを編集・削除する</caption>
		<tbody>
		<tr>
			<th class="cf-th"><label for="name">Name</label></th>
			<td class="cf-td"><input type="text" id="name" name="edit[name]" size="30" value="<%edit_name>" /></td>
		</tr>
		<tr>
			<th class="cf-th"><label for="subject">Title</label> <span class="small">(任意)</span></th>
			<td class="cf-td"><input type="text" id="subject" name="edit[title]" size="30" value="<%edit_title>" /></td>
		</tr>
		<tr>
			<th class="cf-th"><label for="mail">Mail Address</label> <span class="small">(任意)</span></th>
			<td class="cf-td"><input type="text" id="mail" size="30" name="edit[mail]" value="<%edit_mail>" /></td>
		</tr>
		<tr>
			<th class="cf-th"><label for="url"><acronym title="Uniform Resource Identifier">URI</acronym></label> <span class="small">(任意)</span></th>
			<td class="cf-td"><input type="text" id="url" name="edit[url]" size="30" value="<%edit_url>" /></td>
		</tr>
		<tr>
			<th class="cf-th"><label for="comment">Comment</label> <span class="attention">(必須)</span></th>
			<td class="cf-td"><span class="block small"><acronym title="HyperText Markup Language">HTML</acronym>タグは使用できません</span><textarea id="comment" name="edit[body]" rows="8" cols="35"><%edit_body></textarea><span class="block"><script type="text/javascript" src="http://blog41.fc2.com/load.js"></script></span></td>
		</tr>
		<tr>
			<th class="cf-th"><label for="pass">Password</label> <span class="small">(任意)</span></th>
			<td class="cf-td"><span class="block small">ID生成と編集に使用します</span><input type="password" id="pass" name="edit[pass]" size="30" /></td>
		</tr>
		<!--accept_secret_comment--><tr>
			<th class="cf-th"><label for="himitu">Secret</label> <span class="small">(任意)</span></th>
			<td class="cf-td"><input type="checkbox" id="himitu" name="edit[himitu]" /><span class="small">非公開コメントにする</span></td>
		</tr><!--/accept_secret_comment-->
		</tbody>
		</table>
		
		<p class="submit-action edit-submit">
			<input type="submit" value="編集送信" />
			<input type="submit" name="edit[delete]" value="削除" />
		<!-- submit-action_end --></p>
		</fieldset>
	</form>
	
	
<!-- comment-edit-area_end --></div>

<!--/edit_area-->
<!-- ▲コメント編集フォーム終了▲ -->

に書き換えて保存してください。これで3カラム版、2カラム版の両方とも正常に動作するようになるはずです。

リリースノート

• 2008 9/28
  • ファーストリリース
  • 絵文字・装飾パレットの不具合を修正
  • 細かい不具合・バグの修正
• 2008 9/29
  • 細かい不具合の修正
• 2008 10/1
  • 挿入される広告の種類によってInvalidになるため、フッターの<p>タグを<div>に変更
  • 時刻表示がなかったのでエントリのフッター部分に追加
• 2008 10/2
  • 背景色の変更を考慮し、一部画像をpngからGIFへ変更。
• 2008 12/21
  • コメント欄の修正・削除機能が正常に動作しないのを修正。

その他

このエントリは適時内容が追加・修正されます。何か不具合報告等がありましたら、コメント欄でどうぞ。^*3 3 : 個人的なカスタマイズ方法の話や改造後に動かなくなった、などの質問は基本的に受け付けていません。カスタマイズはあくまで自己責任でお願いします。