画像を用いた記事コンテンツのデザイン

記事タイトルと日付にblog_top.png、記事本文にblog_middle.png、posted by欄にblog_bottom.pngという画像を準備して、これら3つの画像を用いて記事コンテンツをデザインしました。

記事コンテンツのデザイン

まず記事コンテンツの編集でこれら3つのブロック要素<div>タグを追加します。
マイブログメニューの[デザイン]⇒[コンテンツ]の[記事]から編集を行います。

青文字のblogbodyの位置を変更し、赤文字のblog-top、blog-middle、blog-bottomの3行を追加しました。

<% loop:list_article -%>
<div class="blog">
 :
 :
<div class="blogbody">
<div class="blog-top">
<% if:with_date %><h2 class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></h2><% /if %>
<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3>
</div>
<div class="blog-middle">
<% if:page_name eq 'article' -%>
<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.entire_body | bodyfilter(article_info,blog) %></div>
<% else -%>
<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.first_body | bodyfilter(article_info,blog) %></div>
<% /if -%>
</div>
<div class="blog-bottom">
<div class="posted">posted by <% article.nickname %> at <% article.createstamp | date_format("%H:%M") -%>
 :
 :
<% if:article.accept_comment -%>
| <a href="<% article.page_url %>#comment">Comment(<% article.children_count | __or__ | echo('0') %>)</a>
<% /if -%>
<% if:article.accept_tb %>
| <a href="<% article.page_url %>#trackback">TrackBack(<% article.tb_count | __or__ | echo('0') %>)</a>
<% /if -%>
<% if:style.disp_category %>| <a href="<% article_category.page_url %>"><% article_category.name %></a><% /if %>
</div>
</div>
</div>
</div>
<% /loop -%>
※各カスタマイズの紹介を独立させるために、初期状態のソースで説明します。

次にスタイルシートの編集.blog-top{ }、.blog-middle{ }、.blog-bottom{ } のデザインを追加します。

.blog-top{
height:34px;
background-image:url(image/blog_top.png);
background-repeat:no-repeat;
}
.blog-middle{
background-image:url(image/blog_middle.png);
background-repeat:repeat-y;
}
.blog-bottom{
height:25px;
background-image:url(image/blog_bottom.png);
background-repeat:no-repeat;
}

以上で作業は完了です。
トップページへ戻る

サイトマップ

Seesaaブログのカスタマイズ > 記事コンテンツ > 画像を用いた記事のデザイン
スタイルシート カスタマイズ

スタイルシート作成ツール

HTMLカスタマイズ
サイト全体

記事コンテンツ

コメント、トラックバック
新着記事

カテゴリ

最近のコメント、トラックバック

検索ページ

その他