2005年7月26日

目次の作成方法

今回は、「FC2 blogカスタマイズ講座」を臨時講義します。

当講座を受講されている生徒さんから、FC2 blog のカスタマイズ方法について掲示板で質問がありましたので、こちらで詳しくお答えします。

【質問内容】
ブログタイトルと記事の間にスペースを入れて、それぞれの記事にリンクを貼りたいのですが、どこをどういじって良いのかわかりません。

【使用ブログ】
FC2 blog　「phot-k6 テンプレート」

【質問者】
るるさん「るる☆女を語ってみました。」

【回答】
ブログタイトルと記事の間にスペースを入れて、それぞれの記事にリンクを貼るには、HTMLの該当箇所（ブログタイトルと記事の間）に目次を作成して、それぞれの記事にリンクを貼ります。

FC2 blog　のphot-k6 テンプレートでは、
<div id="mainBlock">と
の間がその該当箇所になります。

また、目次の文字やデザインなどを管理するために、CSSに目次に関するクラスを追加します。

目次の作成方法

では、FC2 blog での「目次の作成方法」について説明します。HTMLとCSSを下記の手順で編集しますと、簡単に目次が作成できます。

■ HTMLの編集方法
1．<div id="mainBlock">と の間に
　　下記の記述を追加します。

＜HTML＞

<div class="mokujiBlock">
<div class="mokujiTitle">目次</div>
<div class="mokujiBody">
<a href="リンク先のURL">目次タイトル</a> （コメント）<br />
<a href="リンク先のURL">目次タイトル</a> （コメント）<br />
<br />
<a href="リンク先のURL">カテゴリー</a>｜
<a href="リンク先のURL">カテゴリー</a>｜
<a href="リンク先のURL">カテゴリー</a>｜
<a href="リンク先のURL">カテゴリー</a>｜
<br />
</div>
</div>

2．「目次のタイトル」や「リンクＵＲＬ」などを適切な記述に変更します。

■ CSS（スタイルシート）の編集方法
1．スタイルシートに下記の記述を追加します。

＜スタイルシート＞

.mokujiBlock{
border: 1px solid #d8d8d8;
margin: 15px 5px 0px;
}

.mokujiTitle{
padding: 5px 0px 5px 33px;
margin: 0px;
font-family:"ＭＳＰゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Osaka";
font-size: 14px;
font-weight: bold;
color: #6c6c6c;
background-color: #ffc8ff;
}

.mokujiBody {
margin: 10px 15px;
font-family:"ＭＳＰゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Osaka";
font-size: 12px;
line-height: 130%;
color: #333333;
}

2．追加しましたら、色やデザインなどを調整してください。

以上で完了です。お疲れ様でした。

また、ブログに関する質問は、掲示板で受け付けていますので、気軽にどうぞ！

疑問が解決しましたら、1クリックお願いします。