忍者ブログ

≪ 前の記事

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

▲TOP

カスタマイズ 文字色

文字に色をつけます。基本的な文字は既に青に設定してあります。
ところどころ色を変えるために、記事の作成の際に現れる
[太字][斜体][下線]を利用し色や文字に効果をつけます。
管理メニューのデザインカスタマイズより

/*---------------------------------------------*/
/* 記事 */
/*---------------------------------------------*/

.blog-text b { color: orange ; }

.blog-text i { color : #FF0000;
border-color : #ffffff ; border-style : outset ;
font-style: normal;
}
.blog-text u { color : #0000FF; }

太字を指定した際に太字がオレンジ色になるように
.blog-text b { color: orange ; }

斜体を指定した際に色が赤で盛り上がったような効果が出るように
.blog-text i { color : #FF0000;
border-color : #ffffff ; border-style : outset ;
font-style: normal;
}

下線を指定した際に下線表示し色が青になるように
.blog-text u { color : #0000FF; }

カラフルになって e気持ち!


PR

Comment (0) | Trackback () | ▲TOP

カスタマイズ ページタイトル&メニュー

Blogのタイトルの背景をオレンジ色にしました。
管理メニューのカスタマイズから

/*---------------------------------------------*/
/* ページタイトル */
/*---------------------------------------------*/
.mydoblog-header {
text-align: center ;
background-color : orange ;
}
ページタイトルの部分でbackground-color : のところOrange ;とします。

ついでに下記の部分で

.mydoblog-header-text {
font-family : "MS Pゴシック", "Osaka", "sans-serif" ;
font-size: 180% ;
font-weight : bold ;
line-height : ;
color : #ffffff ;

フォントのサイズを180%と大きくして、Boldに指定、文字色を白#ffffffにしました。

/*---------------------------------------------*/
/* メニュー */
/*---------------------------------------------*/

.menu-header {
font-family: "MS Pゴシック", Osaka, sans-serif ;
font-size : ;
font-weight : bold ;
line-height : 125% ;
color : #333333;
padding : 0px 0px 0px 0px ;
margin : 0px 0px 0px 10px ;
border-bottom : 2px solid orange ;
border-left : 5px solid orange ;

メニューの各タイトルの部分のアンダーラインをやめて、左と下の線を
利用しオレンジの線を表示しました。

border-bottom : 2px solid orangeは下線の太さ2pxで実線、オレンジ色の指定
border-left : 5px solid orangeは左の線の太さ5pxで実線、オレンジ色の指定です。

太陽をイメージしたオレンジが映えて e気持ち!

Comment (0) | Trackback () | ▲TOP

カスタマイズ Doblogヘッダー

Doblogヘッダーの灰色部分を消して、すっきりe気持ち!
デザインによっては結構目だってしまうので、消しました。


/*---------------------------------------------*/
/* Doblogヘッダー */
/*---------------------------------------------*/
の部分に

.mydoblog-position table {
background-image :none ;
}

上記の追加しました。実は他の方のBlogの受け売りでコピペさせていただきました。


.mydoblog-position A.portalbar:link {
color : blue ;
text-decoration : none ;
}

.mydoblog-position A.portalbar:active {
color : blue ;
text-decoration : none ;
}

.mydoblog-position A.portalbar:visited {
color : blue ;
text-decoration : none ;
}

.mydoblog-position A.portalbar:hover {
background-color : navajowhite ;
color: #FF0000 ;
text-decoration : none ;
}

白地なのでリンク部分を引き立つように青文字にしました。
上記のColor :Blue ;の部分は好みの色に設定できます。

マウスが乗ったときの処理は前回のリンクの記事同様。
背景色としてnavajowhite指定しました。


Comment (0) | Trackback () | ▲TOP

カスタマイズ リンク

今回はリンク部分にちょっとアクセントをつけて遊んでみました。
マウスのった時に色が変ってe気持ち!

管理メニューのデザインカスタマイズにて

/*---------------------------------------------*/
/* リンク */
/*---------------------------------------------*/
a:link {
color : #003366 ;
}
a:active {
color : #003366 ;
}
a:visited {
color : #003366 ;
}
a:hover {
color : #FF0000 ; background-color:navajowhite
}

上記のa:hover { のところはマウスが乗ったとき文字色が変るだけでなく
background-color:navajowhite を加えることで、背景色を
navajowhiteに変えます。色はお好みで好きな色を指定してください。



Comment (0) | Trackback () | ▲TOP

カスタマイズ全体

ブログ全体を眺めてみました。非常にシンプルで何か寂しいですね。
それに字がちっさくてちょっと見づらいと思いました。

管理メニューからデザインカスタマイズを選択します。
最初の部分で
/*---------------------------------------------*/
/* 全体 */
/*---------------------------------------------*/
body {

のところを見ます。

font-family : "MS Pゴシック", "Osaka", "sans-serif" ;
 
の下に
font-size : 115% ;

として全体的に文字のサイズを大きくしました。数字はいろいろ変えて
ちょうどいいと思う大きさにしました。

その下に
color : blue ;

として基本文字の色を青にしました。

その下に
cursor:crosshair;

としてカーソルの形を十字にしてみました。

その下に
background-color : ;
text-align : center ;
margin-top : 0px ;
margin-bottom : 10px ;
background-image : url("/img/u45763/FI1321073_0E.gif") ;
background-attachment : fixed ;
}

として}の前の2行で背景の画像指定と背景の固定を行います。

background-image : url("/img/u45763/FI1321073_0E.gif") ;

にて背景の画像を指定します。背景の画像のファイルはurlの後に("/img/u45763/ .gif")の様にgifファイル名を指定します。

使いたい背景の画像(.gif)ファイルを自分のブログにアップして使用してください。
イメージ(画像)をアップする要領でファイルをアップしたら、下書きで保存しておけば
他人に見られることはありません。画像にマウスを合わせれば("/img/u45763/ .gif")の部分がブラウザの下のほうに表示されます。

これだけだと画面をスクロールすると背景までスクロールして目に優しくないので、
私は背景が動かないほうが好きなので、

background-attachment : fixed ;

fixed (固定)として背景を固定しました。

記事が真ん中にあって背景の左右のひまわりとの隙間が偏るので

.mydoblog-position {
text-align : left ;
width : 760px ;
position : absolute ;
left : 50% ;
margin : 0px 0px 0px -400px ;
border : ;
background-color : #ffffff ;
}
の部分でmargin : の最後の-400px ;の値を変えて記事の部分の
左右の位置を調整しました。

これだけでも、かなりイメージチェンジできてe気持ち!


Comment (0) | Trackback () | ▲TOP

カスタマイズ準備

下書きのまま忘れてました。こちらを先に読まないと、前回の記事が意味不明に(^^;

また変更するかもしれませんが、とり合えず今まで行ったブログカスタマイズにつき
忘れないように記録を残しておきます。初心者なので、特別な技などありません。
これまで、いろんな人のブログに公表されている方法なので、目新しいものは
無いですが、いろんなデザインが増えれば楽しくって e気持ち!

ログインしたら管理メニューからデザインテンプレート選びます。
今回はベースとしてシンプルを選び設定保存します。

再度管理メニューから表示項目設定を選びます。Hottolinkと検索のチェックボックスを
OFFにします。Blog Clikを表示しないにして、Hottolink、検索、広告を非表示にしました。だいぶすっきりしますね。

これで準備完了です。

Comment (0) | Trackback () | ▲TOP

« 2024年11月 »
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

Recent Trackback