以前から思ったのだが、「画面いっぱいに可変する２カラムレイアウト＋ＩＥとFirefoxで見た目が同じ」というレイアウトテンプレートが、あまり無い。そこで今後もっともっと増えて欲しいと願いつつ、一般的なセレクタ設定方法について説明します。
/* メインカラム /*
#content {
float: left;
width: 73%;
}
/* サイドバー /*
#sidebar {
margin-left: 76%;
}
今回紹介するfc2blogユーザー専用”投稿用ブックマークレット”は、トラックバックがもっと簡単になるツールです。トラックバックしたいエントリーでこのブックマークレットを起動。すると
ちなみにRSSに対応したブログならfc2blog以外のブログでもトラックバック可能とのこと。
クリックすると、ブックマークレットが起動するリンクを作ります。あなたのブログを訪れた方が、fc2blogユーザーだった場合には重宝されるでしょう。これはテンプレートhtmlをカスタマイズしてトラックバックエリアの下に配置した例です。使用テンプレートはarrow_o。太字の部分が紹介したブックマークレット。
<!--トラックバック-->
<!--trackback_area-->
<h3 id="trackbackhead"><a name="trackback">トラックバック</a></h3>
<dl id="trackbackbody">
<dt>トラックバックURLはこちら</dt>
<dd><a href="<%trackback_url>"><%trackback_url></a></dd>
<!--topentry-->
<dt> <a href="javascript:window.location.replace('http://blog.fc2.com/?url=<%topentry_link>');"> このURLにトラックバックしたエントリーを新規作成</a> </dt> <dd> リンクをクリックするだけで自動で管理画面にログイン。このエントリにトラックバックした記事がカンタンにかけます。 ただしあなたがfc2blogユーザーで、かつ管理画面にログインしたクッキーが残っている場合に限ります。 </dd>
<!--/topentry-->
</dl>
<!--trackback-->
テンプレートによってhtml異なっているので、タグと挿入の位置は御自分で判断してください。
エントリーが縦に並ぶと長くなりすぎるので、短くしたい場合のカスタマイズ
「エントリーが長すぎるな」と思ったら、”エントリー投稿画面・追記”に内容分けて書き込みましょう。ブログテンプレートにこれといった設定を加えてない場合、追記部分は収納されています。なのでブログが縦長になるのを防げるでしょう。
javascriptを利用してボタン一つで追記が展開、収納されるカスタマイズ。こちらで紹介されています。
このタグでエントリーの冒頭部分だけを表示させることができます。ただしテキストしか出力しないので、写真やテーブルはおそらく無視されます。
このタグと新しく加わった <!--permanent_area-->と <!--not_permanent_area--> を利用して、
「エントリーが一覧表示されているときは見出しだけを表示。個別エントリーを参照するときはエントリーの本文を表示」
というブログにすることができます。
<!--エントリー--> <!--topentry--> <h3 id="<%topentry_no>"> <a href="<%topentry_link>" title="<%topentry_title>の固定リンク"><%topentry_title></a> </h3> <!--not_permanent_area--> <%topentry_discription> <!--/not_permanent_area--> <!--permanent_area--> <%topentry_body> <!--/permanent_area--> <!--more_link--> <a href="<%topentry_link>#more">[<%topentry_title>]の続きを読む</a> <!--/more_link--> <!--more--> <hr> <a name="more" id="more"></a><%topentry_more> <!--/more-->
<!--not_permanent_area--> <%topentry_discription> <!--/not_permanent_area-->
固定リンク画面以外（カテゴリや月別参照時）の時だけ、エントリーの冒頭を表示します。固定リンク（エントリー本体）参照中は表示されません。固定リンク画面ではエントリー本文とエントリーの冒頭が同時に表示されると困るので、表示させない必要があるんですね。
<!--permanent_area--> <%topentry_body> <!--/permanent_area-->
固定リンク画面のときだけエントリー本分を表示します。沢山のエントリーが並ぶカテゴリや”月別”のときは本文が表示されず、上に上げたエントリー冒頭だけ表示されるので、ブログが縦長になりません。
このカスタマイズを施すと、そのエントリーへの個別リンクを参照しない限り、本文を読むことができません。個別リンク参照中は追記部分も一緒に表示されるので、続きを読むは必要ありません。逆に続きを読むをクリックして追記部分に直接ジャンプしてしまうと、ビジターは本文の一部を素通りしてしまうことになります。以下、太字部分が”続きを読む”です。私は消しておくことをオススメします。
<!--more_link--> <a href="<%topentry_link>#more">[<%topentry_title>]の続きを読む</a> <!--/more_link--> <!--more--> <hr> <a name="more" id="more"></a><%topentry_more> <!--/more-->
エントリーの見出しをリストアップするカスタマイズ。fc2blogのエントリー最大表示数にしたがい、月別は無制限、それ以外は最大10件まで一覧表示。
【 頁内参照型 】 ページ内の記事冒頭部へ移動します
<!--topentry-->
<li><a href="#<%topentry_no>"><%topentry_title></a></li>
<!--/topentry-->
【 個別参照型 】 記事の「個別表示画面」へ移動します
<!--topentry-->
<li><a href="#<%topentry_link>"><%topentry_title></a></li>
<!--/topentry-->
☆ 頁内型はエントリ冒頭部に <a name= （and/or) id="<%topentry_no>" ></a>
とあるテンプレート（殆どがそう）で有効です。
☆上に示した例は単純化したものです。 必要に応じ 各記事の投稿時間やカテゴリ等を付記（またはマウスオン表示）する事も可能です
具体的に挿入するタグです。海の地図を参考に <!--not_permanent_area-->を配置。これがあると、個別記事表示のとき収納されます。
<!--not_permanent_area--> <h3 id="all_title">このページのEntryList</h3> <ol> <!-- リンク側のブロック変数でタイトルと<%topentry_no>を取得 --> <!--topentry--><!-- ひとつめ --> <li><a href="#<%topentry_no>"><%topentry_title></a></li> <!--/topentry--> </ol> <!--/not_permanent_area-->
<!--not_permanent_area--> <h2 id="all_title"><%sub_title></h2> <ol> <!--topentry--> <!-- ひとつめ --> <li><a href="#<%topentry_no>"><%topentry_title></a>(<%topentry_month>/<%topentry_day>)</li> <!--/topentry--> </ol> <!--prevpage--> <a href="<%prevpage_url>">前のページ</a> <!--/prevpage--> <!--nextpage--> <a href="<%nextpage_url>">次のページ</a> <!--/nextpage--> <!--/not_permanent_area-->
太字の部分がテンプレートのhtml追加部分です。エントリー表示部分の真上に配置しています。
<div class="left"> <!--not_permanent_area--> <h3 id="all_title">このページのEntryList</h3> <ol> <!-- リンク側のブロック変数でタイトルと<%topentry_no>を取得 --> <!--topentry--><!-- ひとつめ --> <li><a href="#<%topentry_no>"><%topentry_title></a></li> <!--/topentry--> </ol> <!--/not_permanent_area--> <!--エントリー--> <!--topentry--> <h3><a id="<%topentry_no>" name="<%topentry_no>"><%topentry_title></a></h3> <div class="body"> <%topentry_body>
本当はblueもやってみたんですが、エントリーの枠内に収めるのが難しくて断念。多少試行錯誤する必要があるかも知れません。
春木屋ですばらしいfc2blogツールが公開されました！
そんなときはぜひこのツールを設置して欲しい。Fxcelはエントリーのタイトルだけをリストアップしてくれるので、ビジターは目的の記事だけをスイスイ巡回できます。
特に圧巻なのが月別エントリー。fc2blogの表示制限がないため、50エントリーでも60エントリーでもすべてリストアップ。 Fxcelにはエントリーをカテゴリ別にソートする機能があり、これがあれば膨大な数のエントリーが一度にリストアップされても、見たい記事にだけアクセスできます。
月別エントリーで無制限の記事をソートできるのを利用して、エントリーを整理することもできます。月別エントリーでソート後、左側のIDをクリック。エントリー編集ページに直行できるので、好きなカテゴリーに編集可能。
Fxcelは実はブログのデザインテンプレートの一つです。今のところ共有テンプレートに登録されていないため、自分で導入する必要アリ。春木屋でわかりやすく解説されているので、心配する必要はありません。
fc2blogエントリー表示件数を、最大の10件にしておいたほうが良いでしょう。以下の順番でページを移動。
日記・ニュース系以外のブログを運営している場合、古いエントリーはときどき編集する必要があります。情報が古くなってしまったエントリーは、編集しなおして新しい日付をつけてやれば新しいエントリーとして再生可能。それに目次ページやサイト紹介エントリーなども度々編集する機会があるでしょう。
今回はエントリーを編集しやすくする方法として、エントリー部分にエントリー編集フォームへのリンクを追加する方法です。これがあれば管理画面を経由せずにリンクをクリックするだけで、そのエントリーの編集ページに直行できます。
エントリー部分の下、コメント・トラックバック数などがある、エントリー情報部分に追加します。具体的に言うとコメントの横に並ぶことになります。ご自分のブログのhtml部分に太字のコードを追加してください
<!--エントリー--> <!--topentry--> <h3> <a id="<%topentry_no>" name="<%topentry_no>"> <%topentry_title></a></h3> <div class="content"> <%topentry_body><!--more_link--> <a href="<%topentry_link>#more">...read more</a><!--/more_link--> <!--more--><hr size="1"><a name="more" id="more"></a><%topentry_more><!--/more--> <ol class="sub"> <li><a href="<%topentry_link>"><%topentry_year>/<%topentry_month>/<%topentry_day>(<%topentry_wayoubi>) <%topentry_hour>:<%topentry_minute>:<%topentry_second></a>|</li> <li><a href="<%topentry_category_link>"><%topentry_category></a>|</li> <li> <!--allow_tb--><a href="<%topentry_link>#trackback">トラックバック：<%topentry_tb_num></a><!--/allow_tb--> <!--deny_tb-->トラックバック(-)<!--/deny_tb--> |</li> <li> <!--allow_comment--><a href="<%topentry_link>#comment">コメント：<%topentry_comment_num></a><!--/allow_comment--> <!--deny_comment-->コメント(-)<!--/deny_comment--></li> <li>| <a href="./admin.php?mode=editentry&no=<%topentry_no>">[Edit]</a></li> </ol>
default blue black arrow_o monotone bluesky で確認したところ、このコードどおりに挿入することが可能です。他のテンプレートも軒並みこのとおりのものが多いです。
人気のブログなんかで、「このブログをお気に入りに入れる」なんてボタンを見たことは無いだろうか？もちろんあれはそのボタンを押すと、そのブログがお気に入りに追加されます。
これは「面白いブログがあったんだけど、ついお気に入りに入れ忘れてどこにあるかわからなくなっちゃった・・・」なんてうっかりさんのための配慮。今回はそんなお気に入りに追加ボタンを、自分のブログにつけるための方法を紹介しましょう。これがあれば少しですが、お気に入りに入れる手間が省けるため、気軽にもっと自分のブログをお気に入りに入れてもらえる・・・かもしれません。
fc2blogでは自分のブログのＵＲＬ・タイトルの値を返すという独自タグがあります。それを使って、簡単にお気に入りに追加ボタンを作ることができます。
ご自分のブログのhtml部分に、コピーペーストしてみてください。
<input type="button" onclick="window.external.AddFavorite('<%url>','<%blog_name>')"value="お気に入りに追加">
ちなみにリンク型式のものあります。こちらのほうが地味ですが、ブログのデザインから浮いてしまうことはありません。
<a href="#" onClick="javascript:window.external.AddFavorite('<%url>','<%blog_name>');return false">お気に入りに追加</a>
テンプレートのhtml部分に直接貼り付けた場合です。今回はInformation部分にお気に入りを追加ボタンを配置してみました。そもそもInformation部分が無いものもあるので注意。
<h3>Information</h3> <img src="<%image>" alt="<%author_name>"> <input type="button" onclick="window.external.AddFavorite ('<%url>','<%blog_name>')" value="お気に入りに追加"> <ul> <li><a href="#" onClick="javascript:window.external.AddFavorite('<%url>','<%blog_name>');return false">お気に入りに追加</a></li> <li>Author: <%author_name></li> <li><%introduction2></li> <li><a href="<%url>?xml">RSS</a></li> <li><%ad> <%ad2></li>
ボタンタイプは<ul></ul>のリストタグで囲むと、位置が左側にずれているように見えるので、<ul></ul>のリストタグで囲んでいません
リンクタイプのものは他の項目と一緒に、サイドバーのリストとして<li></li>で囲んでみました。こうすると他のリスト項目と一緒に一列に並びます。
ちなみにお気に入り追加ボタンはIEでしか動作しませんので注意しましょう。
もともとfc2blogのテンプレートは、どれも綺麗にマークアップされているためコードは短い。ですがそれでもhtmlとCSSは沢山要素が設定してあり、編集するとなると大変です。そこで見た目を犠牲にして、コードが簡単なテンプレートを自分用に作ってみることにしました。
fc2blogのテンプレートにはすべてfc2blogの独自タグが配置されています。たとえばトラックバックやコメントリストなども独自タグを使って、出力されています。ですがすべて一から自作するとなると、このタグなどもすべて自分で配置しなければいけません。いくらなんでも大変なので、既存のテンプレートを元にオリジナルのデザインテンプレートに仕上げることに。
そんなこんなでカスタマイズに向いてそうなテンプレートを探してみました。ダウンロードして見た限りではdefaultでしょうか？html部分にidやclassなどのコンテナがすくなく、CSSもあまり要素が設定されていません。そのためテンプレートの形状を把握しやすい。なのでテンプレートを自作する際の叩き台にするにはもってこいかと。
ブログ開設以来、あれもいいこれも良いと、テンプレートを変え続けてきました。結局monotoneテンプレートに落ち着いたけど、こんどは自分でテンプレートを作ってみることに。本当はブログ立ち上げ当初からそんなことをフかしてたんですが、実際やってみてわかりました。
「あのDreamWeaverが使えるんだからどうとてもなる」ぜんぜんなりません。確かにほとんどCSSだけでレイアウトされているんですが、プレビューを見ながら作業できなくて難しすぎ。（fc2blogの独自タグのせいなのか、WYSG系エディタでうまくプレビューできない）
まあとにかくオリジナルのを作ろうと思って、コードがシンプルなdefaultに手を加えてみることにしました。本当は完璧に0からやるべきなんでしょうが、fc2blogの独自タグを覚えて配置していくのはつらい・・・。
さて実際テンプレートをいじくってみて、特に難解だったのはエントリー本文の下。
あとカレンダーもぜんぜん意味がわからんです。コメントフォームとコメント編集フォーム、続きを読む部分のCSSは出来上がりを確認するのが面倒なため、CSSの設定がぜんぜん進みません。#commentlistと#trackbacklisなんかの意味が似たようなセレクタは、本当に必要なのかわかりません。
/* 記事のステータス用リスト */
.sub {
text-align: right;
margin: 2.7em 0 0 0;
}
.sub li {
display: inline;
}
.sub a {
margin-right: 0.3em;
}
一応これがエントリー日付やトラックバックなんかの、リストを横一列に並べるために存在するのはわかったのだけど・・・。しかしCSSデザインというのはhtmlはかなりスマートだが、CSSファイルのほうはそうでもないよな。テーブルレイアウトよりずっと手間がかかる・・・
等ブログのテンプレートを、共有テンプレートに追加しようとしたところ、規約違反で却下されました。公式テンプレートに多少手を加えただけのものは、共有テンプレートには登録することはできないようです。とほほ・・・。
なのでテンプレートはこちらで紹介します。monotonテンプレートのCSSです。公式テンプレートからmonotonをダウンロードしてCSSのみ貼り付けてください。
monotonテンプレートをカスタマイズしたもので、エントリー枠とテキストを大きくしてあります
エントリーを投稿するとき、<h4><h5>タグを使うと装飾されます。
<h4>大見出し</h4>
<h5>小見出し</h5>
大見出し
小見出し
エントリーを投稿するとき、段落をあらわす<p>タグを使うと字下げされます
<p>blogをはじめたばかりで、cssについてはさっぱり・・という人でもこの二つは結構簡単にできます。</p>
<p>それにはFC2blogの管理画面→テンプレートの設定→cssを変更を加えることによって、背景の色を変えたり文字の大きさを変えたり可能。</p>
blogをはじめたばかりで、cssについてはさっぱり・・という人でもこの二つは結構簡単にできます。
それにはFC2blogの管理画面→テンプレートの設定→cssを変更を加えることによって、背景の色を変えたり文字の大きさを変えたり可能。
エントリー本文でリストタグを使うと、上に行間がつまってしまうのを修正しました。というより個人的にあまりリストタグを装飾する必要性がわからなかったので、リストの装飾をごっそり削除してあります。
規約上公式テンプレートにあまり差異が無いテンプレートは、共有テンプレートにアップロードできません。ご自分のブログで公開するしかないようです。
テンプレートのhtmlもこの方法でできます。ですがhtmlファイルとして扱われてしまうので、ソースをコピーさせたり、文字化けがややこしい。ソースをコピーする旨と、文字化けしない文字コードを伝えて方が良いと思います。
等ブログのmonotonテンプレートCSSカスタマイズ履歴。同じテンプレートを使っている人の参考になれば幸いです。
文字が見づらいので、エントリー本文（記事表示部分）のみフォント変更
.content {
padding: 15px 15px 1em;
line-height: 1.4;
border-top-width: 0;
border-left: 1px solid #333;
border-right: 1px solid #333;
background: url(http://blog3.fc2.com/template/monotone/image/diagonal.gif) top center repeat-x #F8F8F8;
color: #242424;
font-family: "ＭＳ Ｐゴシック";
border-bottom-width: 1px;
font-size: 120%;
}
文字を大きくすると、エントリー枠が小さくて窮屈になります。そこでCSSを設定して、エントリー枠自体を大きくしてしまいます。
/* 全体囲み */
#all { width: auto;
margin: 0 50px 10px 50px;
text-align: left;
padding: 0 10px 10px 10px;
background: url(http://blog4.fc2.com/template/monotone/image/center.jpg) repeat-x top center #E9E9E9;
height: 800px;
}
このままではエントリー枠が、メニュー部分にめり込んでしまいます。メニューを右側にずらしましょう。
#right {
width: 220px;
position: absolute;
top: 10px;
right: 60px;
overflow: hidden;
border-left: 1px solid #333;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
background: #F8F8F8;
text-align: center;
}
なぜかCSSを設定すると、メニュー部分のシマ線が下に落ちてきてしまいます。
#right h3 {
font-size: 12px;
line-height: 1;
font-weight: bold;
color: #333;
text-transform: uppercase;
padding: 8px 0 0 30px;
background: url(http://blog4.fc2.com/template/monotone/image/sidetitle.gif) top right no-repeat;
text-align: left;
height: 21px;
voice-family: "\"}\"";
voice-family:inherit;
height: 21px;
margin: 0px;
}
/* メニュー内のリスト */
#right ul {
font-size: 90%;
list-style-type: none;
padding: 8px 12px 8px 2px;
background: url(http://blog3.fc2.com/template/monotone/image/diagonal.gif) top center repeat-x;
margin: 0;
text-align: left;
font-weight: ;
}
元々このテンプレートはグレーと赤で統一されていました。ちぇっとウルサイ感じかなと迷ったのですが、なんだか寂しいのでリンクの色を変更。
a:link {
text-decoration: none;
border-bottom: 1px dashed;
padding-bottom: 1px;
}
a:active {
text-decoration: none;
border-bottom: 1px dashed #999;
}
a:visited { text-decoration: none; border-bottom: 1px dashed #CCC; }
a:hover {
text-decoration: none;
border-bottom: 1px dashed #C66;
color: #339966;
position: relative;
right: -1px;
bottom: -1px;
}
エントリー本文のフォントサイズや背景色の設定をしたい方向けのエントリーです。たとえば等ブログではエントリー本文に以下のような設定がしてあります。
このように本文のフォントや色の設定をCSSで行いたい場合、エントリー本文を装飾しているCSSセレクタにフォントサイズなどの要素を書き込みます。ただしエントリー本文を装飾しているセレクタを探さねばなりません。
テンプレートによってCSSのセレクタ名はまちまち。なので自分でエントリーを装飾しているセレクタを見つけなくてはなりません。セレクタを見つけるには、ブログのテンプレートhtmlとテンプレートCSSを見つつ作業していきます。
こちらの“文字の色を変更“を参照ください
例として記事本文の文字色を変更してみましょう。該当箇所をピックアップすると下記のようになります。
<div class="section" id="a<%topentry_no>"> <h2 class="entry-header"><a href="<%topentry_link>" title="「<%topentry_title>」の永続的URI"> <%topentry_title></a></h2> <div class="entry-body"> <%topentry_body> <!--more_link--> <p class="entry-more"><a href="<%topentry_link>" title="「<%topentry_title>」の続きを読む"> 続きを読む ≫</a></p> <!--/more_link--> <!--more--> <%topentry_more> <!--/more--> </div> <ul class="entry-footer"> <li class="date">| <%topentry_year>-<%topentry_month>-<%topentry_day> | </li> <li class="category"> <a href="<%topentry_category_link>" title="カテゴリ「<%topentry_category>」の記事一覧"> <%topentry_category></a> | </li> <li class="com"> <!--allow_comment--> <a href="<%topentry_link>#comment-top" title="「<%topentry_title>」のコメント"> コメント : <%topentry_comment_num></a> <!--/allow_comment--> <!--deny_comment-->−<!--/deny_comment--> | </li> <li class="trk"> <!--allow_tb--> <a href="<%topentry_link>#trackback-top" title="「<%topentry_title>」のトラックバック"> トラックバック : <%topentry_tb_num></a> <!--/allow_tb--> <!--deny_tb-->−<!--/deny_tb--> | </li> </ul> </div>記事本文が展開されるFC2ブログの独自タグは<%topentry_body>です。このタグを囲っている親要素は<div class="entry-body">だという事が分かります。つまり記事本文に対してスタイルを適用する場合は下記の通りになります。
div.entry-body { color : #000; /* 記事本文前景色を黒色に設定 */ }
テンプレートによってはCSSにコメントがふってあるものがあります。それを頼りにエントリーを装飾しているセレクタを見つけることができます。たとえば等ブログのmonotonの例
/* 記事表示部分/コメントなどを囲うブロック要素の属性 */
.content {
padding: 15px 15px 1em;
line-height: 1.4;
border-top-width: 0;
border-left: 1px solid #333;
border-right: 1px solid #333;
background: url(http://blog3.fc2.com/template/monotone/image/diagonal.gif)
top center repeat-x #F8F8F8;
color: #242424;
font-family: "ＭＳ Ｐゴシック";
border-bottom-width: 1px;
font-size: 120%;
}
こんな感じにコメントでガイドされてます。もちろん.content がエントリー本文を装飾しているセレクタ。
fc2blogのテンプレート編集フォームは小さくて見ずらい。そこでこのhtmlエディタに、テンプレートのhtmlを貼り付けると色分けしてくれて見やすくなります。
またCSSエディタ機能も非常に使えるので、ブログのテンプレートのCSSを編集したい場合は、ぜひ利用してみてください。
このブログの右側のCategoriesをご覧ください。矢印とインデントを使って項目が整理されているのがお分かりでしょうか？
これはCategoriesをツリー化してあります。
カテゴリのツリー化はなれないと面倒なので、整理するほどカテゴリが無いならする必要は無いでしょう。
ですが極端な例として、ここのサイトほどカテゴリがあるなら是非すべきです。
私のような小さなサイトがアクセスアップを目指すのなら、古参大手サイトがやっていないような、マイナーなテーマを扱う必要があります。
そのため、扱う題材がどうしても狭く深くといった内容にならざるを得ない。何があるサイトなのか訪問者にとってわかりずらいという問題を抱えています。
なのでこうやってカテゴリをツリー化してくれると、多少はどういったコンテンツがあるのかわかりやすくなりますね。
ツリー化についてはこちらのblogで紹介されています。
ワンダと巨像と土と空 カテゴリーのツリー化の手順
http://blog3.fc2.com/wandatokyozo/blog-entry-48.html
［２］ つぎに、いま挿入したスクリプトを改造します。
Ｂのページ に載っている青字の部分を挿入して下さい。場所を間違えないように（＞＿＜）［４］ 最後に、独自ログのソースを修正します。カテゴリー部分の
<ul>
<!--category-->
<li><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li>
<!--/category-->
</ul>
の部分を
<div id="categorylist">
<ul>
<!--category-->
<li><a href="<%category_link>"><%category_name>(<%category_count>)</a></li>
<!--/category-->
</ul>
</div>と修正して下さい。（コピペで大丈夫です）
私はこの二つの手順でかなりつまずきました。ちなみにどちらの手順もテンプレートのhtmlに変更を加えるものです。
設定を加える場所を間違えて、元に戻せなくなってしまう場合もありますので、テンプレートのhtmlを保存しておくことをオススメします。
それから
たまにツリー化がうまくいかない方がいるみたいです。。。
原因としては、「カテゴリの登録の不具合」が一番可能性が高いと思います。
その場合は、すべての[]が半角モードで入力されているかを確認してみてください。
カテゴリ「未分類」も『[大カテゴリ]サブカテゴリ』のスタイルで登録するのを忘れないでくださいね。
これも必ず気をつけてください。半角の[]は全角のものと見分けがつきません。
[]をコピペしても失敗する場合があるらしく、うまくいかない場合は、一度半角で手動でうちなおしてみてください。
テンプレートによるのかも知れませんが、カテゴリーのツリー化が成功すると、カテゴリの行間がつまってしまう場合があります。その場合はテンプレートのcssに下を貼り付けてくださいp>
#categorylist ul li {
line-height: 150%;
}
FC2の共有テンプレートで多いんですが、
そのブログの作者の自己紹介が、一番目立つところにありますね。
これは”Information”ブロックといって、
管理画面にＵＰした、自分の写真やら自己紹介を表示してくれる部位です。
これをちゃんと書いておくと、ブログ作者の人柄が見えるということで、
本文者が自分のブログに親しみを持ってもらえます。
そうなればもちろんコメントやらトラックバックから、
サイトの輪が広がっていくわけですが、そんなことより
もっと沢山の人にアクセスしてもらいたいとなると話は別です。
たとえば検索エンジンから特定の単語をキーワードに
目当てにやってきた人にとってはどうでしょうか？
僕のサイトからではRSSリーダーをキーワードに、
検索エンジンのほうから人が訪れることがあります。
当然彼らはRSSリーダーについて知りたいのであって、
作者についてあまり興味を抱かないでしょう。
さてRSSリーダーをキーワードにやってきた方々を
もっと自分のページを見てもらいたいとなると、
自分のサイトのRSSリーダーの記事に誘導するのが一番でしょう。
そのためには、”カテゴリ”にRSSリーダーを作って、
その”カテゴリ”を訪問者にとって一番目立つところに配置するの
が一番簡単だと思います。
つまり自己紹介部分にカテゴリを置き換えれば一番目立つ。
自分のことより、ブログの記事がいかに役にたつかで
アクセスアップしてみたい方は試してみては如何でしょうか？
テンプレートのhtml部分をいじる必要がありますが、
そこまで難しくありません。
管理画面→テンプレートの設定→修正
を選択しましょう。その後ＨＴＭＬ部分に注目してください。
<h3>Categories</h3>
<ul>
<!--category-->
<li><a href="<%category_link>" title="カテゴリ：<%category_name>の記事をすべて読む"><%category_name> (<%category_count>)</a></li>
<!--/category-->
</ul>
というふうに書かれた部分がありますので、それを右クリック切り取り。
次にInformationと書かれた部分があるので
<h3>Information</h3>
<img src="<%image>" alt="<%author_name>">
<ul>
<li>Author: <%author_name></li>
<li><%introduction2></li>
<li><a href="<%url>?xml">RSS</a></li>
<li><%ad> <%ad2></li>
</ul>
その上にこのように貼り付けます。
<h3>Categories</h3>
<ul>
<!--category-->
<li><a href="<%category_link>" title="カテゴリ：<%category_name>の記事をすべて読む"><%category_name> (<%category_count>)</a></li>
<!--/category-->
</ul>
<h3>Information</h3>
<img src="<%image>" alt="<%author_name>">
<ul>
<li>Author: <%author_name></li>
<li><%introduction2></li>
<li><a href="<%url>?xml">RSS</a></li>
<li><%ad> <%ad2></li>
</ul>
後は保存して完了です。
ちなみに僕のブログの話になりますが、これは”カテゴリ”を一番
目立つところに配置して、逆に”自己紹介”を一番目立たないところに
配置してあります。
.content {
margin: 0;
padding: 15px;
line-height: 1.4;
border-top-width: 0;
border-left: 1px solid #333;
border-right: 1px solid #333;
border-bottom-width: 0;
background: url(http://blog3.fc2.com/template/monotone/image/diagonal.gif) top center repeat-x #F8F8F8;
font-size: 110%;
color: #242424;
/* 記事表示部分/コメントなどを囲うブロック要素の属性 */