入口 > テンプレ - 修正報告 > PC用の細部をたくさん修正しました

PC用の細部をたくさん修正しました

【PC用】
細かいところを色々々々といじりました。
おおむねどれも、普通に使っていればさほど影響のないものばかりなのですが、2011年6月27日15:30以前にPC用テンプレートをDLしてくださった方は、下記の説明を参考に必要だと思われたら適宜修正してください。
必要だった場合には重要かもしれない順番に並べました。




◆1.カテゴリによるデザイン変更をやりやすく
 HTMLの初めの方の「<head>」の下あたり、青字部分を追加

<!--index_area--><body id="index_body"><!--/index_area-->
<!--category_area--><body id="category_body" class="category_cat<%cno>_body"><!--/category_area-->
<!--permanent_area--><!--topentry--><body id="permanent_body" class="category_cat<%topentry_category_no>_body"><!--/topentry--><!--/permanent_area-->
<!--not_index_area--><!--not_category_area--><!--not_permanent_area-->
<body>
<!--/not_permanent_area--><!--/not_category_area--><!--/not_index_area-->

さらにスタイルシート末尾に

/*** カテゴリによってデザインを変える ***/
.category_catX_body {}

と追加


◆2.タイトルリストとか検索とかのページも使いたくなったら一応使えるように
 HTML最後の方

<!--not_index_area--><!--not_permanent_area--><!--not_category_area-->
<!--titlelist_area--><!--titlelist--><!--/titlelist-->
<div id="back">
<a href="<%url>" title="トップへ">BACK</a>
</div><!--div:back:end--><!--/titlelist_area-->
<!--date_area-->
<div id="back">
<a href="<%url>" title="トップへ">BACK</a>
</div><!--div:back:end--><!--/date_area-->
<!--search_area-->
<div id="back">
<a href="<%url>" title="トップへ">BACK</a>
</div><!--div:back:end--><!--/search_area-->
<!--tag_area-->
<div id="back">
<a href="<%url>" title="トップへ">BACK</a>
</div><!--div:back:end--><!--/tag_area-->
<!--/not_category_area--><!--/not_permanent_area--><!--/not_index_area-->

<!--not_index_area-->
</div><!--div:not_index_area:end-->
<!--/not_index_area-->

となってたのを

<!--not_index_area-->
<!--not_permanent_area--><!--not_category_area-->
<!--■その他ページ■-->
<div class="topentry" id="sonota">
<h3><span class="h3"></span></h3>
<div class="topentry_body">
<ul>
<!--titlelist_area-->
<!--titlelist-->
<li class="titlelist titlelist_cat<%titlelist_category_no> titlelist_no<%titlelist_eno>"><%titlelist_year>/<%titlelist_month>/<%titlelist_day> ... <a
href="<%titlelist_url>"><%titlelist_title></a> [<%titlelist_category>]</li>
<!--/titlelist-->
<!--/titlelist_area-->
<!--topentry-->
<li class="sonota sonota_cat<%topentry_category_no> sonota_no<%topentry_no>"><%topentry_year>/<%topentry_month>/<%topentry_day> ... <a
href="<%topentry_link>" title="<%topentry_discription>"><%topentry_title></a> [<%topentry_category>]</li>
<!--/topentry-->
</ul>
</div><!--div:topentry_body:end-->
</div><!--div:topentry:end-->
<div id="back">
<!--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:back:end-->
<!--■その他ページ終■-->
<!--/not_category_area--><!--/not_permanent_area-->

</div><!--div:not_index_area:end-->
<!--/not_index_area-->

と置換し、スタイルシートに

/*** その他ページ配置 ***/
#sonota ul { margin: 30px 0; }
.titlelist, .sonota { margin-left:100px; margin-bottom: 10px; }

と追加


◆3.ブログバトン用(別にこれらのスタイルがなくてもバトンに答えることはできます)
 スタイルシート「/*** 記事関係色々 ***/」の下、赤字部分を追加

.topentry_body blockquote, .blog_baton { border:solid 1px #ccc; padding: 10px; margin: 10px; }
.topentry_body p { padding: 5px 5px 2px 10px; border: none; }
.topentry_body hr { height: 1px; background-color:#ccc; border: none; color: #ccc; }
.topentry_body strong { font-weight: bold; }
.baton_q { margin: 10px 10px 0 10px; padding-top:10px; }
.q_number:after { content: "."; }
.baton_a { margin: 5px 10px 10px 20px; padding-bottom:10px; }
.a_number:after { content: "."; }



◆4.ボタンとか用(別になくてもボタンは機能します)
 スタイルシート「/* 色【基本】 */」の下に

input { border: solid 1px #ccc; background-color: #fff; color: #333; }

と追加


◆5.6以前のIE対策を全ページに
 HTML初めの方の「</head>」のすぐ上あたり、

<!--index_area-->
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->
<!--/index_area-->

取り消し線部分を削除


◆6.スタイルシートなしのときにちょっと配慮
 HTML「■入口ページ■」の下に

<div id="me" class="category">
<h2>メニュー</h2>
<ul class="oya_ul">

、スタイルシート/*** 入口ページ配置 ***/の下に

#me h2, .menu h2 { display: none!important; }

いずれも黄字部分を追加


◆7.各エリアで記事本文のカテゴリ&記事番号指定の仕方を統一
 「■目次ページのつもり■」「■日記ページのつもり■」「■作品ページのつもり■」の下の
「<div class="topentry」で始まるタグを

<div class="topentry entry_cat<%topentry_category_no> entry_no<%topentry_no>">

とし、「<div class="topentry_body」で始まるタグは

<div class="topentry_body">

のみに揃えた


◆8.「終タグ」を入れてHTMLをややわかりやすく
 「<!--■入口ページ終■-->(</div><!--div:index_area_2:end-->の後)」「<!--■目次ページのつもり終■-->(</div><!--div:mokuji:end-->の後)」、「<!--■日記ページのつもり終■-->(</div><!--div:nikki:end-->の後)」、「<!--■作品ページのつもり終■-->(<!--/permanent_area-->の前)」を挿入


◆9.ソースをちょっとでもきれいに
 HTMLの「<!--■入口ページ■-->」と「<!--index_area-->」、「<div class="mokuji">」と「<!--■目次ページのつもり■-->」、「<div class="nikki">」と「<!--■日記ページのつもり■-->」、の順番をそれぞれ入れ替え


◆10.スタイル指定の重複箇所をまとめた
 スタイルシートの中ほど、「/*** 日記のつもりページ配置 ***/」の下の「.h4 { font-size: 110%; }」を削除し、同じく下の方「/* 色【基本】 */」の下あたり

a:hover { color: #ccc; background-color: transparent;}
a:active { color: #ccc; background-color: transparent; }

だったのを

a:hover, a:active { color: #ccc; background-color: transparent;}




◆11.マイナーチェンジアピール
 スタイルシート2行目に「/* ver.2-1 */」と追加




以上です。小さいことばかりだけどあれもこれもと直していたら11項目にもなってしまいました。
が、とりあえず1.と2.が大体今回の目玉です。
これを使った「カテゴリによってデザインを変えるカスタマイズ」記事も、これから改めてまとめていきます。きっと楽しい。
あと携帯用の方も1.と似た感じのことができるように修正します。

2011-06-27