記事欄表示位置の変更

  1. テンプレート
ブログの構成は、HTMLとスタイルシートが一体となったものが基本です。ここでは見本のテンプレートを元に投稿欄表示位置を移動させる手順を実際のCSS(スタイルシート)とHTMLを参照しながら解説します。これはあくまでも一例であって、テンプレートによっては構成が違うケースもあります。
------------------------------------------------------------------------------------------------------------------------
プラグインテンプレートをカスタマイズしてみよう
プラグインテンプレートのカスタマイズについては「テンプレートカスタマイズ」の章をご覧下さい。
------------------------------------------------------------------------------------------------------------------------
「general_buroguma」の記事投稿欄を左側によせてみましょう









デザイン編集ページでHTML内のCSSを確認しましょう





上記のブログは、「左メニュー」と「右メイン部分」の構成で成り立っている事を理解しましょう。今回は「右メイン部分」=「投稿欄」の幅を左寄せにしたいのでHTML内で「右メイン部分」のコードを探します。

スタイルシートに注目しましょう。
<div id="main'>→これがCSSを指定しているコードになります。これは、mainというIDでブログのレイアウトを指定していると言う意味です。レイアウトや文字の大きさを変更したいときは大抵がCSS(スタイルシート)を変更するだけで大丈夫です。



スタイルシート内でmain部分を見つけます




float部分をleft(左)で指定します。padding(隙間)部分も左から20px(上部)20px(右側)20px(下部)20px(左側)という形で隙間も取っておくと見やすくなります。


更新ボタンを押す(HTML又はスタイルシートどちらのボタンでもOKです)


記事投稿欄が左側に寄りました





<<  サイドバー(サイドカラム)にバナーやブログパーツを入れる  |  もくじへ  |  トップの画像を変えてみよう  >>
|
ブログ | 総合ポータル | ニュース | テンプレート
利用規約 | ||通報|| | Report Abuse