入口 > スポンサー広告 > スポンサーサイト テンプレ - 修正報告 > 大幅修正のお知らせ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--------

大幅修正のお知らせ

【PC用】【携帯用】
テンプレを大幅に、というか基本設定をひっくり返すような修正をしました。
スマフォからの閲覧時や日記としての利用が思いのほかネックになったことと、畳紙さんのこちらの小技に出会えたこともあって、「カテゴリ別の記事数を『1』にしなくても、表示順を『古い順』にしなくてもよく、日記利用時の色々が元から考慮されてる」テンプレに作り変えました。

改善(したと私は思う)点を整理すると、

◎カテゴリ別の表示順が新しい順のままでよい
◎カテゴリ別の記事数が好きな数字でよい
◎従って案内&目次系を未来の日付で書ける
◎従ってスマフォからの閲覧時に便利
◎同様に他テンプレへの乗り換えにも便利
◎目次記事はけっこうよく編集すると思うのでその点でも便利
◎日記風利用時のソースとかスタイルが実装されてる
◎従って日記を書くためにソースいじり系カスタマイズや別ツールの調達が不要
◎日記を実際書く時もタグやら日付やらに気を遣わなくていいから気楽
◎といった日記風利用を複数カテゴリでできる


あたりになるかと思います。

逆に悪くなったところは

◎表示しない=不要なはずのソースもわざわざ出力させていることになり無駄が多い
◎スタイルシート頼り率が上がったので切られたとき不細工
◎案内記事はめったに編集しないのに過去記事管理画面でいつも上にあって邪魔
◎fc2の公式アナウンスされてないバグというか癖を利用してるので仕様が変わったらある日突然使えなくなる可能性も


でしょうか。

もちろん見た目はまったく変わりませんし、今までの使い方でも普通に使っていただくことはできます。
が、上記のような特徴つきのテンプレの方がいいよ! という場合は、新たにDLしていただくか(共有テンプレで説明「サイト擬装」とか作者名「ucd」とかで検索してみてください)、下記の通りにしてください。



まず、HTMLとスタイルシートを書き換えます。

PC用


◆PC用HTMLの変更◆
1.<h2>更新情報</h2>下の<ul>~</ul>を以下に差し替えてください

<ul>
<!--topentry-->
<li class="rireki_no<%topentry_no> rireki_cat<%topentry_category_no>">
<a href="<%topentry_link>" title="<%topentry_title>"><%topentry_year>/<%topentry_month>/<%topentry_day> : <%topentry_title> [<%topentry_category>]</a></li><!--/topentry-->
</ul>


2.「■目次ページのつもり■」の前後、<!--category_area-->から<!--/category_area-->を以下に差し替えてください

<!--category_area-->
<div id="category_cat<%cno>">
<div class="mokuji">
<!--■目次ページのつもり■-->
<!--topentry-->
<div class="topentry">
<h3><span class="h3"><%topentry_title></span></h3>
<div class="topentry_body entry_cat<%cno>">
<%topentry_body><br />
<!--more_link-->
<div class="more"><%topentry_more></div>
<!--/more_link-->
<!--more--><!--/more-->
</div><!--div:topentry_body:end-->
</div><!--div:topentry:end-->
<!--not_edit_area--><!--/topentry--><!--topentry--><!--/not_edit_area-->
<!--/topentry-->
<div id="back">
<a href="<%url>" title="サイトトップへ">BACK</a>
</div><!--div:back:end-->
</div><!--div:mokuji:end-->

<div class="nikki">
<!--■日記ページのつもり■-->
<h2><div class="h2"><%sub_title></div></h2>
<!--topentry-->
<div class="topentry entry_cat<%topentry_category_no>">
<h4><span class="h4"><%topentry_title></span></h4>
<div class="date">
<%topentry_year>-<%topentry_month>-<%topentry_day>
</div><!--div:date:end-->
<div class="topentry_body">
<%topentry_body>
<!--more_link-->
<div class="more"><%topentry_more></div>
<!--/more_link-->
<!--more--><!--/more-->
</div><!--div:topentry_body:end-->
<div class="pagetop">
<a href="#top" title="ページの先頭へ">▲</a>
</div><!--div:pagetop:end-->
</div><!--div:topentry:end-->
<!--/topentry-->

<div id="pagelink">
<!--prevpage-->
<a href="<%prevpage_url>" title="前のページへ">≪ prev</a> 
<!--/prevpage-->
<a href="<%url>" title="トップへ">BACK</a>
<!--nextpage-->
 <a href="<%nextpage_url>" title="次のページへ">next ≫</a>
<!--/nextpage-->
</div><!--div:pagelink:end-->
</div><!--div:nikki:end-->

</div><!--div:category_cat<%cno>:end-->
<!--/category_area-->



◆PC用スタイルシートの変更◆
1.以下をどこかに付け足してください

