Seesaa™ブログでCSSによるカスタマイズを行う方法

2013/11/14 2014/11/22

Seesaaブログを利用していて、少し不便だなと感じるのが、
レイアウトの調整ではないですか？
既存のコンテンツも含めてCSSでカスタマイズができたら便利なのに、
CSSの変更方法がわかりにくいだけで、ちゃんと変更できるんです。

はじめに

Seesaaブログの既存の要素をCSSで調整する方法をご紹介します。
HTMLの編集と同じようにリンクがあって、、、ないや orz…
と、諦める必要はありません。

CSS編集も認められている

Seesaaブログの画面構成が少しわかりにくいだけで、
CSSの変更をする画面も用意されています。

ブログにログインし、いつもの新規投稿の画面を開きます。
サイドメニューから[デザイン]を選択します。

サイドバーのデザイン選択

デザイン一覧画面から、上部の[PC]タブが選択されていることを確認し、
[デザイン設定]をクリックします。

デザイン設定の選択

デザイン設定画面で下にスクロールしていくと、
現在適用されているデザインのテーマが一覧で表示されます。

このテーマ名をクリックします。

編集するテンプレートタイトルの選択

CSS編集画面

テーマ名をクリックすると表示される画面からCSSの編集が行えます。

上部にリンクで[ページ：　トップ｜記事｜過去ログ｜カテゴリ]と表示されていますが、
初期状態では[トップ]のみにCSSが設定されており、
全ページに[トップ]で指定したCSSが適用されるようになっています。

お勧めはしませんが、個別にページの種類で表示を切り替えたい場合には、
トップのCSSをコピーして、記事・過去ログ・カテゴリに貼り付けた上で、
修正をするようにしましょう。

尚、CSSの複製機能は見当たりません。

CSS編集画面

トップ以外のCSSは未定義

タイトル文字色の変更例

では、実際にCSSの編集を利用して、ブログタイトル文字の色を変更してみます。
変更する前の状態は以下のような状態です。

CSS変更前の状態

CSS編集

CSS編集画面を開き、ヘッダに利用されているh1タグの記述を探します。
文字色は白が設定されています。

h1 {
margin:0px 0px 0px 0px;
padding-top:30px;
font-weight:bolder;
font-size:20px;
}
h1 a{
color:#fff;
text-decoration: none;
font-weight:bolder;
}

h1 {

margin:0px 0px 0px 0px;

padding-top:30px;

font-weight:bolder;

font-size:20px;

}

h1 a{

color:#fff;

text-decoration: none;

font-weight:bolder;

}

これを以下のように変更し、紺色に変更します。
※尚、元の設定は残しています。

h1 {
margin:0px 0px 0px 0px;
padding-top:30px;
font-weight:bolder;
font-size:20px;
}
h1 a{
/** color:#fff; **/
color:navy !important;
text-decoration: none;
font-weight:bolder;
}

h1 {

margin:0px 0px 0px 0px;

padding-top:30px;

font-weight:bolder;

font-size:20px;

}

h1 a{

/** color:#fff; **/

color:navy !important;

text-decoration: none;

font-weight:bolder;

}

追記が完了したら[保存]をクリックして反映します。
※念のため保存前にはプリビュー機能を利用されることをお勧めします。

CSSの保存が完了すると以下のようにメッセージが表示されます。
[設定を変更し、CSSをビルドしました。]

CSSの変更と保存

ブラウザからの表示確認

実際にブラウザから表示を確認すると以下のように変更されて表示されます。

変更後の表示

※CSSをトップページにのみ設定している場合には、
記事・過去ログ・カテゴリページにおいても、同じ変更が反映されて表示されます。

さいごに

こうしてCSSの編集が利用できることから、
概ね好みに合っているデザインテンプレートを設定した後に、
個別に自分にあったCSSを設定していくとカスタマイズの幅が広がっていくと思います。

Seesaaはシーサー株式会社の登録商標（第５０４９９６５号）であり、
Seesaaロゴはシーサー株式会社の登録商標（第５１３７４５７号）です。
Seesaaブログはシーサー株式会社のサービス名です。
Seesaaのサービスに用いられるアイコンその他のマーク等は、
シーサー株式会社の商標であり、シーサー株式会社の著作物です。