FC2ブログのテンプレート工房

例えばプロフィールの下に表示させたい場合は、プロフィールの「設定の変更」「プロフィールの編集」を開き

下部に記載するプラグインの説明文：
あなたの紹介文

という所に

<a href="./?admin">管理者ページ</a>
<a href="<%server_url>control.php">管理画面</a>

と入れます。これだけでプロフィール画像の下に「管理者ページ」「管理画面」が表示されます。

次にリンク下にある「管理者ページ」「管理画面」を消します。プラグインのリンクの「HTMLの変更編集」を開くと次のようなソースが表示されます。

<ul>
<!--link-->
<li &align><a href="<%link_url>" title="<%link_name>" target="_blank"><%link_name></a></li>
<!--/link-->
<li><a href="./?admin">管理者ページ</a></li>
<li><a href="<%server_url>control.php">管理画面</a></li>
</ul>

この<li><a href="<%server_url>control.php">管理画面</a></li>の部分を削除してください。これでリンク下の「管理者ページ」「管理画面」が消えます。

この要領で「管理画面」を好きな場所に移動させてくださいね。

サイト幅を変更するにはスタイルシートを編集します。

/******************************************* ▼ サイトの幅 ▼ */
#outline {
width:1000px; /* 全体 */
margin:0 auto;
}
#center {
width:526px; /* 中央 */
float:right;
}
#left {
width:217px; /* 左 */
float:left;
}
#right {
width:217px; /* 右 */
float:right;
}
#center-left { /* 計算して設定してください ------ */
width:763px; /* (全体-左-中央-右)/2 + 左 + 中央 */
float:left;
}
/******************************************* ▲ サイトの幅 ▲ *

まず全体幅(outline)を決めます。初期値は"1000px"に設定してあります。

そして中央(center),左(left),右(right)の幅を決めます。この３つの合計が全体(outline)を超えないように設定してください。ピッタリにするよりも少し少なめに設定することをお薦めします。それぞれのカラムに間隔を空けるためです。

最後に(center-left)を設定します。これには計算が必要です。
設定値 = (全体-左-中央-右)/2 + 左 + 中央
これで「左から中央までの間隔」と「中央から右までの間隔」が等しくなります。


また、サイトをブラウザの幅に合わせるリキッドレイアウトにしたい場合は"px"を"%"という単位に変え、更に多少複雑な計算が必要です。

全体(outline) ブラウザ幅に対する割合(%)を設定
中央(center ) center_leftに対する割合(%)を設定
左 (left ) center_leftに対する割合(%)を設定
右 (right ) outlineに対する割合(%)を設定
(center_left) outlineに対する割合(%)を設定

下記に具体例を示します。計算するよりもこの数値を少しづつ変えて実際に表示させてみるほうが早いかもしれません。

/******************************************* ▼ サイトの幅 ▼ */
#outline {
width:100%; /* 全体 */
margin:0 auto;
}
#center {
width:67%; /* 中央 */
float:right;
}
#left {
width:30%; /* 左 */
float:left;
}
#right {
width:23%; /* 右 */
float:right;
}
#center-left { /* 計算して設定してください ------ */
width:75%; /* (全体-左-中央-右)/2 + 左 + 中央 */
float:left;
}
/******************************************* ▲ サイトの幅 ▲ *

サイト幅や各カラムの幅はプラグインや投稿記事の内容も考慮して決めましょう。これらが設定した幅を超えるとカラム落ち、つまり崩れてしまいます。表示速度は落ちますが崩れないテンプレートをお望みであれば"standard"シリーズをお薦めします。

【追記(続きを読む)を同一ページに表示させる】
追記表示(続きを読む)をページ遷移させることなくシームレスに同一ページに表示させるようにしました。

【サイト名でコメントリンクを貼る】
コメント入力項目の「サイト名」に一度入力した文字を記憶させるようにしました。

【記事で大文字を使っても文字が重ならないようにする】
記事の投稿に大文字を使うと文字が重なるという問題を修正しました。

【プラグインカテゴリ３のデザインを変える】
プラグインカテゴリ３を１や２とは別に独立でデザインを変えられるようにしました。

【コメント(CM)のリンク先設定】
今まではコメント(CM)のリンク先が「展開された記事の先頭」でしたが、これをコメントの先頭行へ飛ぶように変更しました。

【個別記事表示時のページナビゲーションについて】
各個別記事から前後のページへ移動できるようにナビゲーションリンクを取り付けました。

【記事を枠で囲む】
記事部分を簡単に枠で囲めるようにしました。

・その他色やサイト幅等のデザイン微調整を行いました。


どうぞ新しくなったテンプレートをお試しください。
既存テンプレートで大幅なカスタマイズを行っている方々のために旧バージョンのものから新機能を取り付ける方法も順次紹介していこうと思います。

また今後、テーブル構造を使わずに表示速度を追求したテンプレートも作成する予定です。テーブルを使わないと大きい画像等で崩れやすく、カスタマイズも難しいものになってしまうので中・上級者向けのテンプレートになると思います。マイペースで作りますので気を長くしてお待ちください＾＾

スタイルシートで次のような記述があります。各数値を変えてお好みのデザインにしてください。


/********* ▼ メニューブロック (プラグインカテゴリ３) ▼ */
/* メニュータイトル */
.menu_title3 {
/* --------------------------------------------- */
color:#ffffff; /* メニュータイトルの色 */
/* --------------------------------------------- */
background: #FFA500; /* メニュータイトル背景 */
/* --------------------------------------------- */
font-size: 0.8em;
font-weight: bold;
padding: 0.3em 1em;
margin: 0;
}

