--年--月--日

スポンサーサイト

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

記事とサイドバーのマージンを設定する。

 記事のはじめの日付部分とサイドバーのタイトルを同じ表示に変更しました。
2列カラムでエントリー部分のマージンを設定して読みやすくしてみました。
コメント入力欄の幅を広くして、投稿後のレイアウトとイメージしやすくしました。
コメント、トラックバックの表示部分のマージンを設定して読みやすくしてみました。


  1. FC2ブログにログインして、管理者ページの左サイドの
    「環境設定」の項目[テンプレートの設定 ]をクリックします。
  2. 「現在設定されているスタイル」の表の「編集」の欄の[ 修正 ]をクリックします。
  3. 「スタイルシートの編集[テンプレート名]を編集しています。」の欄の中でクリックします。(この中であればカーソルはどこでも構いません。)
  4. [Ctrl]+[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これに.blogと入力して、検索してください。
    • 必ずバックアップしましょう!

     いつも書いてますが、編集する前に、必ずCSSのコードをコピーして、「css_bk.txt」(例)のようにバックアップファイルを作成しておきましょうね。失敗しても、「css_bk.txt」の内容をコピペすれば、元にもどせますよ♪
  5. .blog.date.entry#comment#trackbacks-info
    .layout-two-column-liquid-right #contentの{?}に下の見本のようにコードを追加します。
    参考までに、marginの設定のしかたは下の通りです。
    margin:10px; 上下左右のマージンがすべて10px
    margin:10px 20px; 上下に10px、左右に20pxのマージンの設定
    margin:10px 20px 15px; 上に10px、左右に20px、下に15pxのマージンの設定
    margin:10px 20px 15px 30px; 上に10px、右に20px、下に15px、左に30px、のマージンの設定

    マージンの調整

    /* エントリー全体*/
    .blog {
    padding: 10px;
    font-size: small;
    color: #36414d;
    background: none;
    margin: 15px;
    }


    /* エントリー日付 */←記事のはじめの日付部分
    .date {
    margin: 6px 5px 0;
    padding: 2px 0 2px 5px;
    background-position: left;
    background-repeat: no-repeat;
    /* background-image: url(".gif");*/
    font-size: 10px;
    /* font-weight: bold;*/←太字の設定の解除
    color: #444444;
    line-height: 140%;
    }


    /* エントリー日付・コメントタイトル・トラックバックタイトルの配色 */
    .date,
    .trackbacks-header,
    .comments-header,
    .comments-open-header {
    background: #ffdead;
    border: 1px solid #666666;←囲み罫線の設定
    }


    /* エントリー*/
    .entry {
    width: auto;
    margin: 0 20px 15px;←上、左右、下のマージンの設定
    color: #36414d;
    background: #ffffff;
    background-position: right;
    background-repeat: repeat-y;
    /* background-image: url(".gif");*/
    font-size: 12px;
    line-height:150%;
    word-break: break-all;
    padding-left: 20px;
    }


    /*コメント入力欄の幅を広くする設定。*/
    #comment {
    width: 450px;266px→450pxに変更
    }


    /*トラックバック、コメント表示部分*/
    #trackbacks-info,
    .trackback-content,
    .comment-content,
    .comments-open-content {
    /* margin: 0;*/
    margin: 0 20px 0;左右のマージン 0→20pxに変更
    padding: 0;
    font-size: 12px;
    line-height: 150%;
    word-break: break-all;
    }

  6. [プレビュー]で確認して、[更新]をクリックしましょう。

  • yozoからのお願い
 この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
 また、言うまでもないことですが、この記事を参考にされるのでしたら、「テンプレート改造」は自己責任で行ってください。そして、改造前には必ずバックアップを取っておくようにしてくださいね♪
 この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは?」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m

なお、このテンプレートは、小粋空間yujiroさん作成のFC2ブログテンプレートからお借りしたものです。

↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング

スポンサーサイト

スレッドテーマ:カスタマイズ:ブログ

メイン

≪New ホットビール? | Top | 0606掲示板♪ Old≫

トラックバックURL


コメントする

お楽しみ:
サイト管理者にのみ通知する

チェックするとコメントプレビューがオンになります。

ご利用のブラウザ、設定ではご利用になれません。


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