/*** 日記のつもり関係 ***/
/* 単記事or複数記事表示分岐(Nを日記カテゴリ番号に) */
.nikki { display: none; }
#category_catN .mokuji { display: none; }
#category_catN .nikki { display: block; }

/* 目次記事を入口の更新情報に表示しない(X,XX,XXXを目次記事番号に) */
.rireki_noX, .rireki_noXX, .rireki_noXXX { display: none; }

/* 日記カテゴリを入口の更新情報に表示しない(Nを日記カテゴリ番号に) */
.rireki_catN { display: none; }

.nikki .h2 { text-align: center; font-size:90%; letter-spacing:2px; margin: 50px 0 80px 0; }
.h4 { font-size: 110%; }
.date, .pagetop { width: 100%; text-align: right; font-size: 95%; }
.date { color: #555; background-color: transparent; margin: 15px 0 15px 0; }
.nikki .topentry { margin-bottom:100px; }
#pagelink { width: 100%; text-align: center; margin-top: 70px; }


2.できれば二行目に「/* ver.2 */」と入れといてください




携帯用



◆携帯用HTMLの変更◆
1.携帯用HTMLの真ん中らへん、<!--not_permanent_area--><!--not_mplugin_area-->~<!--/not_mplugin_area--><!--/not_permanent_area-->を、丸ごと以下に差し替えてください

<!--not_permanent_area-->
<!--not_mplugin_area-->
<div id="category_c<%cno>">
<div class="mokuji">
<!--topentry-->
<h2><%topentry_title></h2>
<div class="t t_n_p e_c<%cno>" align="left">
<%topentry_body>
<!--more_link--><div class="more"><%topentry_more></div><!--/more_link-->
</div>
<!--not_edit_area--><!--/topentry--><!--topentry--><!--/not_edit_area-->
<!--/topentry-->
</div>
<div class="nikki">
<h2><%sub_title></h2>
<!--topentry-->
<h3 class="r"><%topentry_title></h3>
<div class="t t_n_p e_c<%cno>" align="left">
<div class="r n_date" align="right"><%topentry_year>-<%topentry_month>-<%topentry_day></div>
<%topentry_body>
<!--more_link--><div class="more"><%topentry_more></div><!--/more_link-->
</div>
<!--/topentry-->
<!--page_area-->
<div class="page">
<!--prevpage--><a href="<%prevpage_url><%tail_url>" accesskey="*">*<!--/prevpage-->prev<!--prevpage--></a><!--/prevpage-->|<!--nextpage--><a href="<%nextpage_url><%tail_url>" accesskey="#"><!--/nextpage-->next<!--nextpage-->#</a><!--/nextpage-->
</div>
<!--/page_area-->
</div>
<div class="back"><a href="<%url>?m<%tail_url>">BACK</a></div>
</div>
<!--/not_mplugin_area-->
<!--/not_permanent_area-->



◆携帯用スタイルシートの変更◆
1.以下を好きなところに付け足してください

/* 日記 */
.nikki h3 { font-size:x-small; font-weight:bold; margin-bottom:30px; }
.nikki .t_n_p { margin-bottom:30px; padding-bottom:20px; border-bottom: dotted 1px #000; }
.n_date { color:#999; padding:10px 0; }

/* カテごとに記事数分岐 */
.nikki { display: none; }
#category_cN .mokuji { display: none; }
#category_cN .nikki { display: block; }

/* 更新情報プラグインに目次記事非表示 */
.r_noX, .r_noXX, .r_noXXX { display: none; }


2.できれば二行目に「/* ver.2 */」と入れといてください


◆携帯用プラグインの変更◆(「最新記事」プラグインを利用する場合)
1.携帯用プラグイン管理画面で「最新記事」詳細をクリック、「コンテンツ用HTMLの編集」をクリックし、出てきた窓の中身を丸ごと以下に書き換えてください

<ul>
<!--recent-->
<li class="r_no<%recent_no>"><a href="<%url>?m&no=<%recent_no><%tail_url>"><%recent_title> (<%recent_month>/<%recent_day>)</a></li>
<!--/recent-->
</ul>






上記の通り書き換えられたら、「環境設定の変更」→「ブログの設定」→「記事の設定」で「記事(カテゴリ別)」の表示順を「新しい順」にし、さらに最古記事に置いていた目次などを未来の日付にしてください。


あとは、「X」「XX」「XXX」あたりを未来の日付に変えた目次記事の記事番号に変え、また同一ブログ内で日記的利用をするなら、スタイルシートの「N」を日記利用カテゴリに書き換えればおしまいです。
(項目数が足りない時は「.r_noX」「#category_catN .nikki」などをコピペで増やして「, 」で並べていってください)
作品記事も日記も何も考えずに普通に上げていくことができます。作品目次は相変わらず手作業ですけども。


手順が長くなってしまい申し訳ありません。とはいえやること自体は単純なので、実作業としてはそう時間もかからず終わるんじゃないかと思います。
宜しくお願い致します。


2011-06-14
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。