貧乏だけど心は萌え:第3回は　プラグインの線の形を変える

	[ コンピュータ/インターネット - アキバ \| かんたん！ブログをはじめてみよう ]	livedoor ホーム

2004年07月24日

第3回は　プラグインの線の形を変える

レイアウトや、表示をカスタマイズしませんか？
第３回はサイドバーの線を変える方法。
テーマを採用したんだけど、プラグインをちょっとだけ、変えたいと思いませんか？

過去の記事はこちらです。

基本はlivedoorのテーマを使いたいんだけど、サイドバーをチョットだけ変えたいというのが、
心は萌えの最初の頃に思った不満でした。

本体はこのテーマ、プラグインはこのテーマ、という風にそれぞれ、気に入ったところが違うのです

なので、自分で変えちゃう事にします。

プラグインの線はかなり応用ができます
例をあげると・・・

カスタマイズしようぜsubA

こんな感じでしょうか？
・プラグインを枠で囲む
・プラグインのタイトル（ボディ）だけを枠で囲む
・プラグインのタイトル（ボディ）だけ彩色する
・一部分にだけ線をつける
・線の太さを変える
・線の種類を変える

こんな感じの事ができます

でわ、変え方に入ります

テーマがカスタマイズモードでないひとは、
第1回の記事を参考にカスタマイズモードに移行してください。
現在のテーマを引き継いで移行する方法を紹介しています

デザインの設定からCUSTUMを選んでください。
場所は下記の画面参照

写真はクリックで拡大します。

ここで表示される、CSSを編集します
表示されるスペースが少ないので、エディタなどにカット＆ペーストして編集される事をオススメします

写真はクリックで拡大します。

色々表示されていると思いますが、
以下の赤くしたところが今回の編集範囲です

@charset "EUC-JP";

body{
color:#000;
background:#fff url('/_img/kurakimai/bkg.jpg') no-repeat fixed 0 0;
margin:0;
text-align:left;
}

