pazw-ruhig
- 2000-03-11 土 23:19
- FC2ブログテンプレート
検索ワード「」は、Ctrlキー+Fキー（command+Fキー）で変更場所を探すためのキーワードです。「タイトル」となっていれば検索ウィンドウにタイトルと入力してください。
- 記事編集画面へのリンク
- 幅変更
- サイドバー左右入替え
- 記事の投稿時間を消す
- コメントの絵文字を追加
- コメントフォームにメール欄を追加
- 上部にある記事リストのリンクを個別ページではなくページ内移動に
- IE7以下で背景画像や横幅がずれるとき
履歴
記事編集画面へのリンク
記事本文下の投稿時間の左横に見えないリンクがあります。カーソルを合わせると表示され、ログイン状態のときのみ編集画面にジャンプします。
幅変更
任意の幅を指定できます。
変更場所 ▼ スタイルシートの編集
/* ---------------------------------[ WIDTH ] [1] [2] [3] [4] [5] 942px 687px 0px 0px 220px 870px 615px 0px 0px 220px 820px 570px 0px 0px 215px 776px 541px 0px 0px 200px 96% 100% -220px 220px 210px 96% 72.5% 0px 0px 26% */
初期状態では「820px 570px 0px 0px 215px」の5つの値が[1]～[5]に指定されています。
#pagetop {width: 820px;} /* [1] 全体幅 */
.main {width: 570px; /* [2] メイン幅 */
margin-right: 0px; /* [3]
[1]% HTML class="leftSide" change 'margin-left:' */
}
.m-main {margin-right: 0px;} /* [4]
[1]% HTML class="leftSide" change 'margin-left:' */
.sidebar {width: 215px;} /* [5] サイド幅 */
全体幅 - (メイン幅 + サイド幅) = 35px になるようにすると、ちょうどいいかもしれません。この差がメインとサイドのあいだの余白になります。
「870px 615px 0px 0px 220px」の5つの値を[1]～[5]に指定すると幅が50px広がります。
#pagetop {width: 870px;} /* [1] 全体幅 */
.main {width: 615px; /* [2] 記事幅 */
margin-right: 0px; /* [3]
[1]% HTML class="leftSide" change 'margin-left:' */
}
.m-main {margin-right: 0px;} /* [4]
[1]% HTML class="leftSide" change 'margin-left:' */
.sidebar {width: 220px;} /* [5] サイド幅 */
[3]と[4]は可変レイアウトを使用するとき以外は0pxのままにします。
「96% 100% -220px 220px 210px」の5つの値が可変レイアウトです。
サイドバー左右入替え
変更場所 ▼ HTMLの編集 検索ワード「rightSide」
<!-- rigthSide or leftSide --> の部分を変更します。
// 左に記事、右にサイドバー
class="rightSide"> <!-- rigthSide or leftSide -->
// 左にサイドバー、右に記事
class="lefttSide"> <!-- rigthSide or leftSide -->
leftSideで幅変更が可変レイアウト「96% 100% -220px 220px 210px」になっている場合は、[3]と[4]のmargin-rightをmargin-leftに変更します。
margin-left: -220px; /* [3]
.m-main {margin-left: 220px;} /* [4]
記事の投稿時間を消す
変更場所 ▼ HTMLの編集 検索ワード「time」
下記を削除します。
<li class="time"><%topentry_hour>:<%topentry_minute></li>
コメントの絵文字を追加
変更場所 ▼ HTMLの編集 検索ワード「textComment」
コメントエリアとコメント編集エリアの2ヶ所です。
コメントエリア、<textarea～の直前にscriptの行を追記します。
<dd class="textComment">
<script type="text/javascript" src="<%template_comment_js>"></script>
<textarea
コメント編集エリア、<textarea～の直前にscriptの行を追記します。
<dd class="textComment">
<script type="text/javascript" src="<%template_comment_js>"></script>
<textarea
コメントフォームにメール欄を追加
変更場所 ▼ HTMLの編集 - 検索ワード「formMail」
コメントエリアとコメント編集エリアの2ヶ所です。
コメントエリア、Comment formのName項目の直後に以下を追記します。
<dd><input id="formName" type="text" name="comment[name]" size="29" value="<%cookie_name>" /></dd>
<dt><label for="formMail">Mail :</label></dt>
<dd><input id="formMail" type="text" name="comment[mail]" size="29" value="<%cookie_mail>" /></dd>
コメント編集エリア、Comment formのName項目の直後に以下を追記します。
<dd><input id="formName" type="text" name="edit[name]" size="29" value="<%edit_name>" /></dd>
<dt><label for="formMail">Mail :</label></dt>
<dd><input id="formMail" type="text" name="edit[mail]" size="29" value="<%edit_mail>" /></dd>
メールアドレスは管理画面のコメントの管理から確認できます。
上部にある記事リストのリンクを個別ページではなくページ内移動に
変更場所 ▼ HTMLの編集：検索ワード「<span><%topentry_year>」
<span><%topentry_year>-<%topentry_month>-<%topentry_day></span> <a href="<%topentry_link>"><%topentry_title></a>
上記を下記に変更します。
<span><%topentry_year>-<%topentry_month>-<%topentry_day></span> <a href="#e<%topentry_no>"><%topentry_title></a>
IE7以下で背景画像や横幅がずれるとき
変更場所 ▼ HTMLの編集
</head> の前に以下のコードを追加します。
<!--[if lte IE 7]><style type="text/css">
body{word-break:break-all;word-wrap:break-word;}</style><![endif]-->
</head>
添付した画像や動画の横幅が大きすぎたり、長いURLが貼られているとレイアウトが崩れることがあります。幅変更でテンプレートの横幅を大きくしたり、画像や動画のwidthを小さくすることでも回避できます。
- 関連記事