記事投稿欄の編集

  1. テンプレート カスタマイズ
記事投稿欄の背景を編集したり、枠(ボーダー)を設定する方法をご紹介したいと思います。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓クリックで拡大↓↓↓↓↓↓↓↓↓↓↓↓↓↓

テンプレート名:[ pluging_2b_01 ]

記事投稿欄編集完了!




カスタマイズの前にテンプレートのコピーを取って下さい

デザインの編集>修正>スタイルシートより .entry を探して下さい

pluging_2b_01の場合

.entry {
margin: 0 10px 20px 10px;
background: #ffffff;
border: dotted 2px #40322f;
padding: 4px;
}


backgroundが背景でborderが枠になります。ここでは、背景を画像にして更にボーダーも編集してみます

.entry {
margin: 0 10px 20px 10px;
background: url(http://13.dtiblog.com/b/blogmanual/file/entrybg.jpg) #ffffff bottom repeat-x;
border: solid 1px #40322f;
padding: 4px;
}


背景画像の位置指定はこちらをご覧下さい
カラーコードはこちらをご覧下さい

更新ボタンをクリックして完成です

この記事の続きに、ボーダープロパティーについてもう少し詳しい説明を書いていますので、興味がある方は参考にして下さい。


border・・・・・ボーダーのスタイル・太さ・色を指定する

borderプロパティは、ボーダーのスタイル・太さ・色をまとめて指定する際に使用します。 スタイル・太さ・色のうち、指定する値を任意の順序でスペースで区切って記述します。

borderプロパティでは、ボーダーのスタイル・太さ・色について上下左右バラバラの指定をすることはできません。 上下左右のボーダーを異なったものにする場合には、 border-top、 border-bottom、 border-left、 border-right、 または、 border-style、 border-width、 border-color、 で指定してください。

点線

border: dotted #000000 3px;



破線

border: dashed #ff0000 2px;



傍線

border: solid #ff0000 2px;



groove線

border: groove #ff0000;



この例だと、赤色の各線を2ピクセルで囲いましょう、ということになります。
<<  日付、 コメント、 トラックバックを非表示にする方法  |  もくじへ  |  コンテンツ全体の背景編集  >>
<<  日付、 コメント、 トラックバックを非表示にする方法  |  ホーム  |  コンテンツ全体の背景編集  >>

コメント

コメントの投稿

管理者にだけ表示を許可する


画像の文字を半角数字で下記ボックスに記入ください。
文字が読みにくい場合はブラウザの更新をすると新しい文字列が表示されます。

トラックバック

トラックバックURLはこちら
http://blogmanual.dtiblog.com/tb.php/97-0a789bd7
|
ブログ | 総合ポータル | ニュース | テンプレート
利用規約 | ||通報|| | Report Abuse