Archives | Tumblr | Facebook | bullet-feed.pngRSS

MT4:Movable Type4.01インストール備忘録(詳細) #5

参照
 MT4:Movable Type4.01インストール備忘録(詳細) #1
 MT4:Movable Type4.01インストール備忘録(詳細) #2
 MT4:Movable Type4.01インストール備忘録(詳細) #3
 MT4:Movable Type4.01インストール備忘録(詳細) #4

 今回で終わりにしようともくろんでいたのですが、記事が長すぎてサーバに弾かれ投稿できなかったため、少し記事を分けて書きます。ですので、まだ続きます。

タイトルバックに画像など、ヘッダの変更

・スタイルシート(メイン)変更前

* ヘッダ */
#header {
    padding: 15px;
    border-bottom: 1px solid #669;
    color: #999;
    background: #8fabbe;
    text-align: left;
}

・スタイルシート(メイン)変更後

/* ヘッダ */
#header {
padding: 18px;
color: #999;
background: #8fabbe;
height: 150px;
text-align: left;
background-image: url(http://naglly.com/title_bak.jpg);
background-repeat: no-repeat;
}

 ヘッダボックスのサイズを指定。バックグラウンドイメージの指定。外枠の消去を行った

色合い調整など
 これは完全に好みの問題です。一例を書きます。

・ブログ記事タイトル、変更前

/* ブログ記事タイトル */
.entry-header {
    margin: 15px 0 0;
    padding-left: 5px;
    border-left: 3px solid #999;
    font-size: 100%;
    font-weight: bold;
}

・ブログ記事タイトル変更後

/* ブログ記事タイトル */
.entry-header {
    margin: 15px 0 0;
    padding-left: 5px;
    font-size: 100%;
    font-weight: bold;
    background:#E6F3FF;
    border:2px solid #aaa;
    border-width:1px 0;
}

 バックグラウンド色の指定、上下にボーダーを入れました。

・引用、変更前

/* 引用 */
blockquote {
    width: auto;
    margin: 15px 20px 0;
    padding: 10px;
    border: 1px solid #666;
    background: #f6f6f6;
    font-size: 83.3%;
    line-height: 1.5;
}

・引用、変更後

/* 引用 */
blockquote {
width: auto;
margin: 15px 20px 0;
padding: 10px;
border: 2px solid #666;
background: #dfd;
font-size: 83.3%;
line-height: 1.5;
border-style: dotted;
}

 ボーダーとバックグラウンド色の変更。

リンクを踏んだ形跡を残したいため、一度クリックしたリンクの色を変える

・リンクスタイル、変更前

/* リンク */
a,
a:link,
a:visited {
    color: #069;
    text-decoration: none;
}
a:hover {
    color: #069;
    text-decoration: underline;
}
a:active {}

・リンクスタイル、変更後

/* リンク */
a {
  color: #6699cc;
  text-decoration: none;
}
a:link {
  color: #6699cc;
  text-decoration: none;
}
a:visited {
  color: #336699;
  text-decoration: none;
}
a:hover {
  color: #FF6600;
  text-decoration: underline;
}
a:active {
  color: #FF6600;
}

 このペースだと、あと2記事くらい続きそうです。

このエントリーをはてなブックマークに追加

関連性が高いおすすめ記事


comments powered by Disqus