その前に、以下をまだ見ていない方はチェックしてね
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; /* 線種 */
}
※色の表記参考はこちら
こんな感じになりました↓
練習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; /* 文字の装飾 */
}
変更後はこう
練習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
}
見出し背景に下の画像繰り返し入れてみる
background:#66CC66; /* 背景色*/
の変わりに以下を追加
background-image: url("https://blog.canpan.info/77iro/img/test_bg.png"); /* 背景画像 */
背景画像を作ってくれるサイト例
チェック柄:http://www.tartanmaker.com/
繰り返しパターン:http://www.bgpatterns.com/
こんなかんじ
見出し文字を入れてみた
CSSの一番下に以下を追加
/* オリジナル */
h3.org{
color:#5D5D5D; /* 文字の色 */
font-size:18px;
padding: 3px 0px;
border-bottom:dashed 1px #5D5D5D; /* 文字の下に点線 */
}
記事のときに使うときはこう書く
<h3 class="org">見出し3を追加してみた</h3>