Seesaa Blog（シーサーブログ）のカスタマイズ : undershaft newralnet works

<< 【簡単】にWeb2.0風のロゴが作成できるWeb2.0 - Logo Creatr | TOP | JavascriptでRSSフィードを表示するブログパーツ >>

Seesaa Blog（シーサーブログ）のカスタマイズ

Seesaa Blog（シーサーブログ）のカスタマイズについてまとめています。

管理画面の「デザイン > コンテンツ」の内容から紹介したいと思います。

*いずれのカスタマイズも保証はいたしかねます。挑戦する方はバックアップを必ずとってください。

デザイン > コンテンツ

自由形式をタイトル（＆枠線等）有りにする方法

Seesaa Blogの自由形式はデフォルトでタイトルや枠が表示されないようになっています。

バナーや画像を表示するのであれば特に意識することはないですが、テキストやテキストリンクをまとめたい場合、アンバランスな感じがします。カスタマイズは簡単なので是非試してみてください。

■デフォルト
<% content.header -%>
<% content.free.text %>
<% content.footer -%>

■変更後
<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% content.free.text %>
<% content.footer -%>
</div>

参考

<div class="sidetitle"></div>はタイトルの装飾です。これを変更（追加）することで次のタイトル（デフォルトは自由形式）に様々な装飾を施すことができます。
<% content.title %>はタイトルに入力したテキストを表示します。

<div class="side"></div>は以下のテキスト内容を装飾します。枠線だと分かりやすいですね。
<% content.free.text %>は自由形式に入力されたテキストを表示します。

自由形式に限らず「デザイン > コンテンツ」の各コンテンツは基本的に同じなので色々と試してみると面白いと思います。最初の頃はもっぱらここをカスタマイズしていました。

記事ページのタイトル直下へテキストやバナーを挿入する

記事ページとは、個別の記事ページのことです。トップページやカテゴリページ、過去ログページには表示されません。

<% if:with_date %><h2 class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></h2><% /if %>
<div class="blogbody">
<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3>
<% if:page_name eq 'article' -%>

ここに表示させたいテキストやバナー、画像等を挿入する

<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.entire_body | bodyfilter(article_info,blog) %><% if:list_tag %><div class="tag-word">タグ：<% loop:list_tag %><a href="<% blog.tag_url(tag) %>"><% tag.word %></a> <% /loop %></div><% /if %>

ブログ内の記事ページに対して一括で指定できるので、グーグルアドセンスはもちろん、ブログランキングやおすすめの広告などを表示させるとよいですね。

参考

記事ページのタイトル直下へテキストやバナーを回り込んで挿入する場合は、以下のように指定します。

<div style="float:left; margin: 15px">テキストやバナー、画像等</div>

左へ回りこませるにはfloat:leftを、右へ回りこませるにはfloat:rightを指定します。

また、テキストやバナーと本文の間隔はmarginで指定します。

タグ：カスタマイズシーサーブログ seesaa blog テンプレート

スポンサードリンク

【Seesaa Blog(シーサーブログ)の最新記事】