ココログをスタイルシートだけでクールなデザインにする方法 その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の画像
contentの画像
content-bottomの画像
記事を表示する<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; }
記事に関する設定はこれで大体終わりました。次回は記事内の各要素の設定をします。
| 固定リンク
「ウェブログ・ココログ関連」カテゴリの記事
- ココログをスタイルシートだけでクールなデザインにする方法 その7 - 完成版のスタイルシート(2014.07.28)
- ココログをスタイルシートだけでクールなデザインにする方法 その6 - 本文の各要素(2014.07.28)
- ココログをスタイルシートだけでクールなデザインにする方法 その5 - 本文(2014.07.28)
- ココログをスタイルシートだけでクールなデザインにする方法その4 - サイドバー#2(2014.07.28)
- ココログをスタイルシートだけでクールなデザインにする方法 その3 - サイドバー#1(2014.07.28)
「パソコン・インターネット」カテゴリの記事
- SONY VAIO C1(2016.10.08)
- ココログをスタイルシートだけでクールなデザインにする方法 その7 - 完成版のスタイルシート(2014.07.28)
- ココログをスタイルシートだけでクールなデザインにする方法 その6 - 本文の各要素(2014.07.28)
- ココログをスタイルシートだけでクールなデザインにする方法 その5 - 本文(2014.07.28)
- ココログをスタイルシートだけでクールなデザインにする方法その4 - サイドバー#2(2014.07.28)
この記事へのコメントは終了しました。
コメント