/* メニューコンテンツ */
.menu_cont3 {
/* --------------------------------------------- */
color: #666666; /* メニューコンテンツの文字の色 */
/* --------------------------------------------- */
font-size: 75%; /* メニューコンテンツの文字の大きさ */
/* --------------------------------------------- */
border: #FFA500 1px solid; /* 外枠の色 */
/* --------------------------------------------- */
margin: 0;
padding: 0 1em;
line-height: 1.3;
}
/********* ▲ メニューブロック (プラグインカテゴリ３) ▲ */


現在(2006/09/01以後 Ver.7)のバージョンをお使いの方は上記の各数値を変えるだけでカスタマイズできます。

Ver.6以前をお使いの方は上記記述をスタイルシートに新たに加えてください。さらにHTMLを編集します。<!--▼▼ プラグイン カテゴリー３ ▼▼--><!--▲▲ プラグイン カテゴリー３ ▲▲-->の間を下記記述に置き換えてください。


<!--▼▼ プラグイン カテゴリー３ ▼▼-->
<!--index_area-->
<!--plugin-->
<!--plugin_third-->
<div class="menu_title3" style="text-align:<%plugin_third_talign>"><%plugin_third_title></div>
<div class="menu_cont3">
<div style="margin: 10px 0; text-align:<%plugin_third_ialign>">
<%plugin_third_description></div>
<div style="margin: 10px 0; text-align:<%plugin_third_align>">
<%plugin_third_content>
</div>
<div style="margin: 10px 0; text-align:<%plugin_third_ialign>">
<%plugin_third_description2></div>
</div><!--/menu_cont3-->
<br />
<!--/plugin_third-->
<!--/plugin-->
<!--/index_area-->
<!--▲▲ プラグイン カテゴリー３ ▲▲-->


これでVer.6以前でもプラグインカテゴリ３を独立でカスタマイズできるようになります。

このカスタマイズはABCK(アジアンビートカンケリキッズ)さんの追記の展開・折りたたみを参考にアレンジしました。


HTMLを編集します。<head>と</head>の間に以下を挿入します。


