« ココログをスタイルシートだけでクールなデザインにする方法その4 - サイドバー#2 | トップページ | ココログをスタイルシートだけでクールなデザインにする方法 その6 - 本文の各要素 »

ココログをスタイルシートだけでクールなデザインにする方法 その5 - 本文

本文の編集

各記事のソースを見てみます。

<div id="center">
<div class="content-top"></div>
<div class="content">
(省略)
<div class="entry-top"></div>
<div class="entry">
<a id="entry-54492351"></a>

<h3><a href="http://pocolog.cocolog-nifty.com/mt/2008/10/post-f213.html">ぽこログの説明</a></h3>

<div class="entry-body-top"></div>
<div class="entry-body">
<div class="entry-body-text">
<p>
ぽこログにアクセスいただきありがとうございます。このブログの主なトピックは、↓です。
</p>
(省略)
</div>
</div>
<div class="entry-body-bottom"></div>

<p class="posted">
(省略)
</div>
<div class="entry-bottom"></div>

「entry-top」「entry」「entry-bottom」を編集すればいいことが分かります。

.entry{
  background-image: url("http://pocolog.cocolog-nifty.com/images/content.gif");
  background-repeat: repeat-y;
  padding: 8px 32px 8px 20px;
  margin: 0px;
}
.entry-top{
  background-image: url("http://pocolog.cocolog-nifty.com/images/content-top.gif");
  height: 12px;
  margin: 0px;
  padding: 0px;
}
.entry-bottom{
  background-image: url("http://pocolog.cocolog-nifty.com/images/content-bottom.gif");
  background-repeat: none;
  height: 20px;
  margin: 0px;
  padding: 0px;
}

content-topの画像
Contenttop

contentの画像
Content

content-bottomの画像
Contentbottom

記事を表示する<p>タグを編集します。

.content p,.content li,.comment-body p{
  font-family: Verdana, "メイリオ", Osaka, sans-serif;
  font-size: 16px;
  line-height: 1.8em;
  color: #2b0a03;
  margin-top: 8px;
}

その他、エントリ関係のタグを編集します。

.entry{
  background-image: url("http://pocolog.cocolog-nifty.com/images/content.gif");
  background-repeat: repeat-y;
  padding: 8px 32px 8px 20px;
  margin: 0px;
}
div.content div.entry-nav{
  background-image: url("http://pocolog.cocolog-nifty.com/images/content.gif");
  background-repeat: repeat-y;
  padding: 0px 32px 0px 20px;
  margin: 0px;
}
div.content div.entry-trackback{
  background-image: url("http://pocolog.cocolog-nifty.com/images/content.gif");
  background-repeat: repeat-y;
  padding: 8px 32px 8px 20px;
  margin: 0px;
}
div.content div.entry div.entry-trackback{
  background-image: none;
  padding: 0px;
}
div.content div.entry div.entry-nav{
  background-image: none;
  padding: 0px;
}
.content h2{
  color: #2b0a03;
  font-family: Verdana, "メイリオ", Osaka, sans-serif;
}
.content h3{
  font-family: Verdana, "メイリオ", Osaka, sans-serif;
  font-weight: bold;
  color: #ffffff;
  line-height: 1.0em;
  background-image: url("http://pocolog.cocolog-nifty.com/images/header.gif");
  background-position: -248px 65%;
  padding: 8px;
  margin: 0px;
}
.content h3 a{
  font-family: Verdana, "メイリオ", Osaka, sans-serif;
  font-weight: bold;
  color: #ffffff;
}
.content h3 a:link,.content h3 a:visited{
  color: #ffffff;
}
.content h3 a:hover,.content h3 a:active{
  color: #f65300;
}
.content h4{
  font-family: Verdana, "メイリオ", Osaka, sans-serif;
  font-size: 18px;
  color: #2b0a03;
  margin-bottom: 8px;
}
.content h5{
  font-family: Verdana, "メイリオ", Osaka, sans-serif;
  font-size: 16px;
  font-weight: normal;
  color: #2b0a03;
  margin: 8px 0px 4px 0px;
}

記事に関する設定はこれで大体終わりました。次回は記事内の各要素の設定をします。

|

« ココログをスタイルシートだけでクールなデザインにする方法その4 - サイドバー#2 | トップページ | ココログをスタイルシートだけでクールなデザインにする方法 その6 - 本文の各要素 »

ウェブログ・ココログ関連」カテゴリの記事

パソコン・インターネット」カテゴリの記事

コメント

この記事へのコメントは終了しました。

トラックバック


この記事へのトラックバック一覧です: ココログをスタイルシートだけでクールなデザインにする方法 その5 - 本文:

« ココログをスタイルシートだけでクールなデザインにする方法その4 - サイドバー#2 | トップページ | ココログをスタイルシートだけでクールなデザインにする方法 その6 - 本文の各要素 »