タグ「カスタマイズ」 の検索結果(1/1)

2009年1月26日

背景、ヘッダの変更など

カスタマイズを始めました。
まず、白い斜線の入った背景画像を敷いてみました。極く小さな画像の繰り返しで実現しています。テンプレート「スタイルシート(オリジナル)」に以下の記述をしました。
body.layout-three-column{
      background:#a3ccc8 url(images/back2.gif);
}

次に、以前も使っていた画像をヘッダに表示させてみました。スタイルシートは以下のとおりです。
#header {
      width:auto;
      height:130px;
      background: url(images/banner.jpg) no-repeat top center; 
}

続いて、記事の日付の背景の色、記事のタイトルの文字色、文字サイズなどを変更しました。スタイルシートは以下のとおりです。
/*ブログ記事日付等のバックの色*/
.date,
.trackbacks-header,
.comments-header,
.comments-open-header,
.search-header{
      background:#113377;
}

/*ブログ記事のタイトル*/
.entry-header{
      margin-bottom:8px;
      border-left:5px solid #115b77;
      font-size:110%;
      color:#113377;
}
.entry-header a{
      color:#113377;
}

これで以前の雰囲気に近づいてきました(背景の色はかなり違いますが)。

2008年10月27日

トップページの修正

トップページを普通のホームページ風にカスタマイズしようと考えています。
ブログ記事がトップページでは表示されないようにし、その代わりにあいさつの文章と画像を載せてみようと思います。
まずトップページ"index.html"を生成するテンプレート「メインページ」をすべてコピーし、新たにインデックステンプレート「ブログページ」を作成してそこにペーストします。
次に「メインページ」の中でテンプレートモジュール「ブログ記事の概要」を読み込んでいる部分を削除、そこに以下の記述をしました。
<div id="message">
<img src="images/top_image.jpg" />
<p>
ようこそKim's Blogへ!<br />
(中略)
また、姉妹編(?)の"Kim's Blog-2"もよろしくお願いいたします。</p>
</div>
最後にメニューに「ブログ記事」を追加するため、テンプレートモジュール「ヘッダ」を修正、余白を調整するためスタイルシート(ベーステーマ)を修正して今回の作業は終了です。
ページの先頭に戻る