• もっと見る

2012年12月08日

CSSを試してみよう(カスタムデザインの場合) いろいろ変えてみた

背景色だけでなく、いろいろ変えてみましょう

その前に、以下をまだ見ていない方はチェックしてね
1.CSSを試してみよう(カスタムデザインの場合) その前に準備
2.CSSを試してみよう(カスタムデザインの場合) 



スタイルシートの上から

練習1


* { font-family:'MS Pゴシック','ヒラギノ丸ゴ Pro W4','Hiragino Maru Gothic Pro','Osaka',sans-serif; }

全体の文字種類を変えてみる

* { font-family:"メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"MS Pゴシック","MS PGothic",Sans-Serif;}


どう、ブログの画面を更新してみてください。文字の種類で結構イメージ変わりますね。

練習2


HR{
color: #999;
height: 1px
}


段落の区切れに使用するHRを変えてみる

HR{
color: #66CC66; /* 線色 */
border: 3px; /* 太さ */
border-style: solid; /* 線種 */
}


※色の表記参考はこちら
こんな感じになりました↓
60_1.jpg

練習3


a:link,
a:visited {
color:#000;
text-decoration:none;
}
a:hover {
color:#999;
text-decoration:underline;
}


「カスタム1」って、リンクがすごく分かりにくいので変えてみよう

a:link,
a:visited {
color:#003300; /* 文字色*/
text-decoration:underline; /* 文字の装飾 */
}
a:hover {
color:#006600; /* 文字色*/
text-decoration:underline; /* 文字の装飾 */
}


変更後はこう
60_2.jpg


練習4 記事のタイトル部分を変えてみる


/* 記事タイトルに関するスタイル */
.entry_title {
overflow:hidden;
word-break:break-all;
font-size:12px;
color:#000;
font-weight:bold;
margin:0;
text-align:left;
padding: 5px 5px;
}

/* 日付に関するスタイル */
.date {
font-weight: normal;
font-size: 10px;
color: #000;
white-space:nowrap
}

変更してみる
/* 記事タイトルに関するスタイル */
.entry_title {
overflow:hidden;
word-break:break-all;
font-size:14px; /* タイトル文字サイズ */
color:#FFF; /* 文字色*/
font-weight:bold;
margin:0;
text-align:left;
padding: 5px 5px;
background:#66CC66; /* 背景色*/
}

/* 日付に関するスタイル */
.date {
font-weight: normal;
font-size: 10px;
color: #FFF; /* 日付文字サイズ */
white-space:nowrap
}


見出し背景に下の画像繰り返し入れてみる
test_bg.png


background:#66CC66; /* 背景色*/

の変わりに以下を追加

background-image: url("https://blog.canpan.info/77iro/img/test_bg.png"); /* 背景画像 */

背景画像を作ってくれるサイト例
チェック柄:http://www.tartanmaker.com/
繰り返しパターン:http://www.bgpatterns.com/

こんなかんじ
60_4.jpg


見出し文字を入れてみた


CSSの一番下に以下を追加

/* オリジナル */
h3.org{
color:#5D5D5D; /* 文字の色 */
font-size:18px;
padding: 3px 0px;
border-bottom:dashed 1px #5D5D5D; /* 文字の下に点線 */
}


記事のときに使うときはこう書く

<h3 class="org">見出し3を追加してみた</h3>
この記事へのコメント
コメントを書く
この記事へのトラックバックURL
トラックバックの受付は終了しました
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック