step7：記事部分の個別設定をしよう

2021.03.12

step6では記事部分の全体を変更しました

step7では記事部分の個別設定をしていきましょう

スポンサーリンク

.articles-title {　をかえよう

はなゾウ先生
はなゾウ先生

.articles-title {　をかえると記事タイトル部分がかわるよ

/* Articles */
.articles-title {
margin:0;
margin-bottom:15px;
padding-left:5px;
border-left:4px solid #70a000;
font-size:small;
line-height:1.2;
}
記事タイトルをかえる手順

.articles-body {　をかえよう

はなゾウ先生
はなゾウ先生

.articles-body {　をかえると記事本文がかわるよ

元がシンプルな指定なので自分ごのみにかえる時はたくさんタグの挿入が必要だね

/* Articles */
.articles-body {
line-height:1.6;
margin-bottom:20px;
}
.articles-body a:link { text-decoration: none; color:#70A000; }
.articles-body a:visited { text-decoration: none; color:#70A000; }
.articles-body a:active { text-decoration: none; color:#70A000; }
.articles-body a:hover { text-decoration: underline; color:#70A000; }

記事本文をかえる手順

.posted{　をかえよう

はなゾウ先生
はなゾウ先生

.posted {　をかえると記事本文の下部分がかわるよ

/* Articles */
.posted{
padding-top: 10px;
font-size:x-small;
color:#999999;
}
記事本文の下部分をかえる手順

  • step1
    余白をかえる

    ＊padding-top: 10px;　をかえると上からの幅が変わります
    　
    ＊padding-left: 10px;　を付け加えると左からの幅が変わります
    ＊padding-bottom: 10px;　を付け加えると下からの幅が変わります

  • step2
    文字色をかえる

    color:#999999;　→　color:#000000;　にかえます

    色はお好きな色を指定してください

  • step3
    文字リンク色をかえる

    下記タグを挿入し好きな色を指定してください

    .posted a:link { color:#0000FF; }
    .posted a:visited { color:#0000FF; }
    .posted a:active { color:#0000FF; }
    .posted a:hover { color:#0000FF; }

 

スポンサーリンク
タイトルとURLをコピーしました