a{color:#007e0f;text-decoration:underline;}
a:link{color:#007e0f;text-decoration:underline;}
a:visited{text-decoration:underline;}
a:active{}
a:hover{color:#007e0f;text-decoration:none;}

a.acalendar{color:#007e0f;font-weight:bold;text-decoration:none;}
a.acalendar:link{color:#007e0f;font-weight:bold;bold;text-decoration:none;}
a.acalendar:visited{font-weight:bold;text-decoration:none;}
a.acalendar:active{font-weight:bold;}
a.acalendar:hover{color:#80ff00;font-weight:bold;background:#fbff99;text-decoration:none;}

a.acontinues{color:#007e0f;text-decoration:underline;}
a.acontinues:link{color:#007e0f;text-decoration:underline;}
a.acontinues:visited{text-decoration:underline;}
a.acontinues:active{}
a.acontinues:hover{color:#007e0f;text-decoration:none;}

a.amenu{color:#999;font-weight:bold;text-decoration:underline;}
a.amenu:link{color:#999;font-weight:bold;text-decoration:underline;}
a.amenu:visited{font-weight:bold;text-decoration:underline;}
a.amenu:active{font-weight:bold;}
a.amenu:hover{color:#999;font-weight:bold;text-decoration:none;}

a.aposted{color:#999;font-weight:bold;text-decoration:underline;}
a.aposted:link{color:#999;font-weight:bold;text-decoration:underline;}
a.aposted:visited{font-weight:bold;text-decoration:underline;}
a.aposted:active{font-weight:bold;text-decoration:underline;}
a.aposted:hover{color:#999;font-weight:bold;text-decoration:none;}

a.atrackback-post{color:#999;font-weight:bold;text-decoration:underline;}
a.atrackback-post:link{color:#999;font-weight:bold;text-decoration:underline;}
a.atrackback-post:visited{font-weight:bold;text-decoration:underline;}
a.atrackback-post:active{font-weight:bold;text-decoration:underline;}
a.atrackback-post:hover{color:#999;font-weight:bold;text-decoration:none;}

#container{
margin:0 0 50px 30px;
width:740px;
text-align:left;
}

#banner,#subbanner{
background:url('/_img/kurakimai/t_clover.gif') no-repeat scroll 0 25px;
height:200px;
}

#banner a{color:#999;text-decoration:none;}
#banner a:link{color:#999;text-decoration:none;}
#banner a:visited{color:#999;text-decoration:none;}
#banner a:active{color:#999;}
#banner a:hover{color:#999;text-decoration:none;}

#subbanner a{color:#999;text-decoration:none;}
#subbanner a:link{color:#999;text-decoration:none;}
#subbanner a:visited{color:#999;text-decoration:none;}
#subbanner a:active{color:#999;}
#subbanner a:hover{color:#999;text-decoration:none;}

h1,h2,h3{margin:0;padding:0;}

.blogtitle{
color:#999;
font-size:36px;
font-weight:bold;
padding:55px 0 0 90px;
text-align:left;
}

.description{
color:#999;
font-size:small;
font-weight:normal;
margin:-25px 20px 0 0;
text-align:right;
}

#content{
width:535px;
float:left;
margin:0;
}

.blog{
padding:0 20px 0 10px;
}

.date{
color:#9e2047;
font-size:small;
font-weight:bold;
padding:5px 5px 5px 25px;
height:25px;
background:url('/_img/kurakimai/renge.gif') no-repeat scroll 0 0;
}

.blogbody{
margin:20px 0 0 25px;
}

.title{
color:#006b35;
font-size:small;
font-weight:bold;
padding:0 0 5px 0;
border-bottom:3px dotted #ccc;
}

.main{
font-size:small;
line-height:135%;
margin:20px 0 20px 0;
}

.main-continues{
font-size:small;
}

.posted{
color:#999;
font-size:x-small;
text-align:right;
padding:0 0 25px 0;
}

.menu{
color:#999;
font-size:x-small;
margin:5px 0 25px 0;
text-align:right;
}

.comments-head{
color:#006b35;
font-size:small;
font-weight:bold;
padding:0 0 5px 0;
border-bottom:2px dotted #ccc;
}

.comments-body{
font-size:small;
line-height:135%;
margin:20px 0 20px 0;
}

.comments-post{
color:#999;
font-size:x-small;
text-align:right;
padding:0 0 25px 0;
}

.trackback-url{
color:#9e2047;
font-size:small;
font-weight:bold;
margin:20px 0 20px 0;
}

.trackback-body{
font-size:small;
line-height:135%;
margin:20px 0 20px 0;
}

.trackback-post{
color:#999;
font-size:x-small;
text-align:right;
padding:0 0 25px 0;
}

table.form{margin:25px 0 0 0;}

label{
font-size:small;
font-weight:bold;
}

#author{width:200px;}
#email{width:200px;}
#url{width:200px;}
#text{width:500px;height:200px;}

.pagetop{
color:#007e0f;
font-size:xx-small;
text-align:right;
padding:0 0 25px 0;
}

#links{
float:right;
width:205px;
padding:0 0 50px 0;
text-align:center;
}

.calendarhead{
color:#006b35;
font-size:x-small;
font-weight:bold;
letter-spacing:5px;
margin:0 20px 10px 20px;
text-align:center;
}

.calendartable{
margin:0 20px 20px 20px;
width:165px;
}

.calendarweek{color:#fff;font-size:xx-small;font-weight:bold;padding:0 2px;}
.calendarwd{background:#97ed41;}
.calendard{empty-cells:show;}
.calendardbg{background:#ccff99;}

.calendar{
color:#007e0f;
font-size:xx-small;
padding:0 2px;
}

.sidetitle{
color:#063;
font-size:x-small;
font-weight:bold;
letter-spacing:5px;
margin:0 20px 0 20px;
padding:40px 0 0 0;
background:url('/_img/kurakimai/clover.gif') no-repeat scroll 50% 0;
text-align:center;
}

.side{
font-size:x-small;
line-height:125%;
padding:5px;
margin:0 20px 20px 20px;
text-align:left;
}

.sidebody{padding:0 0 5px 0;}

a.arss{color:#063;text-decoration:underline;}
a.arss:link{color:#063;text-decoration:underline;}
a.arss:visited{text-decoration:underline;}
a.arss:active{}
a.arss:hover{color:#063;text-decoration:none;}

.photo{text-align:center;}
.nickname{color:#933;
font-size:x-small;
font-weight:bold;
margin:10px 0;
text-align:center;
}
.message{
font-size:x-small;
line-height:125%;
}

.blogtimes{
margin:0 20px 20px 20px;
text-align:center;
}

.powered{
margin:0 20px 10px 20px;
text-align:center;
}

.syndicate{
font-size:xx-small;
margin:0 20px 0 20px;
text-align:center;
}

最初に、プラグインは全部で８本の線でできています。
これを個別に設定する事により、
さまざまな色・形になります
（本当はもう少しあるのですがそれはまた次回）

カスタマイズしようぜSubE

写真中の緑色の部分がタイトル用の線。
写真中の赤色の部分がボディ用の線。
になります
それぞれに、上・下・左・右という4本の線があり、
タイトル4本・ボディ4本で合計８本になります

たとえば、下の例のように

カスタマイズしようぜsubA

プラグインをぐるっと囲みたい場合で、
タイトルと、本文の間に線を引かない場合は
タイトル上・右・左　
本文下・右・左
の６本の線を引くことで表現できます

たとえば、下の例のように

カスタマイズしようぜsubd

部分的に線を引く場合は
タイトル左・下　
本文左・下
の４本の線を引くことで表現できます

さて、その線の引き方ですが、先ほどのCSSに以下のような分を追加します。

.sidetitle{
color:#063;
font-size:x-small;
font-weight:bold;
letter-spacing:5px;
margin:0 5px 0 5px;
padding:5px 0 0 0;
text-align:center;
border-top:4px solid #458b74;
border-right:4px solid #458b74;
border-left:4px solid #458b74;
border-bottom:4px solid #458b74;
}

.side{
font-size:x-small;
line-height:125%;
padding:5px;
margin:0 5px 5px 5px;
text-align:center;
border-top:4px solid red;
border-right:4px solid red;
border-bottom:4px solid red;
border-left:4px solid red;
}

タイトルに線を追加したい場合は、.sidetitleの方に
本文に線を追加したい場合は.sideの方に
行を追加します
逆に線を消したい場合は対応する行を消します

上に線を追加したい場合はborder-topを書きます。
下に線を追加したい場合はborder-bottomを書きます。
右に線を追加したい場合はborder-rightを書きます。
左に線を追加したい場合はborder-leftを書きます。

線の色や太さはその後に何を書くかで決まります。
上を例にすると

border-top:太さ形色;
になります。
太さは 1px 2px 3px　と数字が大きくなるにつれ太い線になります

形は、色々ありますがとりあえず、solidと書いておけば問題ありません
ここら辺を参考にされると、色々な形が載っています

色も、色々ありますがとりあえず、redやgreenもしくは#00000 #FFFFFF と書いておけば問題ありません
ここら辺を参考にされると、色々な色の番号が載っています,
16進数の部分に乗っている#XXXXXXの数字を書いてあげればOKです。

というわけで、ごく簡単にプラグインの線のカスタマイズ方法を載せました
次回は具体例も挙げつつ、もうすこし、線の書き方を書こうかな～

ランキング参戦中
良かったらクリックしてください。