共有テンプレートとカスタマイズ方法をちょっとだけ紹介。

スポンサーサイト

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

線の種類を変える

~まずやってみよう~

※共有テンプレート「asagi-simple01」を使った例です。
両サイドのプラグイン部分のタイトルの線をかえてみます。
スタイルシートで↓の部分をさがす。

/* 両サイド(Secondary-Column,Extra-Column)の設定
------------------------------------------- */
	/* プラグインタイトル */

	.side-title {
		margin : 15px 0px 5px 0px;
		font-size : 10px;
		border-color : #000000;
		border-width : 3px 0px;
		border-style:double;
	}

赤い文字の部分を↓に書き換えてください

※枠の中をクリックすると全文が選択されますので、コピーしてご利用ください。


~解説~

両サイドのプラグインタイトルの部分が、このように変わりましたか?

border-styleで線の種類を指定し、border-widthで線の太さを指定します。
また、border-colorで線の色を変更できます(色の指定についてはこちら)。

指定の際、半角スペースで仕切ることでまとめて指定ができます。
1つを指定⇒上下左右に反映
2つを指定⇒上下・左右にそれぞれ反映
3つを指定⇒上・左右・下にそれぞれ反映
2つを指定⇒上・右・下・左にそれぞれ反映

border-styleで指定できる、線の一例をあげておきます
none:線なし
solid:1本線  double:2本線  dashed:破線  dotted:点線

同じ線でもborder-widthで太さを変えることで違う印象になります。
1px solid:1本線  double:2本線  dashed:破線  dotted:点線

3px solid:1本線  double:2本線  dashed:破線  dotted:点線  

5px solid:1本線  double:2本線  dashed:破線  dotted:点線
 
線の組み合わせで印象がかわりますので、色々試してみてください。

 border-style: none double solid none;
 border-width: 0px 5px 1px 0px;

 border-style: none solid dashed solid;
 border-width:0px 1px 3px;

 border-style:dotted;
 border-width:3px 4px 6px 5px;

★その他の部分の線の種類を変える場合は、↓を参考にしてください

↓タイトル部分

	#branding {
		margin : 20px 0 0 0;
		border-color : #000000;
		border-width : 1px 1px;	
		border-style:double;
	}

↓トップのフリースペース
	.news {
		margin : 15px 10px;
		border-color : #000000;
		border-width : 4px 4px;	
		border-style:double;
		padding : 10px 20px;
		text-align : center;
		font-size : 12px;
		line-height : 1.2;
	}

↓記事を囲んでいる部分
	.section {
		margin : 5px 10px;			
		border-color : #999999;
		border-width : 1px 1px;	
		border-style:solid;
	}

↓記事のタイトル部分
	.entry-header {
		margin : 10px;
		font-size : 13px;	
		text-align : center;
		border-color : #000000;
		border-width : 3px 0px;	
		border-style:double;
	}

↓コメントを囲ってる部分
	.comment {
		margin : 5px 10px;	
		border-color : #999999;
		border-width : 1px 1px;	
		border-style:solid;
	}

↓トラックバックを囲ってる部分
	.trackback {
		margin : 5px 10px;	
		border-color : #999999;
		border-width : 1px 1px;	
		border-style:solid;
	}

↓プラグインタイトル
	.side-title {
		margin : 15px 0px 5px 0px;
		font-size : 10px;
		border-color : #000000;
		border-width : 3px 0px;	
		border-style:double;
	}

★カスタマイズについて★

カスタマイズはご自由にどうぞ。
再配布も○ですが↓のことを守ってください。

・ページ下部の「Template designed by SYU_ASAGI」のリンクは削除しないで下さい。

・カスタマイズした場合、「arranged by ●●」と追記してください。

プロフィール

浅葱 愁

管理人  浅葱 愁(あさぎ しゅう)

▽ブログ名▽
浅葱愁のつれづれなるままに
▽URL▽
http://syuasagi.blog95.fc2.com/


当ブログはリンクフリーです。

MENU

◆共有テンプレート◆
「asagi-simple01」
「asagi-simple02」
注意事項も記載してますので、ご利用前にそれぞれ目を通してください。
コメントナンバーの表示について(01.02共通)
検索バーを非表示にする
◆テンプレートカスタマイズ◆
「asagi-simple01」を使った簡単なカスタマイズ方法を紹介。
はじめに
準備
色について
■文字のカスタマイズ
文字の色を変える
リンク部分の文字色を変える
本文を左寄せにする
■幅のカスタマイズ
幅を広げる
■枠のカスタマイズ
線の種類を変える
■背景のカスタマイズ
背景を変える

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