| 第04章：デザイン |
| 2. テンプレートの編集 ： b. 記事欄表示位置の変更 |
|
| |
| ブログの構成は、ＨＴＭＬとスタイルシートが一体となったものが基本です。ここでは見本のテンプレートを元に投稿欄表示位置を移動させる手順を実際のＣＳＳ（スタイルシート）とＨＴＭＬを参照しながら解説します。これはあくまでも一例であって、テンプレートによっては構成が違うケースもあります。 |
| |
 「general_buroguma」の記事投稿欄を左側によせてみましょう |
|
| |
| |
| |
| |
 デザイン編集ページでＨＴＭＬ内のＣＳＳを確認しましょう |
|
上記のブログは、「左メニュー」と「右メイン部分」の構成で成り立っている事を理解しましょう。今回は「右メイン部分」＝「投稿欄」の幅を左寄せにしたいのでＨＴＭＬ内で「右メイン部分」のコードを探します。
スタイルシートに注目しましょう。
<div id="main'>→これがＣＳＳを指定しているコードになります。これは、mainというＩＤでブログのレイアウトを指定していると言う意味です。レイアウトや文字の大きさを変更したいときは大抵がＣＳＳ（スタイルシート）を変更するだけで大丈夫です。
|
| |
| |
 スタイルシート内でmain部分を見つけます |
|
| float部分をleft（左）で指定します。padding（隙間）部分も左から20px（上部）20px（下部）20px（右側）20px（左側）という形で隙間も取っておくと見やすくなります。 |
| |
| |
| 更新ボタンを押す（ＨＴＭＬ又はスタイルシートどちらのボタンでもＯＫです） |
| |
| |
| |
 記事投稿欄が左側に寄りました |
|
| |
| |
| |
| |
|
| |