<head>
～
<script type="text/javascript">
<!--
function showMore(varA1, varB1){
var123 = ('varXYZ' + (varA1));
varABC = ('varP' + (varA1));
if( document.getElementById ) {
if( document.getElementById(var123).style.display ) {
if( varB1 != 0 ) {
document.getElementById(var123).style.display = "block";
document.getElementById(varABC).style.display = "none";
} else { document.getElementById(var123).style.display = "none";
document.getElementById(varABC).style.display = "block"; }
} else { location.href = varB1;
return true; }
} else { location.href = varB1;
return true; }
}
//-->
</script>
～
</head>


更に下記箇所を変更します。


<!--▼ エントリー（記事）▼-->
～
<!--more_link--><a href="<%topentry_link>#more">続きを読む</a><!--/more_link-->
<!--more-->
<hr class="tuduki" noshade size="1">
<%topentry_more><!--/more-->
～
<!--▲ エントリー（記事）▲-->


この部分を次の記述に書き換えてください。


<!--▼ エントリー（記事）▼-->
～
<!--more_link-->
<div id="varP<%topentry_no>">
<div class="readmore"><a href="<%topentry_link>" title="続きを読む" onclick="showMore(<%topentry_no>,'<%topentry_link>');return false;">【続きを読む】</a></div>
</div>
<div id="varXYZ<%topentry_no>" style="display: none">
<div class="readclose">
<a href="#entry<%topentry_no>aa" title="続きを閉じる" onclick="showMore(<%topentry_no>,0);return true;">【続きを閉じる】</a></div>
<%topentry_more>
</div>
<!--/more_link-->
<!--more-->
<%topentry_more><!--/more-->
～
<!--▲ エントリー（記事）▲-->


最後にスタイルシートに次の記述を追加します。


/* 続きを読む・閉じる */
.readmore {
margin-top: 10px;
}
.readclose {
margin-top: 10px;
margin-bottom: 10px;
}


これで追記が同一ページで表示されます。変更箇所が多いのでバックアップをとってから挑戦することをお薦めします。

現在(2006/09/01以後 Ver.7)は一度コメントを投稿すると、「名前」や「URL」と同じく「サイト名」もテンプレートに記憶されて、次回の投稿から入力しなくても済むようになっています。

Ver.6以前のテンプレートに「サイト名」を記憶させる機能を実装させるには下記カスタマイズを施してください。

HTMLを編集します。<head>～</head>内に次の記述を加えてください。

<head>
～
<script language="JavaScript"><!--

function mySetCookie(myCookie,myValue,myDay){
myExp = new Date();
myExp.setTime(myExp.getTime()+(myDay*24*60*60*1000));
myItem = "@" + myCookie + "=" + escape(myValue) + ";";
myExpires = "expires="+myExp.toGMTString();
document.cookie = myItem + myExpires;
}
function myGetCookie(myCookie){
myCookie = "@" + myCookie + "=";
myValue = "";
myStr = document.cookie + ";" ;
myOfst = myStr.indexOf(myCookie);
if (myOfst != -1){
myStart = myOfst + myCookie.length;
myEnd = myStr.indexOf(";" , myStart);
myValue = unescape(myStr.substring(myStart,myEnd));
}
return myValue;
}

// --></script>
～
</head>

更に下記箇所を編集します。

<!--▼コメント投稿▼-->
～
<label for="mail">サイト名:</label><br />
<input id="mail" type="text" name="comment[mail]" size="40" value="" /><br />
～
<p><input type="submit" value="送信" /></p>
</form>
</div><!--/article-->
<!--/comment_area-->
<!--▲コメント投稿▲-->

これを次のように書き換えます。

<!--▼コメント投稿▼-->
～
<label for="mail">サイト名:</label><br />
<script language="JavaScript"><!--
document.write('<input id="mail" type="text" name="comment[mail]" size="40" value="'+myGetCookie("web_name")+'" /><br />');
// --></script>
～
<p><input type="submit" value="送信" onClick="mySetCookie('web_name',document.comment_form.mail.value,'365')" /></p>
</form>
</div><!--/article-->
<!--/comment_area-->
<!--▲コメント投稿▲-->

これでコメント投稿時にサイト名を憶えてくれるようになります。
コメントを多用する方にはお薦めのカスタマイズです。