Seesaa Seesaaカスタマイズ

Seesaaブログの記事タイトルをh1に変更する方法

テンプレートにもよりますがデフォルトでは、ブログタイトルがh1、日付がh2、記事タイトルがh3になっています。これを、記事タイトルをh1にしたいと思います。
何かに特化したブログならブログタイトルをh1のままにして、記事タイトルをh2にするほうがいいかもしれません。

まずはブログタイトルを画像に変更します。Seesaaブログのタイトルをロゴ画像に変更する方法を参考にしてください。

ブログタイトルをh1から変更


デザイン＞PC＞コンテンツで、ブログタイトルをクリックします。

次に、コンテンツHTML編集をクリックして、h1をdiv id=headerlogoに変更します。idは他で使われていなければ何でも大丈夫です。
変更後
<div id=headerlogo><a href=画像URLとサイズなど></a></div>

日付と記事タイトルをh2に変更


デザイン＞PC＞コンテンツで、記事をクリックします。

次に、コンテンツHTML編集をクリックして、日付と記事タイトルの編集をします。

日付の変更

<h2 class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></h2>
を検索してh2の部分をdivに変更します。
<div class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></div>
上が変更前、下が変更後です。

記事タイトルの変更

<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3>
を検索してh3の部分をh1に変更します。
<h1 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h1>
上が変更前、下が変更後です。

CSSで見出しをデザイン

CSSの編集方法は、SeesaaブログのHTML追加とCSSの編集方法を参考にしてください。

ライトグレー(左サイドバー)テンプレートの場合は、h1h2h3がこのようになっています。
h1 {
margin:0px;
padding-top:50px;
padding-bottom:10px;
font-weight:bolder;
font-size:24px;
font-family:Verdana;
}
h1 a{
color:#5D5D5D;
text-decoration: none;
font-weight:bolder;
}

h2 {
padding: 0px;
font-weight:bold;
text-align:left;
}

h3 {
padding: 0px 0px 0px 15px;
font-size:12px;
font-weight:bolder;
font-family:Verdana;
background-image:url(http://blog.seesaa.jp/img/bg/lightgray_2/title.gif);
background-repeat:no-repeat;
}

H3 a{
text-decoration: none;
color:#000;
}
もともとh1がブログタイトルだったため、paddingの値が大きくなっています。
h2は日付だったので、太字になっているぐらいで特に装飾はされていません。
h3は元が記事タイトルだったので、背景に画像が使われていてそれなりに装飾されています。

現在は、h1が記事タイトルでh2とh3は使われていないので、今までのh1h2h3を削除して新しく追加します。
h1は記事タイトル、h2とh3は記事内で使用するため、テンプレートのデザインにあった装飾をしていきます。

個人的にはシンプルなデザインが好きなのでこんな感じにしました。
h1 {
margin:0px;
padding:0px 0px 0px 10px;
font-weight:bold;
font-size:24px;
border-bottom:solid 1px #888
}
h1 a{
color:#444;
text-decoration: none;
font-weight:bolder;
}

h2 {
margin:30px 0px 10px 0px;
padding: 0px 0px 0px 10px;
font-size: 20px;
font-weight:bold;
text-align:left;
border-left:solid 5px #888;
}

h3 {
font-size:18px;
font-weight:bolder;
padding: 10px 0px 0px 0px;
}
文字のサイズや色、ボーダーの種類や色など好みに合わせて変更してください。

配置が崩れていまったり元に戻したい場合は、それぞれの場所で初期値に戻すか、同じテンプレートを改めて追加して適用してください。
スポンサーリンク
関連記事
スポンサーリンク